Debug Typescript in VSCode with ASP.Net Core

Question

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.

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.

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.

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)

Answer 1

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

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

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"
}

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.

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"
    }
 ]
}

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.