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

Log in to reply