vuejs3 debugging on Visual Studio Code not working

user_3591655 0
Viewed 2326

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'
  }
}
vue-cli vscode-debugger vuejs3 visual-studio-code debugging
3 Answers

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}"
    }
    ]
}
user_35916550

I was in similar situation and couldn't find relevant resolutions:

Quick Answer: After upgrade to VS Code 1.56.2, make sure to remove old breakpoints and create new breakpoint and at-least have 1 breakpoint and launch.json available.

Lengthy details:

I have similar issue for python scripts when I start the "debugger bar" I see it for a couple of seconds the top debugging bar and then it disappears. Bu then no message on the console, nothing. I tried reinstalling VS Code, enabling/disabling extension, various restart.

  • OS and Version: Mac OSX Version 11.4 (20F71)
  • VS Code Version: 1.56.2
  • Extension: Python v2021.5.842923320 by Microsoft

RootCause:

What I did know for sure that I updated my VS Code, and after that this mysterious issue start happening, so when to release log of VS Code 1.56.2. I found below release log

Debug view displayed on break#

The default value of the debug.openDebug setting is now openOnDebugBreak so that on every breakpoint hit, VS Code will open the Debug view. The Debug view is also displayed on first session start.

So VS code Version 1.56 release, debugger will only show when at-least 1 breakpoint is found. However, looks like there is issue with their internal code checking for historical breakpoint data after VS Code upgrade..

https://code.visualstudio.com/updates/v1_56#_debug-view-displayed-on-break

user_25779230

Add 2 paths in the sourceMapPathOverrides. It is working for me.

"sourceMapPathOverrides": {
  "webpack:///./src/*": "${webRoot}/*",
  "webpack:///src/*": "${webRoot}/*",
}
user_174946190
Related