如何为 Chrome（或 Edge）扩展设置调试器以正确断点在 wwwroot 之外提供的源文件？答案

【问题标题】：How to set up a debugger for a Chrome (or Edge) extension to properly breakpoint source files served outside of wwwroot?如何为 Chrome（或 Edge）扩展设置调试器以正确断点在 wwwroot 之外提供的源文件？
【发布时间】：2020-01-31 22:40:01
【问题描述】：

我的项目是这样布局的：

${workspaceFolder}
  /wwwroot
  /res

/res 目录用于通过安全控制器提供文件。

我的问题是通过“Debugger for Chrome”（或 Edge）扩展在 VS Code 中进行源代码调试。

如果我在 VS Code 中的 JS 文件中放置断点，如果该文件存在于 wwwroot 目录下（它在源中的该点处停止），它将正常工作。

但是如果 js 文件是从 /res 目录提供的（到 Web 浏览器中的 /res），VS Code 将打开该文件的新实例，而不是源实例。

我认为我需要为调试器进行某种目录映射，以将 http://localhost/res 转换为 ${workspaceFolder}/res 以调试源文件，但我不确定正确的设置（可能需要设置 sourceMapPathOverrides，但是我的尝试失败了。）。

【问题讨论】：

调试器使用源映射让您使用原始源进行调试，但有时源映射无法正确生成并且需要覆盖。在配置中，我们支持 sourceMapPathOverrides，这是从 sourcemap 到这些源在磁盘上的位置的源路径映射。当源图不准确或无法在构建过程中修复时很有用。参考：marketplace.visualstudio.com/… 和 docs.microsoft.com/en-us/microsoft-edge/visual-studio-code/…
我知道源映射覆盖，并尝试使用该命令（如我的问题中所述）无济于事。几乎完全缺乏语法和变量文档，以及与标准路由无关的解释不清的示例，令人困惑。我试过 "sourceMapPathOverrides": { "/res/*": "${workspaceFolder}/res/*" }
我建议你在他们的 github repo 上创建问题。参考：github.com/Microsoft/vscode-edge-debug2/issues/new

标签： visual-studio-code microsoft-edge chromium

【解决方案1】：

我使用了错误的命令。 pathMapping 是我需要使用的。

下面的 launch.json 配置允许我断点位于 wwwroot 之外的源文件（在本例中为 /res）

{
    "name": "Launch localhost in Microsoft Edge (Chromium) Canary",
    "type": "edge",
    "request": "launch",
    "version": "canary",
    "url": "http://127.0.0.1:5100/test.html",
    "webRoot": "${workspaceFolder}/wwwroot",
    "pathMapping": {
        "/res": "${workspaceFolder}/res"
    }
}

【讨论】：