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

Question

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

关于 webRoot 属性的文档指出：“这指定了网络服务器根目录的工作区绝对路径。用于解析/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没有坚持断点可能是由不同的原因造成的：

1. 源地图不可用。
2. chrome 的远程调试被禁用。
   要使用chrome.exe --remote-debugging-port=9222.
3. url您的属性中的模式launch.json与应用程序的 url 不匹配。
4. 源映射未正确绑定。
   
   该物业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/*"
            }
        }
    ]
}

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