How to use Firebug

Document Sample
How to use Firebug Powered By Docstoc
					Debug and tune applications on the fly with Firebug
Save time when you monitor, analyze, and edit live Web pages
Skill Level: Introductory Sami Salkosuo (sami.salkosuo@fi.ibm.com) Software IT 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
Debug and tune applications on the fly with Firebug © Copyright IBM Corporation 1994, 2007. All rights reserved.

Page 1 of 21

developerWorks®

ibm.com/developerWorks

• 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. 2. 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

Debug and tune applications on the fly with Firebug Page 2 of 21

© Copyright IBM Corporation 1994, 2007. All rights reserved.

ibm.com/developerWorks

developerWorks®

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

Debug and tune applications on the fly with Firebug © Copyright IBM Corporation 1994, 2007. All rights reserved.

Page 3 of 21

developerWorks®

ibm.com/developerWorks

The rest of this article discusses Firebug features.

HTML and CSS tools
Debug and tune applications on the fly with Firebug Page 4 of 21

© Copyright IBM Corporation 1994, 2007. All rights reserved.

ibm.com/developerWorks

developerWorks®

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. 2. 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

Debug and tune applications on the fly with Firebug © Copyright IBM Corporation 1994, 2007. All rights reserved.

Page 5 of 21

developerWorks®

ibm.com/developerWorks

3. 4.

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.

Debug and tune applications on the fly with Firebug Page 6 of 21

© Copyright IBM Corporation 1994, 2007. All rights reserved.

ibm.com/developerWorks

developerWorks®

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

Debug and tune applications on the fly with Firebug © Copyright IBM Corporation 1994, 2007. All rights reserved.

Page 7 of 21

developerWorks®

ibm.com/developerWorks

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:

Debug and tune applications on the fly with Firebug Page 8 of 21

© Copyright IBM Corporation 1994, 2007. All rights reserved.

ibm.com/developerWorks

developerWorks®

Figure 8. CSS box measurements

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

Debug and tune applications on the fly with Firebug © Copyright IBM Corporation 1994, 2007. All rights reserved.

Page 9 of 21

developerWorks®

ibm.com/developerWorks

JavaScript tools
Nowadays, JavaScript tools are some of the most useful tools in Web development.

Debug and tune applications on the fly with Firebug Page 10 of 21

© Copyright IBM Corporation 1994, 2007. All rights reserved.

ibm.com/developerWorks

developerWorks®

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

Debug and tune applications on the fly with Firebug © Copyright IBM Corporation 1994, 2007. All rights reserved.

Page 11 of 21

developerWorks®

ibm.com/developerWorks

Useful debugging tools include:

Debug and tune applications on the fly with Firebug Page 12 of 21

© Copyright IBM Corporation 1994, 2007. All rights reserved.

ibm.com/developerWorks

developerWorks®

• 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

Debug and tune applications on the fly with Firebug © Copyright IBM Corporation 1994, 2007. All rights reserved.

Page 13 of 21

developerWorks®

ibm.com/developerWorks

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

Debug and tune applications on the fly with Firebug Page 14 of 21

© Copyright IBM Corporation 1994, 2007. All rights reserved.

ibm.com/developerWorks

developerWorks®

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

Debug and tune applications on the fly with Firebug © Copyright IBM Corporation 1994, 2007. All rights reserved.

Page 15 of 21

developerWorks®

ibm.com/developerWorks

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

Debug and tune applications on the fly with Firebug Page 16 of 21

© Copyright IBM Corporation 1994, 2007. All rights reserved.

ibm.com/developerWorks

developerWorks®

Like the Console, the command line also has an API that includes special functions

Debug and tune applications on the fly with Firebug © Copyright IBM Corporation 1994, 2007. All rights reserved.

Page 17 of 21

developerWorks®

ibm.com/developerWorks

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

Debug and tune applications on the fly with Firebug Page 18 of 21

© Copyright IBM Corporation 1994, 2007. All rights reserved.

ibm.com/developerWorks

developerWorks®

Debug and tune applications on the fly with Firebug © Copyright IBM Corporation 1994, 2007. All rights reserved.

Page 19 of 21

developerWorks®

ibm.com/developerWorks

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.

Debug and tune applications on the fly with Firebug Page 20 of 21

© Copyright IBM Corporation 1994, 2007. All rights reserved.

ibm.com/developerWorks

developerWorks®

Resources
Learn • Read about Firebug Lite for Internet Explorer, Opera, and Safari. • Browse the technology bookstore for books on these and other technical topics. 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 • Check out developerWorks blogs and get involved in the developerWorks community.

About the author
Sami Salkosuo Sami Salkosuo has worked at IBM since 1999. He currently is a software IT architect in the IBM Software Group. Sami is an IBM Certified SOA Solution Designer, IBM Certified Solution Designer for WebSphere MQ, IBM Certified Solution Developer for WebSphere Message Broker, and a Sun Certified Java Programmer.

Trademarks
Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both. WebSphere is a trademark of IBM Corporation in the United States, other countries, or both.

Debug and tune applications on the fly with Firebug © Copyright IBM Corporation 1994, 2007. All rights reserved.

Page 21 of 21


				
DOCUMENT INFO
Shared By:
Stats:
views:13424
posted:5/30/2009
language:English
pages:21
Description: This article shows you how to use Firebug in Firefox to debug Javascript, expect HTML elements, ... It's a short course, and good for beginners.