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

Question

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

webRoot 属性的文档指出:'这指定了工作区的绝对路径到 web 服务器根目录。用于解析 /app.js 等路径到磁盘上的文件。 "/"' 的 pathMapping 的简写

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

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

Answer 1

webRoot变量允许您引用本地源文件所在的目录。
默认为 ${workspaceFolder} ，文件通常所在的位置。

在内部，它用于将源映射绑定(bind)到本地文件。它设置 sourceMapPathOverrides 的默认值正如你在这里看到的:

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

如果您的 Visual Studio Code不保留断点可能是由不同的原因引起的:

源 map 不可用。

chrome 的远程调试被禁用。使用 chrome.exe --remote-debugging-port=9222 启用启动 chrome .

属性中的模式url您的launch.json与应用程序的网址不匹配。

源映射未正确绑定(bind)。属性 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/*"
            }
        }
    ]
}

希望这有助于理解它并让它运行。