VS Code 调试可以使用 sourceMapPathOverrides 和 serverReadyAction / debugWithChrome 吗？答案

【问题标题】：Can VS Code debugging use sourceMapPathOverrides along with serverReadyAction / debugWithChrome?VS Code 调试可以使用 sourceMapPathOverrides 和 serverReadyAction / debugWithChrome 吗？
【发布时间】：2020-01-27 14:05:19
【问题描述】：

在 VS Code（在我的例子中是 .NET Core）中调试 Web 应用服务器代码时，有一个名为 serverReadyAction 的 launch.json 配置选项可以打开 Web 浏览器，例如：

"serverReadyAction": {
    "pattern": "^\\s*Now listening on:\\s+(https?://\\S+)"   ,
    "action": "openExternally"
}

openExternally 是一种可能的操作，debugWithChrome 是另一种操作。后者使用 Debugger for Chrome 扩展启动 Chrome 调试会话。在这种模式下，可以添加一个 webRoot 属性，该属性将传递给 Chrome 调试会话：

"serverReadyAction": {
    "action": "debugWithChrome",
    "pattern": "^\\s*Now listening on:\\s+(https?://\\S+)"   ,
    "webRoot": "${workspaceRoot}/wwwroot"
}

这样做的好处是现在我可以在我的 C#和我的客户端 JavaScript 中打断点 - 太棒了！

但是，我的 JS 实际上是从 TypeScript 编译并捆绑的（在本例中是 Webpack）。通常在使用 Debugger for Chrome 扩展程序时，我可以告诉它sourceMapPathOverrides。一个典型的配置是：

{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome",
    "url": "https://localhost:5001",
    "webRoot": "${workspaceRoot}/src",
    "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*"
    }
}

我的问题是，在使用由serverReadyAction/debugWithChrome 创建的 Chrome 调试会话时，这是否可行。不是很明显。

【问题讨论】：

标签： debugging visual-studio-code vscode-debugger

【解决方案1】：

我还没有找到传递此选项的方法，但我确实看到 Chrome 调试器扩展具有它的默认属性：

 "sourceMapPathOverrides": {
                "type": "object",
                "description": "%chrome.sourceMapPathOverrides.description%",
                "default": {
                  "webpack:///./*": "${webRoot}/*",
                  "webpack:///src/*": "${webRoot}/*",
                  "webpack:///*": "*",
                  "webpack:///./~/*": "${webRoot}/node_modules/*",
                  "meteor://?app/*": "${webRoot}/*"
                }
              },

https://github.com/microsoft/vscode-chrome-debug/blob/3771e9343c0776be19db6ba4653a7e4e7fdb96a6/package.json

所以只要我的项目文件与其中一个匹配，我就可以调试我的 TypeScript。

【讨论】：