Debugging with VsCode and chrome-dev-tools



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



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