Visual Studio Code 上的 vuejs3 调试不起作用答案

【问题标题】：vuejs3 debugging on Visual Studio Code not workingVisual Studio Code 上的 vuejs3 调试不起作用
【发布时间】：2021-08-23 23:41:57
【问题描述】：

我最近转移到了 Vuejs3，我的调试设置停止工作。断点不会被触发。我使用与以前相同的配置文件，但不确定此版本是否有所改变。

Chrome 扩展调试器：v4.12.12
VsCode：1.56.2
Vue CLI v3
平台：Ubuntu 20.04.2 LTS

launch.json

{
    "version": "0.2.0",
    "configurations": [
      {
        "name": "vuejs: pwa-chrome",
        "type": "pwa-chrome",
        "request": "launch",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}/src",
        "sourceMapPathOverrides": {
          "webpack:///src/*": "${webRoot}/*"
        }
      },
      {
        "name": "vuejs: chrome",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}/src",
        "breakOnLoad": true,
        "sourceMapPathOverrides": {
          "webpack:///src/*": "${webRoot}/*"
        }
      }
    ]
}

vue.config.js

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

【问题讨论】：

在 Chrome 中设置断点有效并触发 vscode 中断。但是 vscode 仍然声称它的断点是“断点已设置但尚未绑定”

标签： debugging visual-studio-code vuejs3 vue-cli vscode-debugger

【解决方案1】：

我也遇到过类似情况，找不到相关的解决办法：

快速回答： 升级到 VS Code 1.56.2 后，确保删除旧断点并创建新断点，并且至少有 1 个断点和 launch.json 可用。

冗长的细节：

当我启动“调试器栏”时，我在 python 脚本中遇到了类似的问题，我在顶部调试栏上看到了几秒钟，然后它消失了。卜然后控制台上没有消息，什么都没有。我尝试重新安装 VS Code，启用/禁用扩展，各种重启。

操作系统和版本：Mac OSX 版本 11.4 (20F71)
VS 代码版本：1.56.2
扩展：Microsoft 的 Python v2021.5.842923320

根本原因：

我确实知道我更新了我的 VS Code，然后这个神秘的问题开始发生，所以什么时候发布 VS Code 1.56.2 的日志。我在发布日志下面找到了

在break#上显示的调试视图

debug.openDebug 设置的默认值现在是 openOnDebugBreak 以便在每个断点命中时，VS Code 都会打开调试视图。调试视图也显示在第一个会话上开始。

所以 VS 代码版本 1.56 版本，调试器只会在找到至少 1 个断点时显示。但是，在 VS Code 升级后，他们的内部代码检查历史断点数据似乎存在问题..

https://code.visualstudio.com/updates/v1_56#_debug-view-displayed-on-break

【讨论】：

我已删除所有断点重新启动一切并重置断点。还是不行。当我在 Chrome 中设置断点时，它实际上会触发暂停。我的断点也声明“断点已设置但尚未绑定”

【解决方案2】：

我不得不将我的 launch.json 文件更改为以下内容。显然 pwa- 前缀是针对 VS Code 的新 JavaScript 调试器的一种方式。见stackoverflow discussion。旧的调试器不再在这个平台上工作。希望这会对某人有所帮助。

{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "pwa-chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}"
    }
    ]
}

【讨论】：