Build Better Pages With Firebug
Ask web developers to name their desert island Firefox extensions (ignoring for now the improbability of having a laptop while stranded), and they’re bound to put Firebug at or near the top of their lists.
The extension’s slogan is “web development evolved,” which is apt, given how much it changes one’s approach to web work. The tools available in the standard installation of Firebug are super. Coupled with additional functionality available via Firebug extensions (sort of meta extensions, which add on to Firebug itself), you may feel like you have evolved.
Getting started: installing Firebug
Installing Firebug is as easy as installing any Firefox extension. Just get the latest Firebug (requires Firefox 3) and Firefox should take over. After it installs, you’ll need to restart Firefox.
Firebug for designers
The part of Firebug I use every day is more designer-oriented. I end up using it on other people’s sites more than my own. Ever see a site and wonder how it is put together? Firebug makes it easy to find out.
Inspect HTML and CSS
The heart and soul of Firebug is the [Reference:Document Object Model | DOM] inspector. You can look at any HTML element to see its box model (height, width, border, margin, padding, and offset from upper left corner), as well as all the CSS for that element (literal and inherited). Designers, Firebug is your Excalibur.
Go ahead and load up a page you want to inspect. You can use your own site, or someone else’s. It can be local or on the web. To start inspecting elements, click the little Firebug icon in the lower right hand corner. You can also go to Tools > Firebug > Open Firebug.
Once the Firebug pane comes up, click the Inspect button:
Then you can move your mouse over the page and see an outline around elements of the page:
When you find the one you want, click on it. You’ll now see its section highlighted in the HTML code in the Firebug pane. Also, on the right side of Firebug is a list of CSS styles that are used by this element.
You can edit the CSS immediately. Just change values, or click the stop sign to the left of a line to temporarily disable that line. You’ll immediately see the changes take place in the browser.
Make your sites PixelPerfect with Firebug
Firebug gives you control to change the position of elements and see the changes immediately in the browser. No Save-Cmd-Tab-Reload going on here. One thing missing from Firebug is the ability to see a mockup image of a site overlayed on the actual site. This feature exists in a Firebug extension called PixelPerfect.
Some HTML purists will tell you that attempting to obtain true pixel perfection will inevitably result in messy code. But I say if it’s possible to easily make your web page look exactly like you designed it, go forth and be a perfectionist.
With PixelPerfect, you set an overlay graphic and give it a transparency level. Then you can make CSS adjustments, check them against your mockup, and then make a few more tweaks.
Firebug for front-end coders
Find a line of questionable script (or just a good stopping place) and click its line number to set a breakpoint.
Use the right side of the Firebug pane to browse through watched variables and add new ones. You can step through the code using the debug controls:
This article won’t go into the details of debugging, but here’s a quick primer on the controls:
- Step Into goes into a function so step through it line by line
- Step Over does not go into a function and just goes to the next line
- Step Out finishes off the current function (after a step into)
By using breakpoints in concert with variable watching, you can find much more difficult bugs than when just tossing up alerts.
Other debugging tutorials
Why slow with YSlow
How much a user enjoys your site has a lot to do with content, but there’s another, less tangible factor: speed. If your site loads slowly, users won’t put up with it.
Thankfully, speed fixes are usually easier to whip up than you’d think. Try out the Firebug extension called YSlow, another meta-extension built by Yahoo and based on the company’s 13 Performance Rules. For any page, YSlow will provide a speed grade and recommendations for making it faster.
Several of the items are easy and actionable:
- Make Fewer HTTP Requests
- Put CSS at the Top
- Move Scripts to the Bottom
Some take a little more searching:
- GZip components (HTTP_Compression HTTP compression)
Others, like using a content delivery network, aren’t reasonable (or affordable) for most home-grown sites.
But YSlow is a must-have Firebug extension, as its sure to help you identify and squash some common slow-downs that could make your user experience feel sluggish.
Firebug for back-end coders
Firebug is made to be a designer and front-end coder tool. So, why this section for back-end coders? Because back-end code eventually gets run on the front-end, and sometimes gets intertwined with your layout. Plus, there’s a cool Firebug extension for PHP programmers, and, since Firebug is open-source, something similar could be coming to your programming language.
FirePHP brings PHP debugging to Firebug
Debugging is a major part of programming — very rarely does something work right the first time. FirePHP brings server-side debugging to the client-side.
Debugging messages are received under the FirePHP tab.
It works with HTTP headers. From within your PHP code, you send X-FirePHP-Data headers. Luckily, there’s a PHP library to make that part a cinch.
Unlike most Firebug extensions, there are two parts to this FirePHP: the part that works on the server (the library), and the part that works in the browser (the Firebug extension). You can download them both at the same place.
The library will download as a .tar.gz. Once you uncompress the file, you’ll have a directory containing all the FirePHP files. Make sure that’s in your development directory, then include it:
Now you’re ready to start adding debugging messages. Just send along a variable or other message to the fb function, like so:
Reload your page and check in the FirePHP tab of Firebug. Blown away?
To avoid a tricky problem with sending headers after non-headers have been sent, you may want to switch on output buffering.
Put this line before any calls to the fb function:
FirePHP equivalents for other languages
Theres a similar extension for Cold Fusion called ColdFire. We haven’t tried it, and it isn’t listed on the Firefox extension site, so proceed with caution.
Links from Webmonkey’s Monkey Bites blog: