Question

我正在尝试从vscode启动chrome调试器，但是我的断点被传递了，并且我收到消息“设置了断点但尚未绑定”。我怀疑这是因为启动配置中的webRoot属性值错误。

webRoot属性上的文档指出：'这指定了Web服务器根目录的工作区绝对路径。用于将/app.js之类的路径解析为磁盘上的文件。路径的简写映射“ /”'

我正在尝试调试一些React组件，并且我正在微服务体系结构中工作，因此我的服务器是我正在使用的服务器的同级目录。因此，我尝试将webRoot设置为"${workspaceFolder}/../ui-web-server"。

我的问题是什么是webRoot属性（文档中的定义对我来说是模棱两可的）和 Chrome调试器如何在后台使用此属性。

Answer 1

使用webRoot变量可以引用本地源文件所在的目录。
默认情况下，它指向文件通常位于的${workspaceFolder}。

内部用于将源映射绑定到本地文件。如此处所示，它设置了sourceMapPathOverrides的默认值：

const DefaultWebSourceMapPathOverrides: ISourceMapPathOverrides = {
    'webpack:///./~/*': '${webRoot}/node_modules/*',
    'webpack:///./*': '${webRoot}/*',
    'webpack:///*': '*',
    'webpack:///src/*': '${webRoot}/*',
    'meteor://?app/*': '${webRoot}/*'
};

如果您的Visual Studio Code不能保持断点，可能是由于多种原因造成的：

源地图不可用。
已禁用chrome的远程调试。
要启用chrome.exe --remote-debugging-port=9222来启动chrome。
您的url的属性launch.json中的模式与应用的网址不匹配。
源映射未正确绑定。

sourceMapPathOverrides中的属性launch.json将源映射路径映射到本地源文件。如果您尚未定义其他路径，则Debugger for Chrome的映射如下：
- webpack:///./~/*至${workspaceFolder}/../ui-web-server/node_modules/*
- webpack:///./*至${workspaceFolder}/../ui-web-server/*
- webpack:///src/*至${workspaceFolder}/../ui-web-server/*
- meteor://?app/*至${workspaceFolder}/../ui-web-server/*

如果您不使用webpack或meteor，则可能具有不同的源映射路径。

要探索我的应用程序的源映射的结构，我使用了Chrome Developer Tools。在Sources下，您可以轻松地浏览它们并发现路径。

下面是一个示例launch.json。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to something",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "url": "http://localhost:8081/*",
            "webRoot": "${workspaceFolder}/../Application",
            "sourceMapPathOverrides": {
                "webpack://Module/*": "${workspaceFolder}/Module/*"
            }
        }
    ]
}

希望这对理解它并使其运行有所帮助。

Answer 2

我今天在 Vue 版本 3 和使用 Vue CLI 3 中遇到了同样的问题。这篇文章中的答案没有帮助。这解决了它 - https://github.com/microsoft/vscode-recipes/tree/master/vuejs-cli

如果您已经创建了 preLaunchTask，则仅包含它（请参阅上面的文章）

launch.json：

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

vscode chrome调试器启动启动配置中的webRoot是什么？

2 个答案: