Debugging jquery in asp.net

Sourabh_Mishra1
Posted by in ASP.NET category on for Beginner level | Points: 250 | Views : 6177 red flag
Rating: 3 out of 5  
 1 vote(s)

When an ASP.NET developer using jquery or javascript (clientside programming) in his code, so always a question arise, how I debug this code .

Introduction

When an ASP.NET developer using JQuery or JavaScript (client side programming) in his code, so always a question arise, how I debug this code . We can  done debugging  in code behind with breakpoints. But what for clientside scripting. Some people says use alert(); . But I don’t think this is a sufficient way to do this.

So good news is that we have a command in JQuery is debugger;

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

See below 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 user click any of the radio button, automatically debugging will start, with debugger command. In above program when user click on radio button we stored its value in _Getval variable.

$(document).ready(function () {

                $
(':radio').click(function () {
                   
debugger;
   
//Get the value of Radio button
                   
var _GetVal = $(this).attr('value');
               
});
             
});
You can see, when _GetVal variable is declared, before we use debugger;

Fig.1- When user click in radio


Fig. 2- When user press F10 , (same way we done in code behind using break point).


In above image you can see _GetVal value is 10 now. So with the use of debugger, debugging can be started in
ASP.NET.

And please remember, after completing debugging or publishing the page, please remove debugger from your code.


Page copy protected against web site content infringement by Copyscape

About the Author

Sourabh_Mishra1
Full Name: sourabh mishra
Member Level: Starter
Member Status: Member
Member Since: 2/11/2013 1:20:00 PM
Country: India
Sourabh Mishra
http://www.dotnetfunda.com
I am a .Net Developer my skills are asp.net,c#, sqlserver,wcf,jquery. My mail id is sourabh_mishra1@hotmail.com

Login to vote for this post.

Comments or Responses

Posted by: Learningtorise on: 10/10/2013 | Points: 25
Nice..!! I have added "Javascript Parser" extension in my VS Studio... It gives compilation error when i make any syntax mistake... Example: $(.MyClass).hide(); >> Gives Syntax Error!!
Posted by: Sourabh_Mishra1 on: 10/10/2013 | Points: 25
use like this $(".MyClass").hide(); ú will not get any error.

Login to post response

Comment using Facebook(Author doesn't get notification)