Debugging Client-Side JavaScript Using Firebug's Console

CodeProjectFirefox is among the most useful of tools to web developers. Not only for viewing web pages you create on an alternative web browser, but also due to the plethora of add-ons available for it. Foremost among these add-ons is Firebug, a feature that presents a GUI for drilling through any web page and viewing the CSS, HTML and Script.


Firebug in use...

How to get Firebug

Get Firebug by following these simple steps;

1) In Firefox's menu go to Tools -> Add-ons
2) In the Add-ons dialog click "Get Add-ons" on the toolbar
3) Type "firebug" into the search box
4) Expand Firebug in the results list and click the "Add to Firefox..." button.

NOTE: If Firebug isn't listed when the results appear click on the "See all results" link at the bottom of the results list. This will take you to the full results listing where you will be able to add the add-on to Firefox.

Using Firebug

Once Firebug has been installed and Firefox has been restarted you'll notice the Firebug icon has appeared in the bottom right icon tray of Firefox. Click this icon to open Firebug. Click the "Inspect" button and move your mouse around the web page you're currently viewing. You'll notice that a blue rectangle appears to represent each HTML element, such as div, span, table etc in the underlying HTML. Click to display the details of the underlying HTML within the Firebug UI.

The Console

This is a really useful aspect of Firebug that provides an output for you to write to in your client script, and can be used extensively for debugging your client script.

You will need to enable the console for sites you wish to use it on:

Once you've done this, Firebug will expose an object in Firefox simply called "console", which you will then be able to call in your script. You can read the Console documentation at [link=http://getfirebug.com/console.html]http://getfirebug.com/console.html[/link] Pay special attention to the [b]String Substitution Patterns[/b] which allow you to output different data types, most notably objects, to the console.

A brief code example should help to explain:

<script language="javascript" type="text/javascript">

function debug(obj) {
if (console)
console.log("%o", obj);
}

</script>


This function allows your JavaScript code to write an object to the console. The "%o" substitution pattern means that Firebug will interpret the passed parameter as an object, and will represent it in the console as a browsable tree, much the same way that the local window does in Visual Studio.



Apart from the above there are [italic]many[/italic] other useful methods available on the console object, described in the API documentation (http://getfirebug.com/console.html) that will make your JavaScript debugging much, much easier.

The Script Debugger

The Script debugger also needs to be enabled on a site by site basis. Once enabled the underlying HTML will be displayed in the Script window. As you scroll through the source you will notice that any embedded script appears with green line numbers. You can click any green line numbers to place a stop in the code, again very much the way you may be used to in IDE's such as Visual Studio.