How do I debug typescript code in VS 2017?

Question

I have a ASP.NET Core project which uses TypeScript.

Is it possible to debug TypeScript code in Visual Studio?

Answer 1

In prior versions of Visual Studio, this was not possible.

In Visual Studio 2017 however, this has been fixed. Just set your breakpoint and run your project using IE (or Chrome) and your breakpoint will be hit in your ts file and you can step through the code in the VS environment (not in the browser code debug window). This is a huge step forward for Typescript development.

The interesting things is that the code will transition to js if it jumps to another file for which there is no matching ts file, and then transition back again to ts again when it can.

Answer 2

Make sure you enable browser link in order to see TS break points being hit. The option is the blue arrow circle to the right of the browser selection drop-down in VS2017 and it seems to default to disabled.

Answer 3

I was attempting to convert the dotnetcore ReactRedux template to Typescript and could not get breakpoints to hit my typescript files.

I was able to determine that in your tsconfig.json file you need to have the options inlineSourceMap:true and inlineSources:true set.

Answer 4

Debugging JavaScript and TypeScript is very easily possible with the Microsoft Edge DevTools Protocol which became available with the Windows 10 April 2018 Update (Version 1803) . You also need Visual Studio 2017 Version 15.7 or later.

Before I had a lot of problems getting JavaScript debugging to run but with these updates it just works out of the box:

• I just start debugging your ASP.NET project
• Set a breakpoint in your TypesScript (or JavaScript) files
• If JS debugging is not enabled, a message window will appear suggesting to enable it. This setting can also be found in the VS options (search for "debug" to find quickly): Tools > Options > Debugging > General > Enable JavaScript debugging for ASP.NET (Chrome, Edge and IE)
• No restart required. Breakpoints are hit immediately.

Note: When using Edge there will be a hint that the developer tools server has been started:

Answer 5

I found two conditions that will not break in Visual Studio 2017(ver15.9.5).

1) .UseContentRoot
In the WebHost.CreateDefaultBuilder method in Program.cs, if you change the content route using UseContentRoot(), VS will not Break.

2) wwwroot Folder
You can change webroot by UseWebRoot(), This works correctly.
But if you delete "wwwroot" folder in the project root, VS will not Break.