在 VS Code 中调试 Vue.js 已损坏

Question

我正在 Visual Studio Code 中开发一个 Vue.js Web 应用程序 (Vue 2) 并使用 chrome 调试器扩展。几个月前，我按照此 SO 帖子的建议进行了设置： visual-studio-code-breakpoint-appearing-in-wrong-place

在几天前推出最新的 VS Code 更新（版本：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，但我想留下注释以防出现模式。

Answer 1

我可以通过右键单击扩展市场列表中的 Javascript 调试器升级到最新版本的 Javascript 调试器来解决此问题。