Debugging Your Javascript Code
As I said it’s generally good practice to place nice error messages into your code so that you know an error is happening. There are sometimes occasions though where a problem appears without an error, it just stops working. So what do you do?
Alert To The Rescue
One of the really old ways I was taught to check for those pesky kinds of problems was to use javascript’s alert() function. This will temporarily break the code while the alert is displayed and also echo out variable values or text in a box. The problem with using the alert() method is that in loops it can be tedious to hit enter to every alert, also it can’t (easily) output the values of arrays or objects. That’s highly annoying if you are working with JS libraries such as jQuery, Prototype or MooTools which use objects regularly.
Let’s look at how an alert might be used. In a simple, but pointless example, let’s say we have a loop & we need to know the value of a variable every loop.
|
1 2 3 4 5 |
var j = 0; for(var i = 0; i <= 10; i++) { j = i * i; alert(j); } |
That example would store the square of i in j overwriting it each time until it reaches 10. Alerting will tell us what the value of j is for each loop. Here’s what the result would be:
0
1
4
9
16
25
36
49
64
81
100
Remember though that each answer would be in it’s own alert box, and would require you to hit enter before the next one displays… Annoying, and extremely tedious.
While that example is, for all intents and purposes, completely useless it does illustrate the use of an alert() within a loop to provide information. As I said before though, the drawback is that you will have to hit enter for every loop.
What’s the alternative I hear you shouting? Well let’s get onto it.
Firebug Rocks!
If you are serious about developing for the internet you probably have Firefox on your computer. If you don’t you really should, it has quite an impressive market share now and is an excellent browser for development purposes as well as general surfing. Once you have Firefox, go get the Firebug extension. It is invaluable for a web developer. Especially for debugging Javascript, yay!
Let’s look at how to get our previous example and output debug information to Firebug.
|
1 2 3 4 5 |
var j = 0; for(var i = 0; i <= 10; i++) { j = i * i; console.log(j); //Notice the difference! } |
Yep, that’s it. All we have done is changed our alert() with Firebug’s console.log() function. This will cause all data to be logged to the console tab of your Firebug window. It can even give you the values inside an object or an array. Cool, huh?
Firebug’s Awesomeness Doesn’t End There!
Indeed. Firebug can also be used to break the javascript code when it reaches a certain line (breakpoints), and break only under certain conditions (conditional breakpoints). It’s then possible to run your code line by line so you can find just where that pesky problem is hiding.
Warning!
Please, please, please remember to comment out, conditionalize (try, catch etc) or remove your Firebug commands before putting your code into production. Why? Well console.log() is a function specifically for Firebug, it doesn’t exist if the browser doesn’t have it installed. Also you don’t want normal users seeing your debug information.
That’s it. Firefox & Firebug form pretty much, in my opinion, the ultimate in web development tools. I know I couldn’t live without them. Using the console.log() function is just another one of those cool features that can get you out of a pinch.
If you have any questions, comments, or something to add let us know in the comments. We always love to hear from you. If you are a Tweeter you can also follow me on Twitter, there is a link in the sidebar (the big blue birds).
