我正在用Visual Studio代码开发一个Vue.js Web应用程序(Vue 2),并使用chrome调试器扩展。我在几个月前根据这篇SO帖子的建议设置了这个应用程序:Visual Studio程式码中断点出现在错误的位置
在最新的VS代码更新(版本:1.47.0)前几天被推送了,现在调试点出现在代码中错误的位置,就像之前链接的帖子一样。
在下面的示例gif中,调试器永远不会在我实际单击的断点处停止。断点跳到第40行,这是调试时唯一实际中断的点。调试器永远不会在第142、147、150......只有第40行(我从未设置过)停止。
下面是过去几个月一直有效的.vscode/launch.json
配置:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*",
"webpack:///./src/*": "${webRoot}/*",
"webpack:///./*": "${webRoot}/*",
"webpack:///*": "*",
"webpack:///./~/*": "${webRoot}/node_modules/*",
}
}
]
}
更新
我曾怀疑工作流中的某些东西(比如切换git分支)是问题的原因,但似乎不是这样。我已经在同一个git分支上工作了一周,无法在多个.vue文件中设置断点。
更新日期:2021年11月
我目前正在调试一个Vue/Electron应用程序。该应用程序加载了一个没有组件的页面,我想调试稍后加载的组件。我注意到在初始加载之前设置的断点不起作用。但是如果我在组件加载之后在该组件中设置断点,它似乎起作用了。
不确定这是否适用于所有Vue调试,或者它是否特定于Vue/Electron,但我想留下注解,以防出现模式。
2条答案
按热度按时间vyu0f0g11#
我能够通过右键单击扩展市场列表中的Javascript调试器升级到最新版本的Javascript调试器来修复这个问题。
lqfhib0f2#
对于新项目,请使用Vue 3 + Vite进行无缝调试!我使用推荐的VITE设置在Vue 3中启动了一个新项目,在VS代码中调试时没有遇到任何问题。
对于仍然需要Vue 2的项目来说,这不是最好的答案,因为配置选项有点不同(与Volar相比)。但是我非常高兴在Vue 3项目中使用VScode中的断点!
Vue 3快速入门指南会自动使用Vite设置一个新项目。