Debugging jQuery in ASP.NET


When an ASP.NET developer uses jQuery or JavaScript (clientside programming) in his code, the question always arises of how to debug this code. We can debug in code behind with breakpoints. But what for clientside scripting. Some people say use "alert()", but I don't think this is a sufficient way to do it.

So the good news is that we have the "debugger" keyword to debug your line of code.

Use debugger before your code, where you want to start debugging.

See the following code:

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head runat="server">

        <title></title>

        <script src="Scripts/jquery-1.7.1.min.js"></script>

        <script>

            $(document).ready(function () {

                $(':radio').click(function () {

                    debugger;

    //Get the value of Radio button

                    var _GetVal = $(this).attr('value');

                });

             });

        </script>

    </head>

    <body>

        <form id="form1" runat="server">

        <div>

            First

            <input type="radio" name="rd1" value="10" />

            <input type="radio" name="rd1" value="11" />

            Second

            <input type="radio" name="rd1" value="12" />

            <input type="radio" name="rd1" value="13" />

        </div>

        </form>

    </body>

    </html>

This is a simple ASP.NET in page code. When the user clicks a radio button, debugging will automatically start, due to the debugger command. In the above program, when the user clicks on the radio button we stored its value in the _Getval variable.
 

$(document).ready(function () {

                $(':radio').click(function () {

                    debugger;

    //Get the value of Radio button

                    var _GetVal = $(this).attr('value');

                });

             });


You can see that when I declare a _GetVal variable, before I use "debugger" because from here I want to start debugging. See the following images.


Figure 1: When user clicks in the radio

Debugging1.jpg

Figure 2: When the user presses F10 (the same way as what we did in code behind using a breakpoint).

Debugging2.jpg

In the image above you can see that the _GetVal value is 10 now. So with the use of the debugger you can start your debugging in ASP.NET.

And please remember, when you finish debugging or publish your page, please remove debugger from your code.
If you have any query, Please send your valuable Comments. Happy Programming.


 

Up Next
    Ebook Download
    View all
    Learn
    View all