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. 

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.

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

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



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



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. 

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

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



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



As you can see, when switching to the Developer tools in Google Chrome, the application stops debugging.

Disable Debugging

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



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



Get more on it here.

Hope this will help.