How to see line by line execution of jquery code

ajay kumar

10y1.7k

I have below code

$('.edit-mode').hide();

$('.edit-user, .cancel-user').on('click', function () {

var tr = $(this).parents('tr:first');

tr.find('.edit-mode, .display-mode').toggle();

});

$('.save-user').on('click', function () {

var tr = $(this).parents('tr:first');

var Name = tr.find("#Name").val();

var SurName = tr.find("#SurName").val();

var UserID = tr.find("#UserID").html();

tr.find("#lblName").text(Name);

tr.find("#lblSurName").text(SurName);

tr.find('.edit-mode, .display-mode').toggle();

var UserModel =

{

"ID": UserID,

"Name": Name,

"SurName": SurName

};

$.ajax({

url: '/User/ChangeUser/',

data: JSON.stringify(UserModel),

type: 'POST',

contentType: 'application/json; charset=utf-8',

success: function (data) {

alert(data);

}

});

how to see line by line execution according to userinterface(ui)

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Bikesh Srivastava10y ago
hi,
Follow @midhunTP's and Rajesh steps which are given below.
Bhushan Bhasme10y ago
Hi Ajay,
Best tool to debug javascript/jquery/angular js is to use Google Chrome.
because
1] you can do peformance testing,
2] you can get errors occured while debugging your js code.
3] you can debug your js code line wise and make changes accordingly if error occurs.
when you run your code in chrome browser press F12
1] you will get multiple options like source,console,Network,Timeline etc.
2] out of which click on source to apply debugger to your code and debug your js code.
3] In console window you can find what error is occured while executing the js code and at what line number.
Hope this will help you.
Rajeesh Menoth10y ago
Hi,

Two way you can debug your javascript code.

First one :

Put a debugger in your javascript code.

Example :

var x = 15 * 5;
debugger;
document.getElementbyId("demo").innerHTML = x;

Go to browser Inspect element in Console.

Reference :

http://www.w3schools.com/js/js_debugging.asp

Second One :

Go to browser Inspect element and select Source and choose your page then put break point directly in your code :
Midhun Tp10y ago
HI,
In chrome, press f12 for inspect element -> select sources from the top menu strip -> scroll to your jquery script block -> put debug points in your script -> reload your page and press f10 to see line by line execution.