使用 VS Code 在 ASP.NET Core MVC 中调试 javascript 和 c#

Question

有没有办法在 VS Code（macOS 上）中同时设置断点和调试 javascript 和 c#？

我已经安装了chrome debugger extension，然后使用dotnet new mvc 创建了一个新的 MVC 应用程序。

但是当我启动应用程序断点时，仅在 C# 文件中被命中，它们在 js 文件 (site.js) 中保持灰色，因为没有加载任何符号。

这些是我的启动设置（我唯一修改的是osxcommand，因为chrome不是我在macOS上的默认浏览器）：

"version": "0.2.0",
   "configurations": [
        {
            "name": ".NET Core Launch (web)",
            "type": "coreclr",
            "request": "launch",
            "preLaunchTask": "build",
            // If you have changed target frameworks, make sure to update the program path.
            "program": "${workspaceRoot}/bin/Debug/netcoreapp1.1/Foo.PhotoSite.dll",
            "args": [],
            "cwd": "${workspaceRoot}",
            "stopAtEntry": false,
            "internalConsoleOptions": "openOnSessionStart",
            "launchBrowser": {
                "enabled": true,
                "args": "${auto-detect-url}",
                "windows": {
                    "command": "cmd.exe",
                    "args": "/C start ${auto-detect-url}"
                },
                "osx": {
                    "command": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
                },
                "linux": {
                    "command": "xdg-open"
                }
            },
            "env": {
                "ASPNETCORE_ENVIRONMENT": "Development"
            },
            "sourceFileMap": {
                "/Views": "${workspaceRoot}/Views"
            }

Answer 1

您要做的是调试 2 个不同的进程。使用您的配置调试服务器。如果您还想调试浏览器，您有 2 个选项。

第一个选项，只需启动第二个调试会话。 VS Code 会自动启动多目标调试。您将需要启动“附加到 chrome”会话（请参阅下面的配置示例）或“启动 chrome”会话。之后，您将调试您选择或启动的 chrome 实例和服务器。

第二个选项，如果你经常做的话可能更方便的是创建一个化合物。结果相同，但您可以一键启动。
在这种情况下，您可以删除启动浏览器的启动浏览器配置，除非您附加到该实例。

要让它运行，您可以单独尝试您的浏览器配置。让 chrome 调试正常工作（忽略服务器），然后将其组合到复合中。

用于启动或附加的 2 个 chrome 配置示例：

配置应如下所示： 请记住，我是从我的 Windows 机器上获取的，以防 macOS 或不同的调试端口有特殊符号。

{
    "version": "0.2.0",
    "configurations": [
        {
            // ...your configuration for .NET Core here... 
            // called .NET Core Launch (web)
        }
        {
            "type": "chrome",
            "request": "launch",
            "name": "LaunchChrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceRoot}"
        },
        {
            // This one in case you manually start 2 debug sessions.
            // Like first .net core 
            // then attach to the browser that was started.
            "type": "chrome",
            "request": "attach",
            "name": "AttachChrome",
            "port": 9222,
            "webRoot": "${workspaceRoot}"
        }
    ],
    "compounds": [
        {
            "name": "Debug MVC and Chrome",
            "configurations": [".NET Core Launch (web)", "LaunchChrome"]
        }
    ]
}

基本上你使用了 2 个不同的调试扩展。 .NET 调试器扩展和 chrome 调试器扩展。因此有 2 个不同的配置部分。

参考：
微软在 VS Code 中称其为“多目标调试”。在此处查看文档：https://code.visualstudio.com/docs/editor/debugging#_multitarget-debugging

Answer 2

serverReadyAction 推荐超过launchBrowser

如果您使用dotnet new reactredux -n testreactredux 浏览器启动创建一个新的 reactredux 网络核心应用程序，但在将action 更改为debugWithChrome 之前仍然无法调试，如下所示

{
    "version": "0.2.0",    
    "configurations": [
        {
            "name": ".NET Core Launch (web)",
            "type": "coreclr",
            "request": "launch",
            "preLaunchTask": "build",
            "program": "${workspaceFolder}/bin/Debug/netcoreapp3.0/testreactredux.dll",
            "args": [],
            "cwd": "${workspaceFolder}",
            "stopAtEntry": false,
            // Enable launching a web browser when ASP.NET Core starts. For more information: https://aka.ms/VSCode-CS-LaunchJson-WebBrowser
            "serverReadyAction": {
                "action": "debugWithChrome", // <---- CHANGE HERE ( default is 'openExternally' )
                "pattern": "^\\s*Now listening on:\\s+(https?://\\S+)"
            },
            "env": {
                "ASPNETCORE_ENVIRONMENT": "Development"
            },
            "sourceFileMap": {
                "/Views": "${workspaceFolder}/Views"
            }
        }
    ]
}

这样如果我在 c# 代码调试器上放置断点就会命中

在 javascript 上（我使用 typescript tsx）

我注意到 js 代码上的断点在开始时仍然是灰色的，但后来它正确地停在那里。