2

我正在使用 Visual Studio Code 并尝试将Debugger for Chrome扩展配置为与我通过vue-cli创建的 webpack 项目一起使用。

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

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

处理“setBreakpoints”时出错：指定位置的断点已存在。

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

重现步骤：

  1. 设置一个 webpack 项目：

    $ vue init webpack my-project

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

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

  3. 在开发模式下启动 webpack 项目：

    $ npm run dev

  4. 在端口上启用远程调试的情况下启动 Chrome9222并导航到http://localhost:8080/：

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

  5. 通过点击运行调试器f5并在任意位置添加断点

开发工具中的 webpack 源码截图：

开发工具中的 webpack 源码截图

4

2 回答 2

3

这是我的调试配置之一：

{
  "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"
            }
        }
    ]
}
于 2017-08-16T03:35:04.890 回答
0

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

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

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

于 2017-08-16T03:31:24.800 回答