Debug Typescript in VSCode with ASP.Net Core

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.

Using the launch.json given by VSDekar, I was able to debug C# code, but not TypeScript. I also needed to set the sourceMapPathOverrides property in order to debug TypeScript. Here's my launch.json:

{  "version": "0.2.0",  "compounds": [    {      "name": "Full stack",      "configurations": [".NET Core Launch (console)", "Launch Chrome"]    }  ],  "configurations": [    {      "name": ".NET Core Launch (console)",      "type": "coreclr",      "request": "launch",      "preLaunchTask": "build",      "program": "${workspaceFolder}/bin/Debug/netcoreapp2.1/ExpenseMgmt.dll",      "args": [],      "cwd": "${workspaceFolder}",      "stopAtEntry": false,      "console": "internalConsole"    },    {      "type": "chrome",      "request": "launch",      "name": "Launch Chrome",      "url": "http://localhost:5000",      "webRoot": "${workspaceFolder}/wwwroot",      "breakOnLoad": true,      "sourceMaps": true,      "sourceMapPathOverrides": {        "webpack:\\*": "${workspaceFolder}/*"      }    }  ]}

Just use Microsoft's Multi-Target Debugging capabilities in VS Code. https://code.visualstudio.com/docs/editor/debugging#_multitarget-debugging

It works for me debugging ASP.NET Core 2.1 + React SPA template.

I first start the ".NET Core Launch (web)" config and then the "Launch Chrome" config.I can hit breakpoints in both C# code and JS code.

One difference from the stock .Net debug config is that I have changed the option in

"launchBrowser": {        "enabled":

from true to false, because Chrome config opens its own browser window.

I know the question was for Typescript but I suspect this is the same procedure.