Debugging jQuery Code for dummies

At least some of us might have learnt jQuery the hard way.

As it has been said for a long time, the best way to understand jquery or any other code is to read through code written by other people. jQuery is unique because it uses html and css flags to make things happen.

Debugging jQuery code is sometimes not easy, even with some experience. This is because, parts of html and JavaScript code are linked together by a id or a class.

Steps to debug jQuery

I will try and explain the steps by way of a html and jQuery code example below.

Find the trigger word

You see, buttons or links are created with id or class and the id and class names are then used to trigger activity.

In one part of the code, there will be something like

There are events that trigger an action. The event may be on an input field, a list box a submit button or something else; and the event may be a change in the field, a click on a field, a mouse over action, a mouse out action and other such events.

Locate the trigger word in the JavaScript/jQuery code

Elsewhere in the code, there will be something like 
$('body').on('click','.saverecord',function(){ some code here }
$('body').on('click','.editrecord',function(){ some code here }

If you analyze the above code, you will see that the trigger is a click on the class called save, which executes an anonymous function that is embedded within braces.

So, a search for the keyword "saverecord" in the code will help you locate the flow of the program.

If you do not know how a jQuery code is organized, here is a short primer which tells you the framework of a jQuery code.