Visual Studio代码断点出现在错误位置 [英] Visual Studio Code breakpoint appearing in wrong place

问题描述

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

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

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

我使用的是VS代码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:TSTPROJECT
└───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中，我深入到了"源"选项卡的webpack://部分。我注意到src/components显示在"根"(绿色箭头)中，而我的其他来源(红色箭头)没有显示。它们仅显示在.(红色圆圈)下面。

免责声明：我不是VUE、webpack、Chrome调试协议、源地图或VUE-Loader方面的专家。我只是又一个希望在IDE中设置断点的开发人员，而不是在浏览器中设置断点的开发人员。

这篇关于Visual Studio代码断点出现在错误位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！