# VS Code Debugging

**URL:** <https://discourse.aurelia.io/t/vs-code-debugging/1289>\
**Category:** Help Requests\
**Created:** [June 6, 2018, 2:50pm UTC](https://discourse.aurelia.io/t/vs-code-debugging/1289 "2018-06-06T14:50:08Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![airboss001](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/airboss001/32/719_2.png) [@airboss001](https://discourse.aurelia.io/u/airboss001)\
**Post date:** [June 6, 2018, 2:50pm UTC](https://discourse.aurelia.io/t/vs-code-debugging/1289/1 "2018-06-06T14:50:08Z")

</div>

So I am trying to get VSCode to set a breakpoint in the editor for a standalone project built using the CLI, which uses au run --watch, or npm start to normally run.

When I use F5 to start the project from the editor I can see the source maps in Chrome fine, and can set breakpoints on the TS files there in the browser debug area, but I cannot set any breakpoint inside VSCode itself without the dreaded “unverified breakpoint”.

I tried creating a new project to limit me having broken something and that doesn’t work either.

I have successfully gotten breakpoints to set using the dotnet core [asp.net](http://asp.net) project, but don’t like all the extra noise added to the UI and the WebApi projects that way, but want to keep the in editor breakpoint functionality.

I have tried the changes here to .vscode/launch.json, but to no effect:  
[skeleton-navigation/issues/852](https://github.com/aurelia/skeleton-navigation/issues/852)

Anyone know the secret sauce to get that working? Thanks!

---

<div class="post-metadata">

**Author:** ![airboss001](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/airboss001/32/719_2.png) [@airboss001](https://discourse.aurelia.io/u/airboss001)\
**Post date:** [October 16, 2018, 12:35am UTC](https://discourse.aurelia.io/t/vs-code-debugging/1289/2 "2018-10-16T00:35:16Z")

</div>

Thought I’d bump this, as I am still looking to see if I can debug in VSCode instead of having to working in the Chrome debug panel.

---

<div class="post-metadata">

**Author:** ![elitemike](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/elitemike/32/690_2.png) [@elitemike](https://discourse.aurelia.io/u/elitemike)\
**Post date:** [October 16, 2018, 2:32am UTC](https://discourse.aurelia.io/t/vs-code-debugging/1289/3 "2018-10-16T02:32:08Z")

</div>

Vs code debugging works fine for me usually, I didn’t do anything special. Make sure your extension is up to date

---

<div class="post-metadata">

**Author:** ![airboss001](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/airboss001/32/719_2.png) [@airboss001](https://discourse.aurelia.io/u/airboss001)\
**Post date:** [October 16, 2018, 4:15am UTC](https://discourse.aurelia.io/t/vs-code-debugging/1289/5 "2018-10-16T04:15:54Z")

</div>

Would you mind dropping your launch.json here so I can look at it?  
Much appreciated!

---

<div class="post-metadata">

**Author:** ![elitemike](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/elitemike/32/690_2.png) [@elitemike](https://discourse.aurelia.io/u/elitemike)\
**Post date:** [October 16, 2018, 10:39am UTC](https://discourse.aurelia.io/t/vs-code-debugging/1289/6 "2018-10-16T10:39:31Z")

</div>

I’m using webpack

```auto
{
  // Use IntelliSense to find out which attributes exist for node debugging
  // Use hover for the description of the existing attributes
  // For further information visit https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Chrome",
      "port": 9222,
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceRoot}/src",
      "userDataDir": "${workspaceRoot}/.chrome",
      "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*"
      }
    }
  ]
}

```

I actually have been meaning to try the Edge debugger and the firefox one as Chrome isn’t supported by my customer (private intranet)

---

<div class="post-metadata">

**Author:** ![airboss001](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/airboss001/32/719_2.png) [@airboss001](https://discourse.aurelia.io/u/airboss001)\
**Post date:** [October 16, 2018, 2:25pm UTC](https://discourse.aurelia.io/t/vs-code-debugging/1289/7 "2018-10-16T14:25:03Z")

</div>

So a little on my setup.  
VSCode  
Aurelia WebPack/Typescript project

Standard project directory layout  
root  
root/src  
root/dist  
“npm start” to serve files

So I have the Chrome debugger extension installed. 4.10.2  
I am able to use the start debugging with the “Chrome” selection and the browser is launched and I can see debug info in the VSCode debug console. However, all breakpoints are basically ignored and marked as unverified when you try to place one.

Only one odd error message in console that seems to be WebPack related:  
Failed to load resource: net::ERR\_FAILED [[http://localhost:8080/sockjs-node/info?t=1539699609575](http://localhost:8080/sockjs-node/info?t=1539699609575)]

---

<div class="post-metadata">

**Author:** ![elitemike](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/elitemike/32/690_2.png) [@elitemike](https://discourse.aurelia.io/u/elitemike)\
**Post date:** [October 16, 2018, 2:40pm UTC](https://discourse.aurelia.io/t/vs-code-debugging/1289/8 "2018-10-16T14:40:37Z")

</div>

Not sure if it matters, but I always run with au run --watch

---

<div class="post-metadata">

**Author:** ![airboss001](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/airboss001/32/719_2.png) [@airboss001](https://discourse.aurelia.io/u/airboss001)\
**Post date:** [October 16, 2018, 3:09pm UTC](https://discourse.aurelia.io/t/vs-code-debugging/1289/9 "2018-10-16T15:09:02Z")

</div>

My understanding is that does the same thing.  
A while back using the CLI was broken and I was told to use npm start.  
I am in the middle of a release and don’t want to update anything right now and break stuff, but I will see if that does anything.  
Thanks for your time, and sharing

---

<div class="post-metadata">

**Author:** ![airboss001](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/airboss001/32/719_2.png) [@airboss001](https://discourse.aurelia.io/u/airboss001)\
**Post date:** [October 16, 2018, 3:11pm UTC](https://discourse.aurelia.io/t/vs-code-debugging/1289/10 "2018-10-16T15:11:18Z")

</div>

Well I’ll be darned, just tried it and it worked!  
Thanks!

---

<div class="post-metadata">

**Author:** ![timfish](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/timfish/32/1566_2.png) [@timfish](https://discourse.aurelia.io/u/timfish)\
**Post date:** [October 17, 2018, 9:32am UTC](https://discourse.aurelia.io/t/vs-code-debugging/1289/11 "2018-10-17T09:32:19Z")

</div>

> [@airboss001](#):
>
> However, all breakpoints are basically ignored and marked as unverified when you try to place one.

This is almost always because it can’t find the sourcemaps. The debugger can’t load arbitrary files from the disk so separate map files don’t work. You need to ensure that sourcemaps are inlined.

In Webpack we have:

```auto
devtool: production ? 'source-map' : 'inline-source-map',

```

---

<div class="post-metadata">

**Author:** ![airboss001](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/airboss001/32/719_2.png) [@airboss001](https://discourse.aurelia.io/u/airboss001)\
**Post date:** [October 17, 2018, 2:39pm UTC](https://discourse.aurelia.io/t/vs-code-debugging/1289/12 "2018-10-17T14:39:57Z")

</div>

Thanks @timfish for adding that. Wasn’t the issue in my case, but could be helpful for someone else that is having difficulties with getting breakpoints to work.