Question

我正在使用Visual Studio Code并尝试配置Debugger for Chrome扩展程序以使用通过vue-cli创建的webpack项目。

我可以附加到正确的Chrome实例，并在调试控制台中查看已记录的信息。但是我无法在.vue文件的脚本中添加断点。

当我单击一行添加断点时，有时断点会添加到文件中较高位置的某一行上。有时候我会收到这个错误：

处理错误＆＃34; setBreakpoints＆＃34;：指定位置的断点已经存在。

有谁知道为什么我会看到断点这个问题？我的launch.json文件有什么问题吗？

重现的步骤：

设置webpack项目：
```
$ vue init webpack my-project
```

在VS Code中打开项目并配置launch.json文件，如下所示：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "url": "http://localhost:8080/*",
            "webRoot": "${workspaceRoot}"
        }
    ]
}

以开发模式启动webpack项目：
```
$ npm run dev
```

在端口9222上启用远程调试启动Chrome并导航至http://localhost:8080/：

$ /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug

点击f5运行调试程序并在任何地方添加断点

开发工具中的webpack源屏幕截图：

Answer 1

这是我的一个调试配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Chrome",
      "port": 9222,
      "trace": true,
      "webRoot": "${workspaceRoot}",
      "sourceMapPathOverrides": {
        "webpack:///./~/*": "${webRoot}/node_modules/*",       // Example: "webpack:///./~/querystring/index.js" -> "/Users/me/project/node_modules/querystring/index.js"
        "webpack:///src/*": "${webRoot}/src/*",                    // Example: "webpack:///src/App.js" -> "C:/project/src/App.js"
        "webpack:///*":     "${webRoot}/src/components/*"                               // Example: "webpack:///C:/project/hello.vue" -> "C:/project/src/hello.vue"
      }
    }
  ]
}

这是我的另一个低版本vue项目的调试配置：

{
    // Use IntelliSense to learn about possible Node.js debug attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "监听一个已经启动调试模式的Chrome",
            "port": 9222,
            "trace": true,
            "webRoot": "${workspaceRoot}",
            "sourceMapPathOverrides": {
                "webpack:///./~/*": "${webRoot}/node_modules/*",       // Example: "webpack:///./~/querystring/index.js" -> "/Users/me/project/node_modules/querystring/index.js"
                "webpack:///node_modules/*": "${webRoot}/node_modules/*",                    // Example: "webpack:///node_modules/vux/src/components/toast/index.vue" -> "/Users/me/project/node_modules/vux/src/components/toast/index.vue"
                "webpack:///src/*": "${webRoot}/src/*",                    // Example: "webpack:///src/App.js" -> "C:/project/src/App.js"
                "webpack:///*":     "*"                               // Example: "webpack:///C:/project/app.ts" -> "C:/project/app.ts"
            }
        }
    ]
}

Answer 2

请参阅https://github.com/Microsoft/vscode-chrome-debug#sourcemaps。你需要调整你的sourceMapPathOverrides。

默认配置可能不适合你的情况。调整后，在调试控制台中运行.scripts命令以查看输出。

确保两点，1）.vue或.js文件被映射到正确的绝对路径 2）如果有多个.vue文件，请让正确的.vue文件映射到正确的路径，让其他人映射到错误的路径。

远程调试VueJS webpack项目

重现的步骤：

开发工具中的webpack源屏幕截图：

2 个答案: