Visual代码不工作的vuejs3调试

Question

我最近搬到了Vuejs3，我的调试设置停止工作。断点不会被触发。我正在使用与以前相同的配置文件，并且不确定这个版本是否有什么变化。

用于Chrome扩展的

• 调试器：

1.56.2

• Vue CLI v3
• 平台:Ubuntu20.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

我必须将我的launch.json文件更改为下面的文件。显然，pwa前缀是一种针对VS代码的新JavaScript调试器的方法。见stackoverflow discussion。旧调试器不再在此平台上工作。希望这能帮上忙。

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

Answer 2

我当时也有类似的情况，却找不到相关的决议：

快速回答:升级到VS代码1.56.2后的，确保删除旧的断点并创建新的断点，至少有一个断点和launch.json可用。

冗长的详细信息：

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

1.56.2

• Extension：

• 操作系统和版本: Mac版本11.4 (20F71)

• 与代码版本:Microsoft 2021.5.842923320

RootCause:

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

调试视图显示在break#上

debug.openDebug设置的默认值现在是openOnDebugBreak，因此在每次命中断点时，VS代码将打开调试视图。调试视图也会在第一次会话开始时显示。

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

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

Answer 3

在sourceMapPathOverrides中添加两个路径。对我来说很管用。

"sourceMapPathOverrides": {
  "webpack:///./src/*": "${webRoot}/*",
  "webpack:///src/*": "${webRoot}/*",
}