Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Tagged as

Debugging Client-Side JavaScript Using Firebug's Console

, 3 Aug 2009 CPOL
Rate this:
Please Sign up or sign in to vote.
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 an
Firefox 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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Simon Pickersgill
Web Developer The Test Factory
United Kingdom United Kingdom
Experienced web and software developer who has worked for some of the best and most respected software companies in the North of England as well as spending several years self employed.
 
Extensive knowledge of desktop and web programming languages, particularly C#, VB.NET, JavaScript, XML, CSS, Web Services, ASP.NET.

Comments and Discussions

 
GeneralMy vote of 1 Pinmemberbriangos10-Aug-09 12:53 
Questionfirebug or bug ? PinmemberFatih Piristine10-Aug-09 10:43 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.141223.1 | Last Updated 3 Aug 2009
Article Copyright 2009 by Simon Pickersgill
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid