What’s New in Firebug 1.6

Share this article

Do you remember life in the dark days before Firebug? For many years, Internet Explorer only provided a dumb pop-up box with vague messages such as “Object not an instance of an Object at line 0.” The early Firefox and Opera consoles helped, but only for JavaScript issues.

It’s no exaggeration that Firebug revolutionized client-side coding. Many applications would never have been built without it. You may now prefer Opera’s Dragonfly, the Webkit Inspector or IE’s Developer Tools, but all were influenced by Joe Hewitt’s plug-in. For me, Firebug remains the best browser development tool.

Firebug 1.6

Version 1.6 of Firebug has just been released. You can install it from getfirebug.com or Mozilla Add-ons. Here are the best new features…

Command line anywhere

Firebug command lineThe command line is now available from any panel — not just the console. There’s a new toolbar icon to enable it, although it will be of most use in the Script and DOM panels. For example, if JavaScript execution is halted at a breakpoint, you can enter the name of a variable to view its value. That might be quicker than using the Watch window in some cases.

Console message filtering

Messages shown in the Console window can now be filtered by Errors, Warnings, Information and Debug output. The messages are also color-coded, i.e., red for errors and yellow for warnings.

New console.table() log command

The console.table() command allows you to log tabular data to the Console window, e.g.

var data = [];
for (var i = 0; i < 5; i++) {
	data[i] = [];
	for (var j = 0; j < 5; j++) {
		data[i][j] = i * j;

Firebug console.table() output

Easier HTML inspection

All child and grandchild nodes can now be expanded in the HTML panel. Right-click any element and select “Expand All” (or type *).

The node hierarchy (or breadcrumb trail) is can be scrolled — very useful for all those deeply nested elements…

Firebug breadcrumb scroll

Finally, the DOCTYPE is always shown.

Improved CSS handling

It’s now possible to copy the whole CSS declaration for a rule or just the styles themselves. Right-click any declaration in the Style window of the HTML pane. That’s a feature I’ve wanted for some time.

The styles shown in the Computed window can also be folded into Text, Background, Box Model, Layout and Other groups.

Better JavaScript facilities

One of the major improvements is the Stack panel which shows a list function calls when the debugger has stopped at a breakpoint. Until now, it has been a little tricky to view — but 1.6 shows each function on a separate line which can be expanded to display the parameters:

Firebug stack panel

Usefully, breakpoints are saved between sessions. You can close Firefox, re-start the browser, and all your breakpoints are still set.

If you’re using HTML5 offline storage facilities, you’ll be pleased to hear that localStorage and sessionStorage data are also displayed in the DOM panel.

A new icon!

If those features aren’t enough, perhaps you’ll be impressed by the new icon? Still not satisfied? Why not suggest improvements for version 1.7 in the Firebug newsgroup?

Is Firebug still your main browser development tool or have you migrated to another debugger? Please cast your vote on the SitePoint poll and leave your comments below…

Craig BucklerCraig Buckler
View Author

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

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form