VS Code Debugging

Help Requests
1

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 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

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

2

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.

1 Like
3

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

5

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

6

I’m using webpack

{
  // 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)

7

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]

8

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

9

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

10

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

1 Like
11

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:

devtool: production ? 'source-map' : 'inline-source-map',
12

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.

1 Like