Debugging JavaScript Code Using VS and IE

Introduction

 
We can easily debug C# code using breakpoints but when we want to debug JavaScript code then we need to make some extra effort. I explain in this article step-by-step how to debug JavaScript code defined in a .aspx page using Visual Studio and Internet Explorer so let's see that now. 
 
Step 1: Create a WebForm
 
We create a webform that has a JavaScript function called on a button click. Here we have SquareNumber(), a JavaScript function that squares a value that is then inserted in TextBox by the user on a button click and shows the resulting value in an alert box.
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head runat="server">  
  3.     <title></title>  
  4.     <script type ="text/javascript">  
  5.         function SquareNumber()  
  6.         {  
  7.             var number = document.getElementById("<%=txtNumber.ClientID %>").value;  
  8.             alert(number +" square is :"+ number*number);  
  9.         }  
  10.     </script>  
  11. </head>  
  12. <body>  
  13.     <form id="form1" runat="server">  
  14.     <div>  
  15.     Enter a Number : <asp:TextBox ID="txtNumber" runat="server"></asp:TextBox>  
  16.     <asp:Button ID="btnSquare" runat="server" Text="Square" OnClientClick="SquareNumber()" />  
  17.     </div>  
  18.     </form>  
  19. </body>  
  20. </html> 
Step 2: Setting in IE to enable debug
  • Go to "Tools" - "Internet Option"
     
    image1.png
     
  • Go to the "Advanced" tab - "Browsing" then uncheck "Disable Script Debugging" then click "OK".
     
    image2.png
     
Step 3: Insert breakpoint
 
We insert the breakpoint where the pointer will hit directly.
 
image3.png
 
Step 4: Run the applications (press the F5 Key)
 
When we run the application then the following web page is shown and then inserts a value into the TextBox.
 
image4.png
 
Click on the "Square" button:
 
image5.png
 
Get the output:
 
image6.png
 
Step 5: Insert debugger
 
When we insert the JavaScript debugger then the code will be started from the debugger and will proceed line by line; in this case, we don't need to insert a breakpoint. We only need to write a debugger in a JavaScript function where we start the debug code.
 
image7.png
 
Press the F10 key to move to the next line.
 
NOTE: Remove the JavaScript debugger before publishing or releasing a website or web application. 

Summary

 
In the next article I explained that how can debug JavaScript using Google Chrome, that article is: Debugging JavaScript Using Google Chrome