Post
Ask Question

Debugging JavaScript Code Using VS and IE

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"

    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, the following web page is shown and 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, 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.

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 following article, I explained how I could debug JavaScript using Google Chrome, that article is: Debugging JavaScript Using Google Chrome.


Similar Articles