使用 ASP.Net Core 在 VSCode 中调试 Typescript [英] 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 Code 中调试我的(Typescript)代码.在 Chrome 中调试效果很好.所以 Source Maps 都可以正常工作.

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)

推荐答案

好的，在网上又搜索了 3 个小时并关注 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" (source) 部分到您的 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)" 配置以防止此配置打开新的浏览器选项卡，因为我们打开了一个新的 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 Code 窗口中调试 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 中调试 Typescript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！