Debugging JavaScript And TypeScript Using Google Chrome in Visual Studio 2017

Banketeshvar Narayan
Feb 27, 2017
24.5k
0
7
Article

Most of us already know that we can put breakpoint inside Visual Studio and debug it with Internet Explorer for JavaScript codes, but browser preferences may differ due to various reasons and sometimes, we need to open the application in Google Chrome. So, Visual Studio 2017 provides support for debugging JavaScript code using Google Chrome as well.

Right now, Visual Studio 2017 & C# 7 are the latest topics to learn and this is my sixth article on Visual Studio 2017 and C#7. The following are the links of my previous articles which I will recommend you to go through.

Debugging JavaScript Code with Internet Explorer

If you are not aware of how to enable script debugging in IE, following is a screenshot for your reference.

Some latest Visual Studio versions enable it automatically when you try to debug it with Internet Explorer.

Debugging JavaScript Code with Google Chrome using Visual Studio 2017

Before Visual Studio 2017, we could not debug JavaScript Code with Google Chrome using Visual Studio editors. But Visual Studio 2017 provides this feature by default. Let’s see a small demo of how it works.

Open Visual Studio 2017.
Create a new empty web project with Visual Studio 2017.
Add an HTML page with the name index.html.
Write some JavaScript code inside index.html file to debug. Following is a complete HTML code which I am going to use with this demo application.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8" />
5. <meta name="viewport" content="width=device-width, initial-scale=1">
6. <title>Demo for Debugging Visual Studio with Google chrome for JavaScript</title>
7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
8. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
9. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
10. </head>
11. <body>
12. <script type="text/javascript">
13. function Calculate() {
14. var x = parseInt(MyCalculator.firstNumber.value);
15. var y = parseInt(MyCalculator.secondNumber.value);
16. if (x === undefined || isNaN(x)) x = 0;
17. if (y === undefined || isNaN(y)) y = 0;
18. var result = x + y;
19. MyCalculator.txtResult.value = result;
20. }
21. </script>
22. <form class="form-horizontal" name="MyCalculator">
23. <h2 class="col-sm-offset-2">Add Two Numbers</h2>
24. <div class="form-group">
25. <label class="control-label col-sm-2" for="firstNumber">First Number :</label>
26. <div class="col-sm-4">
27. <input type="number" class="form-control" name="firstNumber" id="firstNumber" min="0" onchange="Calculate()" placeholder="Enter First Name">
28. </div>
29. </div>
30. <div class="form-group">
31. <label class="control-label col-sm-2" for="secondNumber">Second Number :</label>
32. <div class="col-sm-4">
33. <input type="number" class="form-control" name="secondNumber" id="secondNumber" min="0" onchange="Calculate()" placeholder="Enter Second Name">
34. </div>
35. </div>
36. <div class="form-group">
37. <label class="control-label col-sm-2" for="txtResult">Sum :</label>
38. <div class="col-sm-4">
39. <input type="number" class="form-control" name="txtResult" id="txtResult" placeholder="Result" disabled>
40. </div>
41. </div>
42. <div class="form-group">
43. <div class="col-sm-offset-2 col-sm-4">
44. <button type="button" class="btn btn-default" onclick="Calculate()">Calculate</button>
45. </div>
46. </div>
47. </form>
48. </body>
49. </html>

Select browser as Google Chrome & put debugger inside JavaScript. Refer to the following screenshot for reference.

Run the application. Before showing the actual screen, you will notice that Google Chrome will display a screen similar to the following screenshot.

After a while, you will get to see your actual screen. Enter some values for calculation and click on the "Calculate" button to calculate the sum of first and second number.

If you look into complete HTML code, you will notice that I have called the Calculate () method also on textbox onchange event, so debugger will go to actual JavaScript code once onchange event is fired or by clicking on "Submit" button.

In the following screenshot, you can see that debugger has called the actual JavaScript code. I have pinned some values which are evaluated during debugging and you can also notice that when I click on dropdown of continue button, it shows that currently application is running in Google Chrome.

So, in Visual Studio 2017, we can debug JavaScript & TypeScript code and it will break automatically on errors. But please keep one point in mind that if you open the Developer Tool in Chrome, it will stop the script debugging session.

The Chrome debugging is enabled inside Visual Studio 2017 by default, but if not, then you can press Ctrl+Q and search for “Enable JavaScript debugging” and check the checkbox to enable it.