This post originated from an RSS feed registered with Web Buzz
by Douglas Clifton.
Original Post: Firefox Power Tools For Web Developers: FireBug
Feed Title: blogZero
Feed URL: http://loadaveragezero.com/app/s9y/index.php?/feeds/index.rss1
Feed Description: Web Development News, Culture and Opinion
Joe Hewitt may be a lesser known member of the original three Firefox cast, but among DOM and JavaScript developers, his work is legendary. In a later Power Tools installment, I will cover in more detail the DOM Inspector, for which he is perhaps better known. At least until recently. This article focuses on FireBug, which Joe has been working on continuously of late (among other endeavors) and what he ultimately considers to be a DOM Inspector replacement.
The latest version of FireBug was released September 12th, 2008.
What in the hell is a FireBug?
I won't get into entomology—which ironically in Greek means "that which is cut in pieces"—although there really is such a thing as a firebug. The extension, on the other hand, is designed to make the Web developer's job a whole lot more productive. With it you can inspect and debug your markup, stylesheets, JavaScript, and even keep an eye on asynchronous XHR object calls back to your server.
Unlike the DOM Inspector, FireBug normally runs in a horizontal console (although you can open it in a separate browser window) underneath the document's rendered view. A statusbar icon indicates if there are any errors on the current page, which can indicate any number of conditions including errors, warnings and results from:
And even problems encountered from remote domains—which can be the source of massive numbers of errors (I'll leave it to Joe to name names). Thankfully, you can suppress these messages or disable FireBug entirely for certain domains as necessary through the options menu.
Almost every object in the FireBug interface is actually a hyperlink. Elements in the source view can be expanded or collapsed and your current XPath is displayed as you explore the document structure. Like the browser itself, views
are toggled through a tabbed interface, which includes Console, HTML, CSS, Script, DOM, and Net. Each tab has one or more sub-functions associated with that feature.
By using FireBug, you will quickly learn just how much is going on behind the scenes of even the simplest Web page.
Forget about using alert() to test or debug your scripts. By adding console object logging to your code you can pinpoint exactly what is going on, and even restrict messages according to different levels of severity (debug, informative, warnings, errors).
The console object also allows you to make assertions to more deeply test your code as well as performing stack traces, time sections of code, and log the number of times a function is called has been executed.
All of the console logging methods can format strings using patterns similar to the C stdio printf() family of functions.
Command Line Functions
For command line junkies like me, console mode gives you access to a wealth of query
and history/editing features you're probably already familiar with. Even more powerful
are the following predefined shorthand functions:
$("id") - A shortcut for document.getElementById().
$$("css") - Returns an array of elements that match a CSS selector.
$x("xpath") - Returns an array of elements that match an XPath selector.
$0 - Variable containing the most recently inspected object .
$1 - Variable containing the next most recently inspected object .
$n(N) - Returns the Nth most recently inspected object that has been inspected.
inspect(object) - Displays an object in the DOM Inspector.
dir(object) - Returns an array of property/method names on an object (Python anyone?)
clear() - Clears the console.
>>> inspect(document)
Is a good place to get started.
CSS Quick Search
While in Inspect mode, you can use the quick search box to locate any element by entering a CSS selector. FireBug will display all matching elements in the console view, which you can then expand to view more details or switch tabs to explore the stylesheet that defines the rules for each element, the computed propeties and layout/display attributes, JavaScript events that are attached to the element, and even the gory details of DOM for the selected item.
You can also use quick search to match JavaScript events.
In the future, Joe plans on adding XPath search as well as plain text. For those in a hurry, you can try the getElementsBySelector()
JavaScript function, which uses the Firefox XPath API to translate CSS selectors to XPath making them a lot faster than searching the DOM directly.
FireBug 1.2
Some of this material is a bit dated. For the latest on FireBug, visit the new Get FireBug Web site and in particular the documentation section.
Previous Topic
