1

我正在尝试使用 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 run serve”，单击左侧菜单中的“运行和调试”选项，然后选择我的调试配置，标题为“针对 localhost 启动 Chrome”。

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

不知道接下来要尝试什么，在线搜索中没有出现关于可能是什么问题的内容。

4

1 回答 1

0

您的"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}/*"
      }
    }
  ]
}

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

于 2021-10-21T10:08:42.283 回答