Ben Lisbakken, AJAX APIs team
April 2008
Firebug is a must have for every web developer. You can do things like debug JavaScript line by line, change CSS and HTML on the fly and easily view the contents of objects.
As a support engineer for the AJAX APIs, my role is to help developers who are trying to use our services. Part of that job includes helping them with their bug woes. So, day in and day out I help API users debug their code. All of this debugging can by tedious and frustrating. However, with Firebug, it is a pleasure.
The Firebug console allows you to print and view various program status information, inspect objects, time operations, review script errors, and run additional code on a page without reloading it. If you learn nothing else from this tutorial, learn to use the Firefox console. Why? Because it's painfully simple and delightfully powerful. Let's take a look at some of the functions.
console.log(object[, object, ...])
This will write the object to the console window. If you are printing objects (as opposed to strings) then they will become hyperlinks in the console, allowing you to inspect the object
console.debug(object[, object, ...])
The same as console.log, except when the line prints there will also be a hyperlink to this line of code in the script you are debugging.
console.log and console.debug are your best friends!
console.trace()
An extremely useful tool. This allows you to print the JavaScript stack trace. That means that if you call console.trace() within a function, Firebug will print out a list of functions, which are the chain of functions that were called in order to call the one we have written console.trace() in. Additionally, it will print the values of the arguments passed through the functions at the time the trace was called. An example would be if function a(someArg) called function b(someArg) which called function c(someArg) and someArg was equal to 12 at the time we call c(someArg), a console.trace() in function c(someArg) would print:
c(12) b(12) a(12)
console.profile
This allows you to time operations. If your web application is running slow, you can wrap console.profile() and console.profileEnd() around sections of code and Firebug will print out statistics about which functions took longest to complete.
You can find more out about the Console commands here.
Often, in debugging, it becomes necessary to see the contents of objects in order to determine where a problem exists. Whether it's because your calling a method that doesn't exist, you need to see the value of a property or just that you want to poke around to learn more about what's inside of an object, let Firebug's object inspector do the work for you.
In Firebug, the object inspector is located on the DOM tab. If you go right to the DOM tab, it will display everything that is in the window object. If you've never done it before, it's fun to look around the window and document objects. When in the DOM view, anything that has a hyperlink/dropdown menu has more inside of it -- that means it's either an object, array, prototype method etc. Click on them or expand them to learn more. If you expand it and it says 'prototype', then that means that what you just expanded is a function that you can call.
As a quick example, go ahead and open up Firebug right now and go to the DOM tab. Scroll through until you find the document object. Expand it. You'll see there's a dropdown called childNodes. On the right of it there are brackets like this []. This means that this is an array. Expand the dropdown. There should be another dropdown for the number 0. In that you can see there's a property called innerHTML. What we've just discovered, is that we can write this line of code: window.document.childNodes[0].innerHTML and it will be valid. The more you explore the DOM the more it will become natural to peek inside objects.
So how does this help with the AJAX APIs? It will give you a better understanding of the structure that we use to make the controls etc. Go ahead and navigate to the hello world of AJAX Search and open up the DOM tab in Firebug. You can see all of the objects/methods that the API loads into the DOM. For instance, you can see the GBlogSearch. If you expand it, then expand prototype, you can see all of the methods that an instance of GBlogSearch has. So, you can call those methods by doing something like this:
|
var blogSearch = new GBlogSearch();
blogSearch.onSearchComplete(function() {});onSearchComplete prototype in the DOM inspector. From poking around, I know I can access the same method like this:
var blogSearch = google.search.BlogSearch();
blogSearch.onSearchComplete(function() {});
google dropdown, then search, and saw that the BlogSearch class has the same methods as GBlogSearch. And, as mentioned in the documentation, these are the two ways to create a blog searcher. You should go look through the class reference and compare them to what you see in Firebug as an exercise.
That should give you a bit of an idea of how to navigate through the object inspector. So when would you want to use it? If you're getting an error in your application and you need to know the values in objects in order to debug better. Use console.log or console.debug to print out your object in the console then click on it to take you to the DOM view of it.
In the AJAX APIs, users want access to the results. The key is to set the onSearchComplete on a searcher so that the results are returned to a function of your choice. But it can be confusing exactly what is returned in the results object. In your callback function just do a console.log(resultObject);, click on the link in the console and view all of the contents in the object inspector view.
Ever had to tinker with CSS until you get the look and feel *just* right? It's quite tedious to change a CSS property in your code, save your file then refresh the browser. Do that 20 times in a row and I guarantee you'll be frustrated.
Use the HTML inspector to find the element you want to change the style on. Once you've selected the right element (remember, you can also select elements in the HTML view), look on the right hand side and you will see the 'calculated style'. The calculated style just means that after all style sheets and inline styles are read, what is the resulting styling. You might see that some lines are crossed out -- that means that these lines were overridden by other CSS rules. Now, if you want to edit the style, you can click on a CSS property and change it's value. You can also double click at the end of a definition and add new properties. The changes you make will immediately take effect on the page.
To edit the HTML structure of a page without refreshing it, use the HTML inspector to find the section you want to edit, then click the edit button and go to town on the code.
This is a powerful feature of Firebug. By using the console you can execute JavaScript on the page after it has loaded. It's great for quickly testing some code out, or testing objects/functions that are on the page. To use it all you need to do is enter code into the console bar just as you would with normal JavaScript.
Firebug does a good job of reporting JavaScript errors. If your JavaScript fails for some reason, Firebug will notify you with a little red number of how many errors it has found. When you open it up, it will explain what those errors are, give you a stack trace, and then provide you with a link to the line of code where the error occurred. It makes it very easy to spot errors and fix them.
If your code is crashing the browser, or you need to stop your script at an exact moment, or even if the error messages just aren't good enough for you, then you should try breakpoints. If you can't make sense of an error, sometimes it helps to stop the program before the error occurs and do some poking around with the console.