Debug and tune applications on the fly with Firebug
Save time when you monitor, analyze, and edit live Web pages
This article helps familiarize you with Firebug features that provide:
- Debugging and profiling reports
- Logging to measure execution time
- A Network Monitor to analyze load time for your Web pages
- Error reporting
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
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
Debugging and profiling
Useful debugging tools include:
- Call stack in visible format
- Conditional breakpoints
- Ability to start debugging after an error
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:
The report shows how much time was spent in the functions, average times, and so on.
If you prefer good old logging instead of debugging, Firebug also provides
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
measure execution time.
console.profileEnd(), which display results in a detailed
report as shown in Listing 1, can also be used for measuring execution
Figure 13. Console logging
Other useful features in the Console API are stack traces, object inspection, and string formatting.
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.
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.
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
Additional Firebug features include:
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.
Firebug customization features include blacklists and whitelists, and the ability to change font sizes for personal needs.
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.