What’s New in Firebug 1.11

Tweet

Firebug was the original developer console and, despite increased competition from Webkit and Opera, it remains the best. Version 1.11 has been released in the past week and should have automagically appeared in your Firefox installation. If not, click Add-ons from the main menu followed by the Check for Updates button. Alternatively, head over to getfirebug.com and download from there.

The new version fixes more than 120 issues and implements 40 enhancements. It includes…

New CSS Query Selector Tool

This is great. Switch to the CSS tab, right-click any selector and choose Get Matching Elements. A list of all elements matching the selector is displayed in the right-hand Elements pane:

Firebug CSS Query Selector

Copy and Paste HTML

It’s been possible to copy sections for some time, but Firebug now allows you to paste HTML, XML or SVG code directly into the DOM. Right-click any element, select Paste HTML and choose how your code is inserted:

Firebug paste HTML

Performance Timing Graph

Once your page has downloaded, enter performance.timing in the console and you’ll be presented with an interactive graph:

Firebug Performance Timing

where:

  • Page Load is the total time required to load the page
  • Waiting is the time taken before the server response started
  • Receiving the download time
  • DOM Processing the time taken to build the DOM
  • DOMContentLoaded the time required to handle DOMContentLoaded events
  • onLoad the time required to handle onLoad events

You can hover over any timeline for more detailed information.

Styled Logging

If you keep missing messages in the console, it’s possible to apply different styles to output using the %c variable. For example:

console.log("%cred-text %cgreen-text", "color:red", "color:green");

Generates:

Firebug styled logging

window.postMessage() Events

Posting messages between windows and frames is logged to the console:

Firebug window.postMessage() logging

This displays the origin window/frame URL, the data message and the target window/frame object.

SPDY Protocol Support

SPDY (pronounced speedy) is a fairly new HTTP-like networking protocol which uses compression, multiplexing, and prioritization to improve download speeds. Firebug’s Net panel now indicates when SPDY is being used:

Firebug SPDY in Net panel

New include() Command

The include() command loads a JavaScript file into the current page, e.g.

include("http://mysite.com/mylib.js");

If you do this often, you can create an alias once then use that reference, e.g.

include("http://mysite.com/mylib.js", "mylib");
include("mylib");

Firebug is almost seven years old but the development team continue to add innovative new features. For many people, it’s the primary reason to use Firefox as their development browser.

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.

  • Brett

    Styled logging has been long awaited. Especially when your console gets overloaded with 407 authentication errors because you work behind a proxy. Also when you have multiple console.log’s everywhere, now you can at least categorize them based on function/purpose? Too good, thanks for the update Craig!

  • http://www.codeconquest.com/ Charles @ CodeConquest.com

    I like how Firebug is powerful but has such a simple and uncluttered look, but I’ll be sticking to Chrome.

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

      Fair enough but, as a web developer, you need a copy of every browser! You might as well grab Firebug.

  • http://www.theposterprinter.co.uk Matt Lickess

    Is there much need for Firebug now that there’s a built in inspector in Firefox?