Firebug, the popular web development add-on for Firefox has released version 1.8 with a host of new features and compatibility with Firefox 5.0. More important, for those of you using the Beta and Aurora Firefox channels, the Firebug 1.9 alpha line has been released with support for Firefox 6 through Firefox 8. The alpha release will obviously be less stable, but if you want Aurora and Firebug it’s your only option.

If you’ve already got Firebug installed it should auto update shortly. If you’d like to take the latest version for a spin, head over to the Get Firebug site.

Much of the work in Firebug 1.8 went into behind the scenes optimizations and speed improvements, but there are some notable new features as well, including a revamped HTML Preview in the Net panel, some new DOM Panel options and better CSS color tooltips with rgba, hsl and hsla values.

For more details on the major new features head over to the Mozilla Hacks blog. To see a complete list of everything that’s new in Firebug 1.8, check out the release notes.

See Also:

• New Firebug Lite Adds Web Dev Tools to Any Browser
• Firebug 1.5 Adds More Web Developer Tricks to Firefox
• 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.

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

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.

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

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

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:

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

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)

• Minify JavaScript and CSS (check out JSMin)

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.

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:

• Resig Brings Structure to Firebug

• Firebug Lite: Debugging Tools That Work in Any Browser

• Firebug Gets Dedicated Team

This new version is a significant update to Firebug Lite. While the full power of Firebug still requires Firefox (see our coverage of the recently released Firebug 1.5), Firebug Lite 1.3 adds some great HTML and CSS debugging tools to any browser, including IE6+, Opera, Safari and Google Chrome.

The lastest beta release of Firebug Lite — which is bookmarklet script that you can add to your browser’s favorites bar — features significant speed boosts and many improvements to the HTML and CSS inspectors. The visual interface of Firebug Lite has also been revamped to match that of Firebug 1.3. For more details on everything that’s new in the Firebug Lite 1.3 beta be sure to check out the release notes.

Google’s Chrome browser gets some special attention in the latest release, with a new Firebug Lite beta extension that makes Firebug Lite feel like a part of Google Chrome. The Chrome extension still lacks the JavaScript debugger and the Net Panel found in Firebug proper, but otherwise is behaves much like Firefox version.

For other browsers Firebug Lite 1.3 remains a bookmarklet with the same functionality — if not the UI integration — of the Google Chrome version.

If Firefox isn’t your bag, or if you don’t need the JavaScript debugging tools of Firebug, the Lite version has you covered and will work in the browser of your choice. Keep in mind that this is a beta release, though we encountered no problems during our testing.

See Also:

• Firebug 1.5 Adds More Web Developer Tricks to Firefox
• The 5 Best Firebug Extensions
• How to Create a Firebug Extension
• New Google Tools Help Speed Up Your Website

Firebug is a Firefox extension that turns your browser into a JavaScript debugging powerhouse. It eases the web development process by providing console interfaces, XmlHttpRequest tracking, live HTML and CSS editing and all sorts of other useful information about what your pages are doing (or not doing). Firebug is so popular with web developers there are even extensions for the Firebug extension — sort of meta-extensions if you will. Yahoo’s YSlow and Google’s Page Speed are the most popular.

The latest release of Firebug improves the add-on’s stability, adds several new features and makes Firebug compatible with the soon-to-be-released Firefox 3.6, which is expected next week.

Among the updates in Firebug 1.5 are a much-improved Inspector tool, which allows you to select any element on the page and see the HTML and any applied CSS rules; and several major new features for the Net panel, which can debug XMLHttpRequests. For a complete list of everything new in Firebug 1.5 be sure to check out the release notes on the Firebug wiki.

To grab a copy of Firebug 1.5, you can head to the Get Firebug site, or wait for the update to show up on the Mozilla add-ons website. The Firebug blog says the latest release should be on the Mozilla site next week (if you want to try Firebug betas or stay at the bleeding edge of Firebug development, we recommend installing the add-on through the Firebug site).

Firebug works wherever Firefox does, but be aware that, if you’re using Firefox on 64-bit versions of Linux, some users have reported problems with Firebug 1.5.

See Also:

• The 5 Best Firebug Extensions
• How to Create a Firebug Extension
• New Google Tools Help Speed Up Your Website

It does so by adding a floating black table (seen to the right) that you can use to log different errors and data points throughout your code. It makes debugging a cinch, and it helps you figure out what you’re doing wrong in a much more visible manner than adding alerts.

Blackbird is installed by adding a link in your page to some lightweight, downloadable JavaScript and CSS. Open the pop-up logging window using the F2 key. Other F2 variations will move the window, make it larger and close it.

The developers of blackbird promise you’ll never use alert() again. Check out the Blackbird webpage for code and live examples of the coding box and the kind of messages you can install in your page.

This isn’t a replacement for other debugging tools, like Firebug. However, unlike Firebug and like HTML design debugging tool XRAY or Firebug Lite, it works over any modern browser without a software installation.

See Also

• Webmonkey Tutorial: JavaScript Debugging for Beginners
• Debug JavaScript With Venkman
• Firebug Lite: Debugging Tools That Work in Any Browser
• Dragonfly: Opera Releases Free Developer Tools

John Resig, one of the new Firebug team members, has a great rundown on what’s new. Resig is always on the lookout for performance issues and he brings up an important one with JavaScript debugging. Whenever script debugging is on anywhere, every page runs JavaScript about 25% slower, even those without Firebug enabled. Now you can right-click (or ctrl-click) the Firebug icon and choose “suspend Firebug” when you’re done using the script console. Expect the Firebug team to look into this performance issue.

Those who haven’t been enjoying the beta will need to completely remove the previous version before installing Firebug 1.2. Otherwise, the update is just a click (maybe three) away. If for some reason you’ve avoided Firefox 3, the new Firebug even works in Firefox 2, but you’re still missing out on FF3.

Want to get down to business with Firebug and learn how to use Firebug extensions, too? We have an excellent Firebug tutorial.

See also:

• Resig Brings Structure to Firebug
• The 5 Best Firebug Extensions
• How to Create a Firebug Extension

Firebug is a web development tool for tweaking CSS, debugging JavaScript and more. It is like juiced-up “view source” for seeing how others put a site together. Firebug really shines when used to streamline your own development.

In the last year, as the application surged in popularity, Firebug had some stumbles. It crashed in Firefox 3 builds. Sometimes it hangs. Resig lays out a plan to build a more stable Firebug:

• Document Firebug internals
• Create tests to protect against bug from new code
• Track the performance using Firefox’s tools

Reading between the lines, it sounds like Firebug as a code base is a little disorganized. It quickly became a major part of every developer’s toolset and it receives many patches to its 35,000 lines of code.

Resig is still new to the project. His eyes are fresh and he seems to have the passion to make a better tool. If his past projects are any indication, big stuff is coming for Firebug.

See also:

• Firebug Lite: Debugging Tools That Work in Any Browser
• Another Resig Project: Animation Library
• Dragonfly: Opera Releases Free Developer Tools

The popular Firefox web development extension Firebug does some pretty cool stuff out of the box: Debug JavaScript, tweak the CSS, and see all the network traffic.

Firebug extensions are a sort of meta-extension that lets you add on to Firebug. Developers are adding some features that we’re starting to find hard to live without.

Here we’ll lay out our five faves.

1. YSlow

We’ve written about YSlow before. It measures your site’s speed against Yahoo’s rules for high-performance websites. It generates a little report card that analyzes your page’s events and components, pointing out which pieces of the page are causing the most problems.

It’s worth a glimpse into YSlow from time to time, even if you feel like your site is performing well. You may still find improvements to make, and if not, at least you’ll pat yourself on the back with your good score.

Download YSlow

2. Firecookie

Firecookie shows all the cookies being accessed by the current web page. You can see when one has been changed, and you can alter your cookie settings for accepting or denying cookies right from the Firebug panel.

I like the cookie access in Firefox 3′s new Page Info screen, but pairing cookies with Firebug just makes sense. One of the best things about Firebug extensions is that they can bring all your debugging to one place.

Download Firecookie

3. FirePHP

Speaking of bringing all your debugging to one place, I never would have imagined I needed FirePHP, but now I love it. It brings PHP debugging into Firebug using special “X-FirePHP-Data” headers that are invisible in the browser. FirePHP requires a PHP library to send the debugging messages.

There’s a similar extension for Cold Fusion called ColdFire. We haven’t tried it, and they aren’t listed on the Firefox extension site, so proceed with caution.

Really, there’s no need to have a different extension for each programming language. I’d rather see a standard, language-agnostic version. Then, any language could send header data to Firebug.

Download FirePHP

4. Pixel Perfect

Okay designers, this one’s for you. Pixel Perfect helps you create designs that are just right. You can overlap a partially transparent mockup above your actual web page. Then use Firebug’s standard CSS controls to find just the right settings to make the design pixel-perfect.

Download Pixel Perfect

5. Rainbow

First a warning: Some people have experienced problems with Firebug when using this extension. It’s worked fine for me.

The aptly named Rainbow color-codes your code. For example, JavaScript variables are green, reserved words are blue. The coloring is sure useful when you have hundreds of lines to read.

Download Rainbow

If you’re interested in more Firebug extensions, Jan Odvarko keeps a list of them. Of course, you could also write your own Firebug extension.

See also:

• Firebug Gets Dedicated Team
• Dragonfly: Opera Releases Free Developer Tools