Visual Studio Code 断点出现在错误的地方

Question

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

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

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

我正在使用 VS Code 1.24.0.

Answer 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}

。这样做就修复了我的

.vue

文件在

src/components

下的所有跳跃。不幸的是，

main.js

和

services

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

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

sourceMapPathOverrides

键。 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 的开发工具中，我深入到“源”选项卡的

webpack://

部分。我注意到

src/components

显示在“根”（绿色箭头）中，而我的其他来源（红色箭头）则没有。他们只出现在

.

（红色圆圈）下。

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

Answer 2

也许编辑器和调试器没有使用相同的“换行符”解释。检查代码是否使用 或者 并将其更改为另一个。

Answer 3

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

就我而言：

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

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

卧槽！？

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

所以 IDE 一定是 wiggin' 代码永远不会被执行，因此将断点放在下一段代码上，该代码将在方法定义之后执行......这是应用程序的右括号（或其他东西）像那样）。

Answer 4

将

"sourceMaps": true,

添加到

launch.json

解决了这个问题。

Answer 5

在紧张的几分钟后，我开始质疑自己的存在，并开始制定我的总体计划，将微软夷为平地，我终于查清了真相

问题：

我的一些断点是跳动的，但只有当我实际执行代码并附加调试器时才会如此。我可以在不运行代码的时候设置好，但是当我运行它的时候，它们被打乱了。

解决方案：

.js 和 .ts 文件被错误映射，所以我只需要

npm run build

瞧

Answer 6

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

其实就是一条语句。

考虑以下声明。

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

>

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 
}