[SOLVED] vuejs3 debugging on Visual Studio Code not working

vuejs3 debugging on Visual Studio Code not working

I have recently moved over to Vuejs3 and my debugging setup stopped working. The breakpoints don't get triggered. I am using the same config files as before and not sure if something changed with this release.

Debugger for Chrome Extension: v4.12.12
VsCode: 1.56.2
Vue CLI v3
Platform: Ubuntu 20.04.2 LTS

launch.json

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

vue.config.js

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

Solution

I had to change my launch.json file to the below. Apparently the pwa- prefix is a way to target VS Code's new JavaScript debugger. See stackoverflow discussion. The old debugger no longer works on this platform. Hope this will help somebody.

{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "pwa-chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}"
    }
    ]
}