Debug and tune applications on the fly with Firebug

Save time when you monitor, analyze, and edit live Web pages

Why are your Web pages taking so long to load? Did you ever want to inspect or edit HTML while browsing? Tweak CSS instantly? In this article, learn to use Firebug, a free, open source extension for the Firefox browser that provides many useful developer features and tools. Using Firebug, you can monitor, edit, and debug live pages, including HTML, CSS, JavaScript code, and network traffic. Read on to learn how to speed up the tasks of debugging and tuning your Web and Ajax applications with Firebug.

Share:

Sami Salkosuo (sami.salkosuo@fi.ibm.com), Software Architect, IBM

author photoSami Salkosuo has worked at IBM since 1999. He is a Sun Certified Java Programmer, an IBM Certified Solution Developer for WebSphere Message Broker, and an IBM Certified Solution Designer for WebSphere MQ.


developerWorks Contributing author
        level

06 May 2008

Also available in Chinese Japanese

Introduction

Firebug, an open source extension for the Mozilla Firefox browser, provides tools for you to monitor, edit, and debug any Web site's cascading styles sheets (CSS), HTML, document object model (DOM), and JavaScript. It includes a JavaScript console, logging API, and a useful Network Monitor. With Firebug you can easily debug and tune Web and Ajax applications.

There is also a Firebug Lite version for Internet Explorer, Opera, and Safari.

This article helps familiarize you with Firebug features that provide:

  • Editing of HTML, CSS, and JavaScript on live Web pages
  • Debugging and profiling reports
  • Logging to measure execution time
  • A Network Monitor to analyze load time for your Web pages
  • Error reporting

Getting started

Using Firefox, download Firebug. Install the extension by clicking the orange Install Firebug button on the right side of the page.

After Firefox installs the extension, restart the browser. To use Firebug:

  1. Go to any Web page and press F12 to open Firebug in the browser window.
  2. Press CTRL-F12 to open Firebug in another window (a nice feature if you have two monitors).

    This article uses the first option to open Firebug in the same browser window, as shown in Figure 1:

Figure 1. Firebug after installation
Firebug after installation

After the installation, Firebug is disabled. Click Enable Firebug to see it in action, as shown in Figure 2:

Figure 2. Firebug showing developerWorks' front page
Firebug showing developerWorks front page

The rest of this article discusses Firebug features.


HTML and CSS tools

HTML and CSS tools include: HTML inspection and editing, CSS editing, and CSS visualization.

Inspecting and editing HTML

You can use the HTML inspection feature to locate visible HTML in the source code.

  1. In the Firebug window, click Inspect.
  2. Move your cursor above any HTML component. You should see that HTML element, surrounded by a blue rectangle, and the HTML source in the Firebug window. Figure 3 shows an example:
    Figure 3. Firebug inspecting HTML
    Firebug and HTML inspection
  3. Click the selected HTML element, and things start to get interesting. This "locks" the inspection to the selected element.
  4. You can go to the Firebug window and click Edit to edit the selected element.

    Figure 4 shows the Firebug editing window and the edited text in the browser window. "Editing with Firebug" has replaced the original heading about Ajax.

    Figure 4. Editing HTML
    Editing HTML

While inspecting elements, you will see the element nesting in the Firebug window, as shown in Figure 5:

Figure 5. Element nesting
Element nesting

Editing CSS

You can also start CSS editing by inspecting the Web page. The Inspection view shows related CSS entries, including inherited styles. Figure 6 shows an example:

Figure 6. CSS inspection
CSS inspection

CSS tools also let you edit CSS properties live, disabling properties, autocompletion, and image preview, as shown in Figure 7:

Figure 7. CSS image preview
CSS image preview

Visualization of CSS

Visualization of CSS is shown while inspecting HTML (remember the blue borders in Figure 3). The Firebug Layout tab displays more information, such as padding, offset, and other relevant measurements. The layout window in Figure 8 shows the measurements of a navigation element:

Figure 8. CSS box measurements
CSS box measurements

Figure 9 shows the nifty Firebug feature of live editing of CSS boxes:

Figure 9. CSS box editing
CSS box editing

JavaScript tools

Nowadays, JavaScript tools are some of the most useful tools in Web development. Firebug offers debugging, profiling, logging, and a command line console.

Debugging and profiling

The Firebug JavaScript tools include breakpoints, watch expression, and other tools found in typical debuggers. Figure 10 shows breakpoints and stepping in action. Notice the value of the hostname variable as a tooltip.

Figure 10. JavaScript debugger
JavaScript debugger

Click to see larger image

Figure 10. JavaScript debugger

JavaScript debugger

Useful debugging tools include:

  • Navigation directly to a certain line in JavaScript
  • Watch expressions (which can be any JavaScript expressions)
  • Call stack in visible format
  • Conditional breakpoints
  • Ability to start debugging after an error

JavaScript profiling is very helpful. Like everything else in Firebug, profiling is easy to use. From the Console tab, just click Profile to start the profiler, as shown in Figure 11:

Figure 11. Starting JavaScript profiler
JavaScript profiler

After the profiling has been started, you can browse the site a bit. Click Profile to get a report of your short profiling session, as shown in Figure 12:

Figure 12. JavaScript profiler report
JavaScript profiler report

Click to see larger image

Figure 12. JavaScript profiler report

JavaScript profiler report

The report shows how much time was spent in the functions, average times, and so on.

Logging in JavaScript

If you prefer good old logging instead of debugging, Firebug also provides logging. Logging uses a Firebug JavaScript API. The simplest log entry is console.log("logging");.

The Console API includes other functions, as shown in Listing 1:

Listing 1. Firebug console API samples
console.time("test timer");
console.log("Hello from ",document.title);
console.info("This is info");
console.warn("This is warning");
console.error("This is error");
console.timeEnd("test timer");

You can use console.time and console.timeEnd to measure execution time. console.profile() and console.profileEnd(), which display results in a detailed report as shown in Listing 1, can also be used for measuring execution time.

Figure 13 shows the results. The JavaScript console logging test functions were added to a page served by a Web server.

Figure 13. Console logging
Console logging

Other useful features in the Console API are stack traces, object inspection, and string formatting.

JavaScript command line

One of the most powerful features of Firebug is the command line for JavaScript. You use the command line just like any other command line; it executes all the JavaScript you write as if it were part of the page. With the command line you can examine DOM, get properties, and more. Any return values are displayed on the console.

The command line features autocompletion (using the Tab key), a full text editor for writing full functions instead of one liners, and so on. Figure 14 shows a simple console session. Notice the logo in the top left corner of the Web page. Live editing is possible here too.

Figure 14. Command Line JavaScript
Command Line JavaScript

Click to see larger image

Figure 14. Command Line JavaScript

Command Line JavaScript

Like the Console, the command line also has an API that includes special functions for use with Firebug, such as $(id) that returns element with a given id.


Network monitoring

The Firebug Network Monitor feature lets you monitor how much time is spent when loading a Web page. Use the Net tab to see the bar that shows when a file started and stopped loading relative to all the other files. Network Monitor breaks up the traffic on a file-by-file basis so you can see how much time was spent loading images, JavaScript, HTML, and so forth. You can also see whether resources were loaded from the browser cache.

For your Ajax development, Firebug shows each XMLHttpRequest, both in the Net tab and the Console tab.

Figure 15 shows how you can use Network Monitor to examine HTTP request and response headers. To see the HTTP headers, just click the arrow to the left of each request to expand it. Total requests, elapsed time, and size of content are shown at the bottom of the Firebug window.

Figure 15. Network Monitor
Network Monitor

Click to see larger image

Figure 15. Network Monitor

Network Monitor

Other features

The developerWorks Ajax resource center
Check out the Ajax Resource Center, your one-stop shop for information on the Ajax programming model, including articles and tutorials, discussion forums, blogs, wikis, events, and news. If it's happening, it's covered here.

Additional Firebug features include:

Error reporting

If errors occur, Firebug provides useful:

  • Status bar indicators
  • Line number, file, and stack trace
  • Debugger integration
  • Search and filters

Firebug also shows errors related only to the page you are viewing.

DOM

The Document Object Model is a hierarchy of objects and functions in the Web page. The Firebug DOM includes all custom and standard objects, and the DOM explorer can distinguish between them. You can also do JavaScript code navigation, autocompletion, and live editing.

Customization

Firebug customization features include blacklists and whitelists, and the ability to change font sizes for personal needs.


Summary

Firebug is a must-have tool for anyone who does any kind of Web development. Testing and debugging sessions will become easier. Firebug is also a great tool for tuning CSS styles and the look and feel of a Web page.

Resources

Learn

Get products and technologies

  • Download Firefox, the award-winning Web browser from Mozilla.
  • Download Firebug for Firefox for a wealth of Web development tools.

Discuss

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Web development on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Web development
ArticleID=306641
ArticleTitle=Debug and tune applications on the fly with Firebug
publish-date=05062008