ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Computers & Software»
  • Computer Science & Programming

jQuery Debugging Techniques

Updated on March 31, 2017

jQuery is a very important scripting language used in web development. It is the key that adds rich functionality to the site and brings to life the attractive user interface. A question may pop up in your mind, which is, why use jQuery when there is CSS3, a lightweight language which can be used to code most of these compelling user interfaces without the developer needing to understand complex coding concepts and jargons? Yes, it is true, certain animation and transition effects can now be achieved using CSS3 but it has its limitation.

First of all, CSS3 is not 100% browser compatible, meaning that browsers which do not support all of the CSS3 properties fail to render the complete functionality which the developer is looking for and in the end, developers turn back to jQuery. However, this problem is quickly being addressed and is somewhat solved and in the near future the browser compatibility issue might be perfected.

The second reason is, while CSS3 is lightweight and faster than jQuery, developers are not able to use this to code advance and complex functionality

So, now that it is clear why jQuery should still be used, let's move forward and talk about the debugger, a tool or technique which we can use to understand our jQuery code that we have written, to identify and fix or reduce any bugs to make our code work the way we want it to.

There are plenty of debugging tools and techniques, which we can use and fortunately, most of them are easy to implement and understand.

Alert(); Function

The alert is one of the oldest, basic and still commonly used two-line code in debugging jQuery. By implementing an alert statement, developers are able to find out if a piece of code written, is functioning correctly or not.

If it works properly then an alert statement will popup in the browser, if not then that means that something is wrong.

The syntax is a two-line statement.

$(document).ready(function(){
   $(‘.click’).on(‘click’, function(){
      alert(“Hi! I am an alert box.”);
   };
});

Lets break this up.

The $(‘.click’) is the class name which we assigned to a div or any html tag.

On click the alert function is executed, showing the popup message inside the parentheses.

Built-in Debuggers

The built-in debugger is available in all the modern browsers. Built-in debuggers can be called by “Inspecting” the element. Whatever, browser you are using, right click and then select “Inspect” or “Inspect element”.

Taking Chrome browser as an example, right click and the select “Inspect”. A small screen, browser length window will popup, containing different tabs and information. We will just be focusing on the first three, Elements, Console and Sources.

The image below shows:

Step 1. which is right click and selecting Inspect
Step 2. the three tabs which we will be working with.

Elements will display all the HTML code on the left side and the CSS code on the right. Since, jQuery is applied to HTML and also plays a role in setting inline CSS code we might need to inspect the html and css and see what additional classes or css are being added to the markup.

The console tab shows any errors or warning in out code.

The sources tab is the one that is frequently being used to debug jQuery code. This window is the developers’ best friend as the entire code can be viewed and breakpoints can be set which helps make debugging easy.

Below is an example of how an error in the source tab will look like, if there is a problem with the code. On purposes, I have omitted the "a" from the alert and in the source tab code window, that line of code is underlined in red with a red cross in the end, pointing out that this line is not correctly coded.

Breakpoints

Think of breakpoints as the Red Light that tells the jQuery code to stop executing when it reaches a certain point in the code. With breakpoints, you can analyze step by step, how your jQuery code is running. You will be able jump into, over and out of every breakpoint in the code making it very easy to understand the logic and identify any coding issues along the way.

In the inspect element sources tab, you can view the code and click on the lines to enter the break points.

Now when you run the code, it will be executed step by step, by clicking on the arrow.

Code Editor Itself.

The code editor, which you will be using is a very helpful tool itself, in identify and pointing out bugs. It may not pin point the error but with this you might be able to get an idea that there is some problem with a particular line of code or an error in the line above it.

Conclusion

We just scratched the surface of jQuery debugging. There are plenty other tools and ways to do it but these basics debugging techniques is a push, which will help you get started.

So what is your favourite jQuery debugging technique?

See results

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.