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

Question

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

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

启动.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 Code 的新 JavaScript 调试器的一种方式。请参阅stackoverflow 讨论。旧的调试器不再在此平台上运行。希望这会对某人有所帮助。

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