Visual Studio Code:已设置但尚未绑定的断点 - Vue.js

Question

我有一个大型的 Vue.js 项目，我正在尝试让调试在 VS Code 中正常工作。我已经尝试了整整一周的各种不同的东西，并且不断遇到绑定断点的问题。就其价值而言，这些通常在通过工厂模式创建的类或像 Vuex 操作这样没有直接可访问的函数端点的东西中出现得更糟 - 这可能是相关的。

以下是一些启动配置的示例...

{
"name": "Parity - Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8080/app",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*",
"/./*": "${webRoot}/*",
"/src/*": "${webRoot}/*",
"/*": "*",
"/./~/*": "${webRoot}/node_modules/*"
}
},
{
"name": "Parity - Edge",
"type": "edge",
"request": "launch",
"url": "http://localhost:8080/app",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*",
"/./*": "${webRoot}/*",
"/src/*": "${webRoot}/*",
"/*": "*",
"/./~/*": "${webRoot}/node_modules/*"
}
},

我在Chrome和Edge中得到了完全相同的行为(这并不奇怪，因为它们现在基本上是相同的浏览器(。

Answer 1

在浏览器中挖掘"源"选项卡时，我发现源映射大多都在 webpack 文件夹中，因此找不到它们的原因(例外是 *.vue 文件，因此它们可以正常工作(。

以下配置对我有用，但完整的答案是...

查看文件在网络浏览器的"来源"中找到的位置，然后 使用这些位置映射回实际文件位置 - 执行 我之前做了什么，只是尝试使用别人的随机配置 并不总是会起作用。

{
"name": "Parity - Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8080/app",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*",
"webpack:///./src/*": "${webRoot}/*",
"webpack:///./node_modules/*": "${webRoot}/node_modules/*"
}
},
{
"name": "Parity - Edge",
"type": "edge",
"request": "launch",
"url": "http://localhost:8080/app",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*",
"webpack:///./src/*": "${webRoot}/*",
"webpack:///./node_modules/*": "${webRoot}/node_modules/*"
}
},