Debugging With Chrome In Visual Studio 2017

In this post, we are going to explore how to debug client-side script in Visual Studio 2017 using Chrome, and how to disable it.

Debugging client-side script using IDE is the most exciting feature of Visual Studio 2017. Rrecently, I have updated my IDE and after creating a new ASP.NET Core application, I noticed a splash screen before starting the application. Visual Studio 2017

Soon, I realized about this new exciting feature and decided to explain it to others.  This screen is nothing but the information about debugging script in Visual Studio.

Set breakpoint in JavaScript/TypeScript in Visual Studio

Here we go. Let’s write someJS code in Site.js file.

  1. // Write your Javascript code.  
  2. function sum() {  
  3.     var value = (1 + 2);  
  4.     console.log(value);  
  5. };   

Set breakpoint like in the below screen, using IDE in JS file.

Visual Studio 2017

It hit the breakpoint while reloading the page. In Internet Explorer, this will hit on initial page loading. Use (F10/F11) to continue debugging.

Visual Studio 2017

Automatically break on the script errors

Let’s create an error. Update the previous function in JS file. The below code snippet will cause a range error at runtime. 

  1. function sum() {  
  2.     var value = (1 + 2);  
  3.     console.log(value);  
  4.     var num = 1;  
  5.     num.toPrecision(500);  
  6. };   

Press F5 using IE, like in the below screen. It’ll automatically hit the break point when the script error occurs.

Visual Studio 2017

Opening "Developer tools" in Chrome stops the script debugging session.

Visual Studio 2017

As you can see, when switching to the Developer tools in Google Chrome, the application stops debugging.
Visual Studio 2017
Disable Debugging

Go to Tools -> Options -> Debugging -> General

Visual Studio 2017

Uncheck/Clear the setting "Enable JavaScript Debugging for ASP.NET (Chrome and IE)".

Visual Studio 2017

Get more on it here.

Hope this will help.