Programming

What’s New in Firebug 1.6

    Craig Buckler
    Share

    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;
	}
}
console.table(data);

    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…