VS Code Debugger Config

[pzjzeason]

• 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 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 in Cookbook seems to be wrong.

[phanan]

Hmm, this config was changed in #1994 following an official commit in microsoft/vscode-recipes@2a70f22. I see another comment in the commit stating the same problem you have, though. It seems to me we can use both versions in the config. Thoughts? Pinging @sdras.

[pzjzeason]

Hmm, this config was changed in #1994 following an official commit in microsoft/vscode-recipes@2a70f22. I see another comment in the commit stating the same problem you have, though. It seems to me we can use both versions in the config. Thoughts? Pinging @sdras.

Maybe it's related to Webpack's version or Chrome's. Using Webpack 4 and Chrome 75, Chrome serves up files from webpack:///src/*, which means reverting to the previous version.

[ngdty]

@jackdempsey @pzjzeason