时间戳

首页 > 解决方案 > VS Code 调试可以使用 sourceMapPathOverrides 和 serverReadyAction / debugWithChrome 吗？

debugging - VS Code 调试可以使用 sourceMapPathOverrides 和 serverReadyAction / debugWithChrome 吗？

问题描述

在 VS Code（在我的情况下为 .NET Core）中调试 Web 应用服务器代码时，有一个launch.json配置选项serverReadyAction用于打开 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我的问题是，在使用/创建的 Chrome 调试会话时这是否可能debugWithChrome。这不是立即显而易见的。

标签： debuggingvisual-studio-codevscode-debugger

解决方案

我还没有找到传递此选项的方法，但我确实看到 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。

推荐阅读