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.