Debugging JavaScript Code Using VS and IE

Article

Introduction

We can easily debug C# code using breakpoints, but we need to make some extra effort when we want to debug JavaScript code. In this article, I explain 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 inserted in TextBox by the user on a button click and shows the resulting value in an alert box.

<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <title></title>  
    <script type ="text/javascript">  
        function SquareNumber()  
        {  
            var number = document.getElementById("<%=txtNumber.ClientID %>").value;  
            alert(number +" square is :"+ number*number);  
        }  
    </script>  
</head>  
<body>  
    <form id="form1" runat="server">  
    <div>  
    Enter a Number : <asp:TextBox ID="txtNumber" runat="server"></asp:TextBox>  
    <asp:Button ID="btnSquare" runat="server" Text="Square" OnClientClick="SquareNumber()" />  
    </div>  
    </form>  
</body>  
</html>

Step 2. Setting in IE to enable debug

Go to "Tools" - "Internet Option"
Go to the "Advanced" tab - "Browsing," then uncheck "Disable Script Debugging," then click "OK."

Step 3. Insert breakpoint

We insert the breakpoint where the pointer will hit directly.

Step 4. Run the applications (press the F5 Key)

When we run the application, the following web page is shown and inserts a value into the TextBox.

Click on the "Square" button:

Get the output:

Step 5. Insert debugger

When we insert the JavaScript debugger, the code will start from the debugger and 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.