 | Level: Introductory Sami Salkosuo (sami.salkosuo@fi.ibm.com), Software Architect, IBM
06 May 2008 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.
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:
- Go to
any Web page and press F12 to open Firebug in the browser window.
- 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
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
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.
- In the Firebug window, click Inspect.
- 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
- Click the selected HTML element, and things start to get interesting. This "locks" the inspection to
the selected element.
- 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
While inspecting elements, you will see the element nesting in the Firebug window,
as shown in Figure 5:
Figure 5. 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 tools also let you edit CSS properties live, disabling properties, autocompletion, and
image preview, as shown in Figure 7:
Figure 7. 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
Figure 9 shows the nifty Firebug feature of live editing of CSS boxes:
Figure 9. 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
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
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
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
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
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
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
About the author | 
| | Sami 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.
|
Rate this page
| |
