在我的 Vue+Vuex 项目中,我尝试使用 Visual Studio Code 进行调试。我使用 Chrome 调试工具正确启动调试器,并使用 map 正确启动,但是当我尝试在我的 .js 或 .vue 文件中放置断点时,VS Code 似乎将断点放置在错误的位置。例如,在这里我尝试在第 40 行的一个 getter 中放置一个断点,但它在 15 行之后结束:
这是 VS Code 中的错误,还是其他问题?有关如何修复的任何建议?
其他行上的其他断点与后面几行中出现的行为相同,但我无法检测到模式。它发生在 .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
修复它
最容易发现的问题是 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://💻app/*": "${webRoot}/*"
}
我保留了这些,并添加了两个条目。为了修复 main.js
,我添加了:
"webpack:///./src/*": "${webRoot}/*",
并修复我添加的服务文件夹中的文件:
"webpack:///./src/services/*": "${webRoot}/services/*",
此时,我所有的断点都在整个项目的所有文件中起作用。
但为什么呢?
不幸的是,我无法告诉您为什么在我的案例中需要这两条魔术线,甚至无法告诉您它们的真正作用。
不过,我可以告诉你我是如何预测它们的。在 Chrome 的 devtools 中,我深入到“Sources”选项卡的 webpack://
部分。我注意到 src/components
显示在“root”(绿色箭头)中,而我的其他来源(红色箭头)则没有。它们仅显示在 .
(红色圆圈)下。
免责声明:我不是 Vue、webpack、chrome 调试协议(protocol)、sourcemaps 或 vue-loader 方面的专家。我只是又一名想在他的 IDE 而不是他的浏览器中设置他的断点的开发人员。
关于debugging - Visual Studio Code 断点出现在错误的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50765353/