Debugging with VsCode and chrome-dev-tools

paul

When I use a standard VueJs project following recipe works perfectly:

https://github.com/Microsoft/vscode-recipes/tree/master/vuejs-cli

So, I can put breakpoints in the vscode editor etc.

Unfortunately i can’t get this working with a Quasar project.

Any idea?

benoitranque

@paul This is not currently a feature we have, however we will probably get to it once 0.15 is out. Stay tuned!

paul

Very nice. Thanks a lot for the prompt feedback.

a47ae

This is really easy.
First build your project with sourcemapping activated.
Then install the “Debugger for Chrome” extension for VS Code and create a file .vscode/launch.jsonwith the following config:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Debug Quasar",
      "url": "http://localhost:8000",
      "webRoot": "${workspaceRoot}",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///*": "${webRoot}/*"
      }
    }
  ]
}

The only part that differs from your example are the source map path overrides.
Then you should be able to create breakpoints an debug right from within VS Code.

bobhy

And don’t forget to start the dev server once beforehand (external to VS Code, e.g c:\> quasar dev. Then each time you start a debug session, VS Code will launch Chrome, find the tab with the right URI and attach to that. (Optional, for extra credit: how to you launch the new Chromium based Edge Dev browser instead of Chrome?)

QuaSam

I was having trouble but used EXACTLY the code above in launch.json (except used 8080 not 8000) and it worked! I was having weird problem where breakpoint set on one line ended up assigned to a different line in the module. Now all appears to be working. Thanks!
FYI what I have in quasar.conf.js is as follows - the commented brkpt: cfg.devtool below was tried and did not seem to affect the problem; it does not seem to be needed but if anyone knows otherwise, please advise.
build: {
scopeHoisting: true,
devtool: ‘source-map’,
extendWebpack (cfg) {
// this had no effect on vs code: brkpt: cfg.devtool = ‘source-map’ // added 4/12/20, set brkpt and it gets placed elsewhere
}
},

No More Posting New Topics!

Debugging with VsCode and chrome-dev-tools