Visual Studio Code 断点出现在错误的位置答案

【问题标题】：Visual Studio Code breakpoint appearing in wrong placeVisual Studio Code 断点出现在错误的位置
【发布时间】：2018-11-18 19:01:48
【问题描述】：

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

这是 VS Code 中的错误，还是其他问题？有关如何修复的任何建议？

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

我正在使用 VS Code 1.24.0。

【问题讨论】：

可以分享一个项目，这样我们就知道我们使用的是和你一样的东西？
我不认为我可以分享这整件事......对不起。
我的意思是一个显示您的问题的最小项目
对于与 typescript 类似的 VS Code 问题，我必须按照 how to debug typescript files in visual studio code 中的建议将 "sourceMap": true 添加到 tsconfig.json

标签： debugging vue.js visual-studio-code vuex

【解决方案1】：

要针对任何特定情况回答此问题，至少需要使用 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

修复它

容易发现的问题是webRoot。由于我的源文件都在src 文件夹中，因此需要指向${workspaceRoot}/src，而不仅仅是${workspaceRoot}。这样做可以解决我在src/components 下的.vue 文件中的所有问题。不幸的是，main.js 和services 文件夹中的文件中的断点仍然不稳定。

下一步是将sourceMapPathOverrides 键添加到launch.json 配置中。 VSCode 自动完成我认为的默认值：

  "sourceMapPathOverrides": {
    "webpack:///./*": "${webRoot}/*",
    "webpack:///src/*": "${webRoot}/*",
    "webpack:///*": "*",
    "webpack:///./~/*": "${webRoot}/node_modules/*",
    "meteor://?app/*": "${webRoot}/*"
  }

我将这些保留原样，并添加了两个条目。为了修复main.js，我添加了：

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

并修复我添加的服务文件夹中的文件：

"webpack:///./src/services/*": "${webRoot}/services/*",

此时，我的所有断点都在整个项目的所有文件中表现。

但是为什么呢？

很遗憾，我无法告诉您为什么在我的案例中需要这两条魔法线，甚至无法告诉您它们的真正作用。

不过，我可以告诉你我是如何猜到它们的。在 Chrome 的 devtools 中，我深入了解了“Sources”选项卡的 webpack:// 部分。我注意到src/components 显示在“根”中，（绿色箭头），而我的其他来源（红色箭头）没有。它们只在.（红色圆圈）下显示。

免责声明：我不是 Vue、webpack、chrome 调试协议、sourcemaps 或 vue-loader 方面的专家。我只是另外一位想要在他的 IDE 中设置断点的开发人员，而不是在他的浏览器中。

【讨论】：

我已经完成了你所做的一切，除了 launch.config 文件中的 sourceMapPathOverrides 属性。添加它使断点停止滑动到奇怪的地方。
我已经添加了这里发布的 sourceMapPathOverrides（流星部分除外）来替换 Vue HOWTO 中指定的那些，它修复了 OP 发布的断点问题。谢谢你
真的是我见过的关于 SO 上的 IDE 工具的最有用的答案之一！提供了正确的解决方法和（更有用的）非专家用来识别类似问题的技术。
请注意 1) ${workspaceRoot} has been deprecated 支持 ${workspaceFolder} 和 2) 您在 VS Code 中打开的文件夹与正确执行此操作非常相关。如果您在更高级别的文件夹中打开，那么${workspaceRoot}/src 将不会指向正确的位置。这个答案很有帮助
这个答案实际上并不是提问者所问的。问题似乎来自映射问题。

【解决方案2】：

也许编辑器和调试器没有使用相同的“换行符”解释。检查代码是使用\r还是\r\n，然后将其更改为另一个。

【讨论】：

【解决方案3】：

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

就我而言：

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

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

WTF！？

我终于发现：这是因为我错误地命名了方法：'InsertClients' 而不是 'InsertClient'

所以 IDE 一定是在假装代码永远不会被执行，因此将断点放在将在方法定义之后执行的下一段代码上......这是应用程序的右括号 (或类似的东西）。

【讨论】：

【解决方案4】：

我认为您实际上是在尝试在语句中间设置断点。

它实际上是一个单一的语句。

考虑下面的陈述。

你可以在它前面设置一个断点。

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

如果你把它写成

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 
}

【讨论】：