使用ASP.Net Core在VSCode中调试打字稿 [英] Debug Typescript in VSCode with ASP.Net Core

问题描述

这时候我正在尝试创建一个基于ASP.Net Core(C#)的React Web应用程序.我用TypeScript编写了代码.我将代码与Webpack捆绑在一起.源地图已启用.

At this time I'm trying to create a React Web Application based on ASP.Net Core (C#). I wrote my code in TypeScript. I bundled my code with Webpack. Source Maps are enabled.

现在，我想在Visual Studio代码中调试我的(Typescript)代码.在Chrome中进行调试的效果很好.因此，源映射都可以正常工作.

Now I would like to debug my (Typescript) code within Visual Studio Code. Debugging in Chrome works good. So the Source Maps are all working correctly.

这可能吗?在使用Node.js服务器时，我发现了很多东西/教程，但是在使用ASP.Net Core时，却发现了很多东西.

Is this possible? I have found a lot of things/tutorials when working with a Node.js Server but nothing when working with ASP.Net Core.

感谢您为我指明了正确的方向.甚至更好，为我如何设置VSCode(launch.json等)写一些教程

Thanks for pointing me into the right direction. Or even better, writing a little Tutorial for how I have to setup my VSCode (launch.json etc)

推荐答案

再搜索三个小时，然后按照GitHub问题我找到了解决方法.

Ok after another 3 hours of searching the web an follow GitHub Issues i have found a solution.

如@ulubeyn所述，您将需要扩展Debugger for Chrome 链接到Chrome调试器

As @ulubeyn mentioned you will need the Extension Debugger for Chrome Link to Debugger for Chrome

然后，您必须在launch.json中添加配置.像这样:

Then you have to add a configuration in your launch.json. Something like this:

{
    "name": "Launch Chrome",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:5000",
    "webRoot": "${workspaceRoot}/wwwroot"
}

自去年11月以来，我们能够在VS Code中启动多个调试器.为此，您必须添加"compounds" (源) launch.json的部分，其中提到要一起启动的不同配置名称.

Since last November we are able to launch multiple debuggers in VS Code. For this you have to add a "compounds" (source) section to your launch.json where you mention the different configuration names which you want to start all together.

这是我最后的launch.json.请注意，我已将".NET Core Launch (web)"配置中的"launchBrowser" "enabled"属性设置为false，以防止此配置打开新的浏览器选项卡，因为我们打开了一个新的Broser，并在"Launch Chrome"中附加了调试器.配置.

Here is my final launch.json. Be aware of that i have set the "launchBrowser" "enabled" property to false in the ".NET Core Launch (web)" configuration to prevent this configuration from opening a new browser tab since we open a new Broser with the debugger attached in the "Launch Chrome" configuration.

{
 "version": "0.2.0",
 "compounds": [
    {
        "name": "ASP.Net Core & Browser",
        "configurations": [".NET Core Launch (web)", "Launch Chrome"]
    }
 ],
 "configurations": [
    {
        "name": ".NET Core Attach",
        "type": "coreclr",
        "request": "attach",
        "processId": "${command:pickProcess}"
    },
    {
        "name": ".NET Core Launch (web)",
        "type": "coreclr",
        "request": "launch",
        "preLaunchTask": "build",
        "program": "${workspaceRoot}/bin/Debug/netcoreapp1.1/VoteExample.dll",
        "args": [],
        "cwd": "${workspaceRoot}",
        "stopAtEntry": false,
        "launchBrowser": {
            "enabled": false,
            "args": "${auto-detect-url}",
            "windows": {
                "command": "cmd.exe",
                "args": "/C start ${auto-detect-url}"
            },
            "osx": {
                "command": "open"
            },
            "linux": {
                "command": "xdg-open"
            }
        },
        "env": {
            "ASPNETCORE_ENVIRONMENT": "Development"
        },
        "sourceFileMap": {
            "/Views": "${workspaceRoot}/Views"
        }
    },
    {
        "name": "Launch Chrome",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:5000",
        "webRoot": "${workspaceRoot}/wwwroot"
    }
 ]
}

现在，我们可以在一个Visual Studio代码窗口中调试ASP.NET Core应用程序和客户端代码. ".NET Core Attach"配置部分不是必需的，但有时我想将调试器附加到正在运行的进程上.

Now we are able to debug both, the ASP.NET Core Application and the Client side code within one Visual Studio Code Window. The ".NET Core Attach" Configuration section is not needed, but sometimes i want to attach the debugger on a running process.

这篇关于使用ASP.Net Core在VSCode中调试打字稿的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！