If there’s one reason developers continue to support Firefox, it’s Firebug. Firebug is more than just a browser add-on. It’s the tool which made client-side web development bearable. I’m convinced that, without Firebug, adoption of Ajax, Web2.0 and HTML5 wouldn’t have risen at the same pace.
While Firebug-like consoles are available in all major browsers, the tool continues to evolve and version 1.10 will install itself in your browser during the next day or two. The latest release offers a slew of great new features and bug fixes so let’s look at the best…
Cookie Tab
The most obvious new feature is the Cookies tab which allows you to filter, sort, inspect, reject, create, modify, copy, export and delete existing cookies.
You can also set cookie breakpoints and conditions. Simply click in the breakpoint margin and the script debugger will be launched whenever that cookie is modified.
The functionality has been available in Firebug’s Firecookie add-on but it’s good to see it within the main installation. I normally use the Web Developer Toolbar for cookie management, but Firebug’s implementation is far slicker.
:focus Pseudo Element Support
Until this release, Firebug only supported :hover and :active states in the Style menu. You can now display the styles applied to elements when they have focus:
Computed Styles File and Location
The computed styles panel now displays the file and line of every property. Links can be clicked to take you to that location:
Media Query Rule Editing
CSS @import declarations which use media queries can be edited directly in the CSS tab:
Web Font Declaration
If you’re using web fonts — who isn’t — Firebug can now link you directly to the appropriate @font-face code. Right-click any font name and select Inspect Declaration.
Console Improvements
The console is essential for evaluating JavaScript values and code snippets. The editor now features color-coding and auto-completion when editing CSS properties, variables in the Watch panel, breakpoint conditions, numbers, colors, etc.
In addition, enter ‘help‘ to view a summary of API commands.
Speed Boost
A number of improvements have been made including:
- no need for a browser restart following installation
- delayed load: Firebug components are only launched when required so browser start-up time is not affected
- reduced memory requirements (although that will only be evident in Firefox 15 when it’s released in a couple of months).
Miscellaneous Improvements
Want more? You got it…
- You can delete a whole CSS rule by right-clicking the selector and choosing Delete “[rule_name]“.
- HTML entities can be displayed as symbols, names or unicode characters — click the drop-down arrow on the HTML tab.
- Colors can be displayed in hex, RGB or HSL format — click the drop-down arrow on the CSS tab.
- All tab menu items have tooltip help.
The team has done a fantastic job with Firebug 1.10. The roadmap for the next version has the ambitious goal “Innovate features that only Firebug can deliver”!
For more information and installation details, visit getfirebug.com.
Craig BucklerCraig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
