vuejs3 debugging on Visual Studio Code not working - debugging

Question

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'
}
}

Answer 1

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

Answer 2

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

Answer 3

Add 2 paths in the sourceMapPathOverrides. It is working for me.
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*",
"webpack:///src/*": "${webRoot}/*",
}

Answer 4

Works after removing sourceMapPathOverrides:
// "sourceMapPathOverrides": {
// "webpack:///src/*.vue": "${webRoot}/*.vue",
// "webpack:///./src/*.js": "${webRoot}/*.js",
// }