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

Question

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

关于 webRoot 属性的文档指出：'这指定了到 webserver 根的工作区绝对路径。用于将/app.js 之类的路径解析为磁盘上的文件。 "/"' 的 pathMapping 的简写

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

我的问题是什么是 webRoot 属性（文档中的定义对我来说很模糊）以及 chrome 调试器如何在后台使用此属性。

Answer 1

我今天在 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"
    }
  ]
}

Answer 2

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 启用启动 chrome。
3. launch.json 的属性 url 中的模式与应用的网址不匹配。
4. 源映射未正确绑定。
   
   launch.json 中的属性 sourceMapPathOverrides 将源映射路径映射到本地源文件。 如果您尚未定义更多路径，您的 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/*"
            }
        }
    ]
}

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