为什么在 VSCode 中调试 VueJS 如此不稳定答案

【问题标题】：Why is debugging VueJS so flaky in VSCode为什么在 VSCode 中调试 VueJS 如此不稳定
【发布时间】：2020-07-22 03:11:13
【问题描述】：

我已经使用 VSCode 几个月了，但一直无法找到一种方法来一致地调试一个简单的 VueJS 应用程序。我一直遇到的主要问题是 Unbound breakpoint 我设置的断点无法访问。

我尝试了许多 launch.json 配置，包括以下配置，但均未成功：

{
    "name": "Launch Chrome",
    "request": "launch",
    "type": "pwa-chrome",
    "url": "http://localhost:8080",
    "webRoot": "${workspaceFolder}"
},

{
    "name": "Attach hm",
    "port": 9229,
    "request": "attach",
    "skipFiles": ["<node_internals>/**"],
    "type": "pwa-node",
    "address": "localhost:8080",
    "localRoot": "${workspaceFolder}/src"
}

几周前，我偶然发现了以下配置，它神奇地解决了我的问题，并且我愉快地调试了好几天：

{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome against localhost",
    "url": "http://localhost:8080",
    "webRoot": "${workspaceFolder}/src",
    "breakOnLoad": true,
    "sourceMaps": true
}

在休息了几天编码后，我昨天回到了 VSCode，有 1.47.2 更新等待。做到了，写了几行代码，像我以前一样尝试调试，然后繁荣！来自地狱的Unbound breakpoint问题又回来了。

检查我的提交，launch.json 没有更改，没有新安装，没有任何更新。

这东西到底为什么停止工作？？？

需要注意的一点是，我可以在 VSCode 中完美调试我的应用程序的服务器部分（节点/express REST 服务器），完全没有问题。

非常令人沮丧，我真的不想回到使用 Chrome 的 DevTools 进行调试。

有人可以帮忙吗？

谢谢。

【问题讨论】：

标签： vue.js visual-studio-code vscode-debugger

【解决方案1】：

我可能遇到过类似的问题。
你找到解决办法了吗？
我的launch.json 文件是：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "pathMapping": {
        "/_karma_webpack_": "${workspaceFolder}"
      },
      "sourceMapPathOverrides": {
        "webpack:/*": "${webRoot}/*",
        "/./*": "${webRoot}/*",
        "/src/*": "${webRoot}/*",
        "/*": "*",
        "/./~/*": "${webRoot}/node_modules/*"
      }
    }
  ]
}

大多数时候它有效，但我仍然遇到奇怪的行为。此外，您应该始终从包含 VUE 项目的文件夹中（在 /src 之外）启动 VS Code。

【讨论】：