无法使用 Visual Studio 代码在 Chrome 中调试 Vue 应用程序 - 无限断点

Question

我正在尝试使用 VSC 调试 Vue 应用程序。我有以下 launch.json

{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
    {
        "name": "Attach to Chrome",
        "port": 9222,
        "request": "attach",
        "type": "pwa-chrome",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}/src",
        "breakOnLoad": true,
        "sourceMapPathOverrides":{
            "webpack:///src/*": "${webRoot}/*"
        } 
    },
    {
        "type": "pwa-chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}/src",
        "breakOnLoad": true,
        "sourceMapPathOverrides":{
            "webpack:///src/*": "${webRoot}/*"
        }
    }
]

}

我还在项目的根目录下添加了下面的vue.config.js文件

module.exports = {
configureWebpack: {
    devtool: 'source-map'
},
devServer: {
    port: 8080
}

}

为了调试 Vue 应用程序，我在终端使用“npm 运行 serve”，单击左侧菜单中的“运行 and Debug”选项，然后选择我的调试配置“针对本地主机启动 Chrome”。

我无法绑定任何断点，即断点是代码中未填充的灰色圆圈。

不确定接下来要尝试什么，在网上搜索时没有发现可能是什么问题。

Answer 1

您的 "sourceMapPathOverrides" 可能不匹配。

"sourceMapPathOverrides" 应该指向 webpack 生成源映射的根文件夹。您可以在 chrome 开发工具中查看。

执行以下操作

1 - 打开你的 chrome 开发工具：

2 - 探索 webpack:// 大多数情况下它来源于 . 或 src 文件夹。要检查这一点，请打开一个随机的 vue 组件，它看起来应该与您的 vs-code 编辑器中的一样，这是 "sourceMapPathOverrides" 应该指向的正确源映射。

奖金

我当时使用的确切配置是：

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

无论如何请务必按照我列出的步骤进行操作，看看是否可以解决问题。

无法使用 Visual Studio 代码在 Chrome 中调试 Vue 应用程序 - 无限断点

Cannot debug Vue app in Chrome with Visual Studio Code - Unbounded Break Points

debugging

visual-studio-code

vuejs2

chrome-debugging

执行以下操作

奖金