Debugging with chrome in Visual Studio 2017

0
98

Introduction

Debugging client side script using IDE is a most exciting feature in Visual Studio 2017, recently I have updated my IDE and after creating a new ASP.Net Core application I have noticed below splash screen before starting the application, soon later I realize about the new exciting feature and then I decided to explain it to others.

This screen is nothing but the information about debugging script using Visual Studio.

Let’s break those points:

1. Set breakpoint in JavaScript/TypeScript in Visual Studio

Here we go, let’s write some js code in Site.js file


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

Set breakpoint like below screen using IDE in Js file.

It hit the breakpoint while reload the page, in IE this will hit on initial page loading. Use (F10/F11) to continue debug.

2. Automatically break on script errors

Let’s create an error, update the previous function in js file, our 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);
};

Hit F5 using IE, like below screen it’ll automatically hit the break point while script error occur. 

3. Opening developer tools in Chrome stops the script debugging session

As you can see while I was switching to Developer tools in Google Chrome at debug session the application stops debugging.

Disable Debugging

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

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

Get more on it: https://blogs.msdn.microsoft.com/webdev/2016/11/21/client-side-debugging-of-asp-net-projects-in-google-chrome

Hope this will help 🙂

LEAVE A REPLY