时间戳

首页 > 解决方案 > 为什么在 VSCode 中调试 VueJS 如此不稳定

vue.js - 为什么在 VSCode 中调试 VueJS 如此不稳定

问题描述

我已经使用 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.jsvisual-studio-codevscode-debugger

解决方案

我可能遇到过类似的问题。
你找到解决办法了吗？
我的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。

推荐阅读