Debugging Visual Studio代码断点出现在错误的位置

在我的Vue+Vuex项目中，我尝试使用Visual Studio代码进行调试。我使用Chrome调试工具正确地启动了调试器，并且正确地使用了映射，但是当我尝试在.js或.vue文件中放置断点时，VS代码似乎将断点放置在了错误的位置。例如，这里我尝试在第40行的一个getter中放置一个断点，但它在15行之后结束：

这是VS代码中的错误，还是其他问题？有没有关于如何修复的建议

其他行上的其他断点的行为与后面的行相同，但我无法检测到模式。它发生在.js和.vue文件中，也发生在对象声明和根级别的传统函数定义中

---

我使用的是VS Code 1.24.0。

要回答任何特定情况，至少需要使用launch.json配置和源文件夹结构。我有一个上周的真实故事来说明原因：

背景

我最近继承了一个相对较小的Vue项目，并立即遇到了相同的问题。VSCode中的断点在我所有的源文件中都是“跳跃的”

该项目不是用VSCode开发的，因此在源代码管理中没有

launch.json

。我第一次天真地尝试调试配置如下所示：

{
  "type": "chrome",
  "request": "launch",
  "name": "Launch Chrome",
  "url": "http://localhost:8080",
  "webRoot": "${workspaceRoot}",
  "sourceMaps": true
}

D:\TST\PROJECT
└───src
    │   main.js
    │
    ├───components
    │       AnotherComponent.vue
    │       SomeComponent.vue
    │
    └───services
            myservice.js
            yourservice.js

一个非常重要的细节是源文件夹结构。看起来是这样的：

{
  "type": "chrome",
  "request": "launch",
  "name": "Launch Chrome",
  "url": "http://localhost:8080",
  "webRoot": "${workspaceRoot}",
  "sourceMaps": true
}

D:\TST\PROJECT
└───src
    │   main.js
    │
    ├───components
    │       AnotherComponent.vue
    │       SomeComponent.vue
    │
    └───services
            myservice.js
            yourservice.js

---

修复它

最容易发现的问题是

webRoot

。由于我的源文件都在

src

文件夹中，因此需要指向

${workspaceRoot}/src

，而不仅仅是

${workspaceRoot}

。这样做修复了

src/components

下我的

.vue

文件中的所有跳跃。不幸的是，

main.js

和

services

文件夹中的文件中的断点仍然不稳定

下一步是在launch.json配置中添加一个

sourceMapPathOverrides

键。VSCode自动完成我认为的默认值：

  "sourceMapPathOverrides": {
    "webpack:///./*": "${webRoot}/*",
    "webpack:///src/*": "${webRoot}/*",
    "webpack:///*": "*",
    "webpack:///./~/*": "${webRoot}/node_modules/*",
    "meteor://Maybe editor and debugger are not using the same interpretation of "newline". Check if the code uses \r or \r\n and change it to the other.
I think you are actually trying to set break point at the middle of a statement.


It is actually a single statement. 


Consider below statement.


You can set a break point infront of it.


> 
var obj = { a: value1, b: value2 }


If you write this as 


var obj = { //can set break point here
 a: value1, //you can't set break point in this line 

 b: value2 //you can't set break point in this line 
}

“sourceMapPathOverrides”：{
"webpack:///./*“：“${webRoot}/*”，
"webpack:///src/*“：“${webRoot}/*”，
“网页包：//*”：“*”，
"webpack:///./~/*“：“${webRoot}/node\u modules/*”，
“meteor://可能编辑器和调试器使用的“新行”解释不同。请检查代码是否使用了\r\n或\r\n，并将其更改为另一种解释。
我认为您实际上是在试图在语句中间设置断点

这实际上是一个单一的声明

考虑下面的陈述

可以在其前面设置断点

>
var obj={a:value1，b:value2}

如果你把它写成

TL；DR-确保您的代码实际被引用/调用

就我而言：


node.js服务器应用程序
在第209行设置断点（方法“InsertClient”中的第一条语句）

IDE会自动将断点移动到文件的底部，即第649行

WTF

我最终发现：这是因为我错误地将方法命名为“InsertClient”，而不是“InsertClient”

因此IDE必须已经被扭曲，代码永远不会执行，因此将断点放在方法定义之后执行的下一段代码上……这是应用程序的右括号（或类似的东西）.
是否可能共享一个项目，以便我们知道我们使用的是与您相同的东西？我不认为我可以共享整个内容…抱歉。我指的是一个最小的项目，它显示了您的问题。对于typescript的类似VS代码问题，我必须添加“sourceMap”“：true to tsconfig.json如中所建议的，除了
launch.config
文件中的sourceMapPathOverrides属性之外，我已经完成了您所做的一切。添加该属性使断点停止滑动到奇怪的位置。我已经添加了此处发布的sourceMapPathOverrides（meteor部分除外）替换Vue HOWTO中指定的断点，并修复了OP发布的断点问题。感谢这真的是我见过的关于SO上IDE工具的最有用的答案之一！提供了一个正确的修复方法和（更有用的）一种非专家用来识别类似问题的技术。请注意1）
${workspaceRoot}
支持
${workspaceFolder}
和2）您在VS code中打开的文件夹与正确执行此操作非常相关。如果您是在更高级别的文件夹中打开的，则
${workspaceRoot}/src
不会指向正确的位置。这个答案非常有用。这个答案实际上不是发问者所问的。这个问题似乎来自映射问题。