在我的Vue+Vuex项目中,我尝试使用Visual Studio代码进行调试。我使用Chrome调试工具和Map正确启动了调试器,但是当我尝试在.js或.vue文件中放置断点时,VS代码似乎将断点放置在错误的位置。例如,这里我尝试在第40行的一个getter中放置断点,但它在15行之后结束:
这是VS代码中的bug,还是其他问题?有什么建议吗?
其他行上的其他断点也会出现在后面的行中,但我无法检测到一种模式,这种模式出现在.js和.vue文件中,出现在Object声明和根级传统函数定义中。
我使用的是VS代码1.24.0。
5条答案
按热度按时间3xiyfsfu1#
要回答任何特定情况下的这个问题,至少需要使用
launch.json
配置和源文件夹结构。我有一个上周的真实故事来说明原因:背景
我最近继承了一个相对较小的Vue项目,立即遇到了同样的问题。VSCode中的断点在我所有的源文件中都很“跳跃”。
这个项目不是用VSCode开发的,所以在源代码管理中没有
launch.json
。我第一次天真地尝试调试配置如下:一个非常重要的细节是源文件夹的结构,它看起来像这样:
"修复它"
最容易发现的问题是
webRoot
。因为我的源文件都在src
文件夹中,所以这需要指向${workspaceRoot}/src
,而不仅仅是${workspaceRoot}
。这样做就修复了src/components
下的.vue
文件中的所有跳跃。不幸的是,main.js
和services
文件夹中的文件中的断点仍然跳跃。下一步是在launch.json配置中添加一个
sourceMapPathOverrides
键,VSCode会自动完成我认为是默认值的内容:我让这些保持原样,并添加了两个条目。为了修复
main.js
,我添加了:"webpack:///./src/*": "${webRoot}/*",
并修复我添加的services文件夹中的文件:
"webpack:///./src/services/*": "${webRoot}/services/*",
此时,我的所有断点在整个项目中的所有文件中都有表现。
"但为什么“
不幸的是,我不能告诉你为什么我需要这两条神奇的线,甚至不能告诉你它们到底有什么作用。
不过,我可以告诉你我是怎么发现它们的。在Chrome的devtools中,我深入到“Sources”选项卡的
webpack://
部分。我注意到src/components
显示在“root”(绿色箭头)中,而我的其他源代码(红色箭头)没有。它们只显示在.
(红色圆圈)下。wi3ka0sx2#
可能编辑器和调试器对“换行符”的解释不同。请检查代码使用的是\r还是\r\n,然后将其更改为另一个。
vzgqcmou3#
TL;DR-确保您的代码确实被引用/调用
在我的例子中:
IDE会自动将断点移到文件的底部,即第649行。
我靠!
我终于发现:这是因为我给这个方法命名不正确:“插入客户端”而不是“插入客户端”
因此,IDE一定是因为代码永远不会被执行而产生的,因此将断点放置在方法定义之后将要执行的下一段代码上......这是应用程序的右括号(或类似的东西)。
dluptydi4#
将
"sourceMaps": true,
添加到launch.json
修复了此问题。bvjveswy5#
我认为你实际上是想在一句话的中间设置断点。
它实际上是一条语句。
考虑以下陈述。
您可以在它前面设置一个断点。
〉x1月1x
如果你把它写成