vuejs3 调试 Visual Studio 代码不工作

Question

我最近转到了 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'
  }
}

Answer 1

我也遇到过类似情况，找不到相关解决方案：

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

冗长的细节：

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

OS 和版本：Mac OSX 版本 11.4 (20F71)
VS 代码版本：1.56.2
扩展：Python Microsoft v2021.5.842923320

根本原因：

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

Debug view displayed on break#

The default value of the debug.openDebug setting is now openOnDebugBreak so that on every breakpoint hit, VS Code will open the Debug view. The Debug view is also displayed on first session start.

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

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

Answer 2

我不得不将 launch.json 文件更改为以下内容。显然 pwa- 前缀是一种针对 VS Code 的新 JavaScript 调试器的方法。参见。旧的调试器不再适用于该平台。希望这会对某人有所帮助。

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

vuejs3 调试 Visual Studio 代码不工作

vuejs3 debugging on Visual Studio Code not working

debugging

visual-studio-code

vuejs3

vue-cli

vscode-debugger