Simon Battersby

If you’ve already worked through any obvious problems then the next step in debugging a piece of jQuery (or javascript) code is slightly more complex. As in any debugging situation, what you need to do is isolate the problem. On this page I’ve put together an example to see how you might do that.

Let’s take a simple example: you have three input fields prompting the user to enter a description and two numbers, and you want to click a button and show the description and sum of the two numbers (or more typically save it to a database, but we’re keeping things simple). Like this (try entering ‘Sum’ and then two numbers in the three fields):

Text: + Save

To do this I’m using a version of this code:

$('.result').click(function(){
   var description = $('.description').val();
   var number1 = parseInt($('.number1').val());
   var number2 = parseInt($('.number2').val());
   var sum = number1 + number2;
   $('.debug_result').html(sum);
});

Obviously, there’s no validation going on here, but otherwise, this works fine…But if an error were introduced, this would happen:

Text: + Save

Yup, nothing. In this case, the first thing should be to check the console for any obvious errors (not loaded jQuery, syntax errors etc). If you launch the console in your browser and click the button again you’ll see precisely nothing appears when you click the button above.

Remind me how I launch the console again…

• Firefox: If you’re using Firebug click the icon to launch Firebug and access the Console tab.
• IE9: Access Developer tools via F12, and then click the Console menu item.
• Chrome: Developer tools are Ctrl+Shift+I, then Console tab.
• Safari: Develop > Show Error Console
• Opera: Ctrl+Shift+I to launch Dragonfly, then the Console tab

So where do we start? If you think about what needs to happen to get the result appearing correctly, six things need to happen:

1. The button ‘click’ event needs to call some code to perform the addition…
2. …then we need to read the value of the description field…
3. …and the value of the first number field…
4. …and the value of the second number field…
5. …add the two values together…
6. …and show the result.

Clearly one of these things is not right, but we don’t know which – we need to home in on the problem(s). Here’s where the console comes in. We can use the console to output the result of anything we want as we move through the actions listed above. The first thing here is to check whether the click on the button is being registered as we expected. We can check this by including an extra line in the code like this:

$('.result').click(function(){
   console.log('button clicked');
   var description = $('#description').val();
   var number1 = parseInt($('.number1').val());
   var number2 = parseInt($('.number22').val());
   var sum = number1 + number2;
   $('debug_result').html(sum);
});

So now try this version:

Text: + Save

You should see ‘button clicked’ in your console – and this tells us that the button is working as we want and calling our code to display the data. If no message appeared, that would tell us that there’s a problem with item 1 on our list, calling the click event (maybe the jQuery selector is wrong etc), and so we’ve isolated the problem and we know where to look. But the problem’s not there, so we need to add some more logging like this:

$('.result').click(function(){
   console.log('button clicked');
   var description = $('#description').val();
   console.log(description);//output the description to the console
   console.log('Description:'+description);//output the description again, we'll see why later
   var number1 = parseInt($('.number1').val());
   console.log('Number 1:'+number1);//output the first number to the console
   var number2 = parseInt($('.number2').val());
   console.log('Number 2:'number2);//output the second number to the console
   var sum = number1 + number2;
   console.log('Sum':sum);//output the sum to the console
   $('debug_result').html(sum);
});

Note that here I haven’t just output the value of the variable to the console (console.log(number1)) but an identifier as well, so we can be sure exactly what’s going on. So let’s give it another try:

Text: + Save

If you try this you should see this (or something like it) in your console:

First off, as before, we see that the button click has registered OK. It’s not immediately clear what the next line ‘undefined’ is telling us – which is why it’s often worth including a text label in your console output as I have in the next line ‘Description:undefined’. So this tells us there’s a problem at step 2, reading the description. Looking further down, we’re reading in the first number OK (step 3), but there’s an issue with our second number (step 4). And there may also be a problem with the sum of the two numbers (step 5), but we need to fix the number problem first. Here we’ve isolated two separate problems, caused here by an incorrect selector for the description (#description not .description) and a typo in the second number selector (.number22 not .number2).

Right, let’s fix these…and add our final bit of debugging code:

$('.result').click(function(){
   console.log('button clicked');
   var description = $('.description').val();
   console.log('Description:'+description);//output the description
   var number1 = parseInt($('.number1').val());
   console.log('Number 1:'+number1);//output the first number to the console
   var number2 = parseInt($('.number2').val());
   console.log('Number 2:'number2);//output the second number to the console
   var sum = number1 + number2;
   console.log('Sum':sum);//output the sum to the console
   $('debug_result').html(sum);
   console.log($('debug_result'));//output the target element to the console
});

Text: + Save

Now, let’s remember at this point that we’ve fixed two problems, but the whole thing’s still not working. Now your console should be showing something like this:

What that last console.log line is doing is sending the jQuery element (into which we’re trying to insert the result) to the console. If you’re not using IE or Safari, then you can click on that line and identify the element – like this (in Firebug):

The key thing here is the ‘length’ property. You’ll see it’s 0 – which is another way of saying that no element was found matching the selector. The sharp eyed will already have spotted that this is because the class selector was missed (debug_result not .debug_result. Safari shows an empty set of brackets – indicating nothing found. And IE doesn’t help, I’m afraid, there’s no indication one way or the other. So, finally, here we go again:

Text: + Save

If you view this in your console you’ll see that now the console (depending on which browser) shows a link to the (correctly) selected element and shows the length now as 1.

Internet Explorer

As we’ve seen, IE (version 9 and below at least) isn’t quite as helpful. But there’s another snag as well. If you still have console.log() commands in your code, then they will stop IE executing any subsequent code if Developer Tools have not been launched – and there’ll be no obvious reason why – so it’s best to remove all your debugging code before it goes live.

Conclusion

If you’re trying to do anything that isn’t very straightforward then the console can be invaluable in isolating the problem. I’ve employed it in building this page.