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

Question

有没有办法在VS Code(在macOS上)同时设置断点并调试javascript和c#？

我已经安装了chrome调试器扩展,然后使用创建了一个新的MVC应用程序dotnet new mvc.

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

这些是我的启动设置(我唯一修改的是osx command因为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个铬配置的示例:

配置应该如下所示:请记住,我从我的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个不同的配置部分.

参考:
Microsoft称其为VS Code中的"多目标调试".请参阅此处的文档:https://code.visualstudio.com/docs/editor/debugging#_multitarget-debugging