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.


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.