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.