Vue.js Debug Config - Githubissues

VSCode Version: 1.36.1
Chrome: 75
OS Version: macOS 10.15 beta
Using Webpack: Yes
Using NPM: Yes
Vue: 2.6.10
Vue-cli: 3.9.0

I create a new project by Vue Cli, and then set the launch.json in VS Code as stated in the Vue.js Cookbook:

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

But it doesn't work as expected. After I set a red breakpoint at line 40 in HelloWorld.vue and click the green play button in the Debug view, the Debugger doesn't stop at the breakpoint and the breakpoint turns to a gray circle. It's said that this breakpoint is unverified.

I gooooogled a lot...Finally... when I change the sourceMapPathOverrides field in launch.json as follows, the Debugger works.

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

'./' before src is removed.

The config seems to be wrong.

microsoft / vscode-recipes

Vue.js Debug Config #222