What’s New in Firebug 1.6

Tweet

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…

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • JayZawrotny

    Firebug and the likes of are really useful, it allows you to be picky as you want without spending too much time guessing and checking. Get the details finalized in real time, then used the finished numbers and properties in your CSS file. Time saved, money earned, project polished :)

  • Miltank

    I agree with this article. BY the time I am beginning my career as a front-end web dev, it took a lot of development time for me to check why my newly defined css rules won’t work. Now with the advent of Firebug, redesigning any existing web page has never been easier. I learned a lot of techniques too! Thanks Firebug n_n

  • Howdy_McGee

    Maybe it’s because I’m a chrome user, but webkit inspector is by far my favorite. It’s handy pop-up dialog box is easy to use and move around. Love it. Plus it just looks nicer when highlighting tags in Chrome/Safari

  • Jenny Cox

    My favourite Firebug feature is the ability to target a bit of the css, make a change, see exactly how that would look on the actual site, then copy it back into the real css file. It’s a great way to test out ideas without breaking my sites.
    Firebug and the Web Developer toolbar are the 2 must-haves I tell all my web design students to get asap.

  • heggaton

    I hate Firefox. It’s a memory eater!

    However, as I’m a web developer, it’s impossible to go past Firebug. It’s an incredible app that makes my job so, so much easier.

    Firebug is the only reason I stick with Firefox!

    • gregory

      I agree about Firefox being a memory eater, You should try “Memory Fox” (https://addons.mozilla.org/en-US/firefox/addon/53880/) I have seen a Huge improvement with Firefox not crashing as much and my RAM usage when having multiple tabs (30 to 50) open has drop.

      • http://www.optimalworks.net/ Craig Buckler

        Is Firefox really so bad these days? It used to be, but I find it uses less memory than, say, Chrome or Opera.

        I think the main problem is that it feels more sluggish — but even that depends on the extensions you’re using. It can also be a little inefficient at reclaiming memory after closing tabs too.

  • Tim

    I find the colour selection of Webkit inspector to be a tad annoying. Why do they differentiate load phases/times with shades or transparencies? Very hard to take in at a glance

  • goldfidget

    For me it’s the Web Developer Toolbar. Firebug is cool but too complex. I just want to edit the CSS and see the document hierarchy. I don’t need or want to see everything as a tree, it just slows me down. I know what doctype I’ve chosen (html5) and I don’t want to see style rules isolated from their context, I want the whole thing right there so I can cut and paste it when I’m done.

    Very occasionally I’ll drop into Firebug if something is really tricky, or if I’m debugging Javascript. It’s nice, but in most circumstances imo, it’s massive overkill.

    • http://www.optimalworks.net/ Craig Buckler

      WDT is fantastic and it’s worth having both installed because they offer differing sets of functionality. It’s hard to beat Firebug for solving quick CSS spacing issues or debugging JS though.

      • goldfidget

        I think WDT deserves a listing in the sitepoint poll. I’d vote for it :)

  • Mats

    Any idea when we can expect code completion for the multiline console?

  • http://twitter.com/tomdotdesign tom_dot

    Did they fix the way it used exponentially more memory as you downloaded bigger files?

    Downloading 500mb or 1gb files would cause Firefox to balloon to 4gb of memory and then crash (or crash windows). I had to disable Firebug as I kept forgetting and killing my PC.

    Hopefully it’s fixed now, as I really miss it.

  • Karl Oakes

    Firebug is quite simply the best client side toolset out there, it helps you design, debug, monitor performance and requests, the list goes on. My job would be a lot harder without it and I think it was one of main reasons that web based apps have become so popular.

  • http://www.ifadey.com ifadey

    Firebug is still the best debugging tool :)