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)

Take a look at this extension

ulubeyn
– ulubeyn

2017-04-26 09:30:16 +00:00
Commented Apr 26, 2017 at 9:30 — ulubeyn
– ulubeyn, Commented Apr 26, 2017 at 9:30

Evo · Accepted Answer · 2018-01-11 07:47:12Z

32

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.

edited Jan 11, 2018 at 7:47

Evo

1191 silver badge13 bronze badges

answered Apr 26, 2017 at 12:07

VSDekar

1,8212 gold badges22 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Vitalii Vasylenko Over a year ago

Is it working for you? I did the same, but the breakpoints stays disabled in VS Code.

Vitalii Vasylenko Over a year ago

3 things to keep in mind: 1. set the proper webroot (that fixed the issue for me) 2. Tasks are run simultaneously in compounds - so browser is opened when the backend build starts (we its needed to wait for the build and restart the browser). 3. This crap is yet quite buggy, restarting helps (sometimes).

bvj Over a year ago

This is awesome... debugging through VS2017 takes about 7 seconds for each step regardless of how many VS features are disabled. Using your VIsual Code config, stepping is immediate, and I'm hitting both the typescript/javascript code and the C# code in the Controllers.

Daniel Jackson Over a year ago

Yea I copied the launch file but breakpoints are still greyed out for me after a restart. Debugging in chrome works. Can I see the file structure setup? Idk what's exactly hooking debugging up to visual studio code. But I can't get it to work.

Daniel Jackson Over a year ago

So the only way I got this working was to start the first config, .Net Core Launch(web) and then manually start the Launch Chrome. I thought it was doing both for me since they are both in the launch.json. I'm still learning what exactly is happening here.

|

Stephen Pham · Accepted Answer · 2018-06-22 04:53:11Z

5

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

answered Jun 22, 2018 at 4:53

Stephen Pham

1,65723 silver badges26 bronze badges

3 Comments

JimiSweden Over a year ago

I used a similar config from github.com/DaniJG/AspCoreVue/blob/master/.vscode/launch.json (dotnetcurry.com/aspnet/1373/…) - what stumbled me a bit was that after removing the sourceMapPathOverrides ("/Views": "${workspaceRoot}/Views") I could still debug typescript =)

Stephen Pham Over a year ago

As explained here verbatim: To find out what your overrides should look like, start a JavaScript debug session and enter .scripts in the VS Code Debug Console. This will show you a list of the scripts that were loaded during the debug request and any files they map to, as well as where VS Code thinks they are located.

Marcos Meli Over a year ago

Thanks Stephen, the sourceMapsPathOverrides solved my problem !!

GEORGE TARANTILS · Accepted Answer · 2018-07-15 16:13:59Z

0

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.

answered Jul 15, 2018 at 16:13

GEORGE TARANTILS

682 silver badges7 bronze badges

Collectives™ on Stack Overflow

Debug Typescript in VSCode with ASP.Net Core

3 Answers 3

8 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related