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

新手上路,请多包涵

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

在此处输入图像描述

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

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

我正在使用 VS 代码 1.24.0。

原文由 Patrick Szalapski 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 1.5k
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} 。只是这样做修复了我的 .vuesrc/components --- 文件中的所有跳跃。不幸的是, main.jsservices 文件夹中的文件中的断点仍然不稳定。

下一步是向 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 显示在“根”(绿色箭头)中,而我的其他来源(红色箭头)则没有。他们只显示在 . (红色圆圈)下。

显示 webpacked 源的 Chrome devtools 源选项卡

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

原文由 Mike Patrick 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题