Debugging with VsCode and chrome-dev-tools

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

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

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

    Any idea?

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

  • Very nice. Thanks a lot for the prompt feedback.

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

  • 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?)

  • 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

Log in to reply