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

Question

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

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

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

我正在使用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夹中的文件中和文件中的断点仍然是跳跃的.

下一步是为sourceMapPathOverrideslaunch.json配置添加一个键.VSCode自动填充我认为的默认值:

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

我原样离开了这些,并添加了两个条目.要修复main.js,我补充说:

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

并修复我添加的services文件夹中的文件:

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

此时,我的所有断点都在整个项目中的所有文件中都有效.

但为什么？

不幸的是,我不能告诉你为什么在我的情况下需要这两条神奇的线条,甚至他们真正做的是什么.

但是,我可以告诉你我是如何判断他们的.在Chrome的devtools中,我钻进webpack://了"Sources"选项卡的部分.我注意到它src/components显示在"根",(绿色箭头),而我的其他来源(红色箭头)则没有.他们只是在下面显示.(带圆圈的红色).

免责声明:我不是Vue,webpack,chrome调试协议,源映射或vue-loader的专家.我只是一个想在他的IDE中设置断点的开发人员,而不是他的浏览器.