Debugging jQuery in Google Chrome

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 about 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 the debugger before your code, where you want to start debugging.

See the following code:

$(document).ready(function () {

$('#bttnValue').click(function () {

debugger;

var name = $('#txtName').attr('value');

});

</script>

</head>

<body>

<div>

</div>

</form>

</body>

</html>

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

$(document).ready(function ()
{

$('#bttnValue').click(function ()
{

debugger;

var name = $('#txtName').attr('value');

});

});

You can see that when I declare a name variable, before I use "debugger" because from here I want to start debugging . In Internet Explorer, when you click on the button, debugging will start automatically.

But in Google Chrome, debugging will not start directly, you need to use the following procedure.

Step 1: Run your page in Google Chrome.

Step 2: Press F12.

Step 3: Click on the Sources tab.

Step 4: In this example, I write debugger after the button click. So click on the button.

See the preceding image, the debugger starts working in Google Chrome. Now press F10 , your debugging works fine.

In the preceding image, you can see, you get TextBox value in the name variable.

And please remember, when you finish debugging or publish your page, please remove the debugger from your code.