Debugging .vue files of a quasar project with VSCode



  • Hello everybody,
    Is there somewhere a working example about how to configure a quasar project so as to be able to set breakpoints in the .vue files using VSCode?

    I’ve tried with the following configuration suggested in the VSCode github site https://github.com/Microsoft/vscode-recipes/tree/master/vuejs-cli (that should work for vue-cli projects) but I didn’t get it to work with quasar:

    {
      "version": "0.2.0",
      "configurations": [
        {
          "type": "chrome",
          "request": "launch",
          "name": "vuejs: chrome",
          "url": "http://localhost:8084",
          "webRoot": "${workspaceFolder}/src",
          "breakOnLoad": true,
          "sourceMapPathOverrides": {
            "webpack:///./src/*": "${webRoot}/*"
          }
        }
      ]
    }
    

    Thank you all in advance 🙂



  • Hi, you should add this webpack configuration to your quasar.conf.js (if you use quasar-cli):

      extendWebpack(cfg) {
        cfg.devtool = 'source-map'
      }


  • For me this is not working, anyone found a solution for this??


Log in to reply