File Under: Browsers, CSS, JavaScript

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.

Firebug is a web development tool for tweaking CSS, debugging JavaScript and more. In part, it’s like juiced-up “view source” for seeing how sites are put together. But Firebug really shines when it’s used to streamline your own development.

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.


Contents

  1. Getting started: installing Firebug
  2. Firebug for designers
    1. Inspect HTML and CSS
    2. Make your sites PixelPerfect with Firebug
  3. Firebug for front-end coders
    1. Debug JavaScript
      1. Other debugging tutorials
    2. Why slow with YSlow
  4. Firebug for back-end coders
    1. FirePHP brings PHP debugging to Firebug
    2. FirePHP equivalents for other languages
  5. Suggested reading

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:


Image:Firebug-inspectbutton.png

Then you can move your mouse over the page and see an outline around elements of the page:

Image:Firebug-inspect1.png

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.

Image:Firebug-inspect2.png

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.

Image:Firebug-inspect3.png

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.

Image:Firebug-pixelperfect.png


Firebug for front-end coders

Firebug really starts to show it’s stuff when you dig into the more advanced tools for front-end coders. No more alert statements clogging your JavaScript!

Debug JavaScript

The debugger in Firebug takes JavaScript from cute little client-side scripting to a full-fledged language. Set breakpoints and watch values, just like most development environments. The obvious upside to Firebug: it lives in the browser, where all the JavaScript code runs.

To begin debugging JavaScript for the current page, open up Firebug and choose the Script tab. You can browse the different JavaScript files that are on your page by clicking the name of the one selected (to the right of Inspect and Enabled). Don’t be surprised if you have a long list of JavaScript files to choose from. Many embedded services use JavaScript, such as Google Maps and Google Analytics.


Image:Firebug-debug1.png

Find a line of questionable script (or just a good stopping place) and click its line number to set a breakpoint.


Image:Firebug-debug2.png

Then, reload the page. When it comes time for the JavaScript line to be called, Firebug will open in debug mode:


Image:Firebug-debug3.png

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:


Image:Firebug-debugcontrols.png

This article won’t go into the details of debugging, but here’s a quick primer on the controls:

  • Continue resumes running JavaScript after a breakpoint
  • 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

JavaScript Debugging for Beginners
Advanced JavaScript Tutorial – Lesson 5

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.

Image:Firebug-yslow.png

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:

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.

Image:Firebug-firephp1.png

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.

Image:Firebug-firephp2.png

One area that FirePHP is especially helpful is Ajax-enabled applications. Ajax uses JavaScript to grab data from the server. If something goes wrong, there’s often no way to tell in the browser, except that nothing happens. Since headers are likely still sent with the Ajax response, FirePHP can also send debug info.

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:

require('FirePHPCore/fb.php');

Now you’re ready to start adding debugging messages. Just send along a variable or other message to the fb function, like so:

fb('Hello World');

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:

ob_start();

As you might guess, there’s a whole lot more to FirePHP. For more info, like sending more complex variables, check out its quickstart documentation or the fb function reference.

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.


Suggested reading

Links from Webmonkey’s Monkey Bites blog: