Debug Angular 2 using Visual Studio 2017

Visual Studio 2017  now supports client-side debugging of both JavaScript and TypeScript in Google Chrome.

 

In Visual Studio 2017 RC that changes. You can now debug both JavaScript and TypeScript directly in Visual Studio when using Google Chrome as your browser of choice. All you should do is to select Chrome as your browser in Visual Studio and hit F5 to debug.

 

The first thing you’ll notice when launching Chrome by hitting F5 in Visual Studio is a page that says, “Please wait while we attach…”.

 

What happens is that Visual Studio is attaching to Chrome using the remote debugging protocol and then redirects to the ASP.NET project URL (something like http://localhost:12345) after it attaches. After the attach is complete, the “Please wait while we attach…” message remains visible while the ASP.NET site starts up where normally you’d see a blank browser during this time.

Once the debugger is attached, script debugging is now enabled for all JavaScript files in the project as well as all TypeScript files if there is source map information available. Here’s a screen shot of a breakpoint being hit in a TypeScript file.

 

For TypeScript debugging you need to instruct the compiler to produce a .map file. You can do that by placing a tsconfig.json file in the root of your project and specify the a few properties, like so:

{
  "compileOnSave": true,
  "compilerOptions": {
    "sourceMap": true
  }
}

If you prefer to use Chrome’s or IE’s own dev tools to do client-side debugging, the recent update to Visual Studio 2017  introduced a setting to disable the IE and Chrome script debugger (this will also prevent Chrome/IE from closing after a debugging session ends).

Go to Tools -> Options -> Debugging -> General and turn off the setting Enable JavaScript Debugging for ASP.NET (Chrome and IE).

Add Comment