HTML5 Development Center

Developed for you in part by
 
455-firebug-16

What’s New in Firebug 1.9

By | | Ajax | HTML | HTML5 | JavaScript | Libraries | Programming

9

Firebug is the world’s best-known browser development console. All browsers offer decent debugging facilities these days but they all owe a debt of gratitude to Firebug. Even developers who have switched browsers keep Firefox installed because Firebug is so damn good!

If you have Firebug installed in Firefox 5.0 or greater you should have received version 1.9 during the past few days. If not, head over to getfirebug.com for information and download links. Here are some of the new gems you’ll find…

Configurable Docking

Until now, Firebug has either appeared at the bottom of the window or in its own pop-out. It’s now possible to dock it on the top, bottom, left or right of the browser — which is great if you’re using a wide-screen monitor.

To change the position, click the down arrow next to Firebug’s icon followed by “Firebug UI Location”.

Firebug UI location

Improved Error Reporting

It’s important to know which JavaScript file and line which caused an error but Firebug can now highlight the exact location of syntax issues.

Firebug syntax errors

Copy JSON From Ajax Responses

If you’re implementing any type of Ajax functionality, Firebug’s essential. It’s always been possible to view and expand JSON data but you can now copy the whole payload with a right-click.

Firebug JSON copy

Resend HTTP Requests

This is a great new feature: right-click any request shown in the Console or Net panels and hit Resend to execute the request again.

Firebug resend HTTP request

It’s ideal for Ajax debugging since you don’t need to reload the page or initiate a new request via your application’s interface.

Font Viewer

Everyone’s using web fonts so Firebug now has a preview tooltip whenever you hover over a font name in the style tab.

Firebug font preview

There’s also a built-in font viewer within the Net panel whenever a .woff file is downloaded.

Firebug font viewer

Quick Removal of Elements

To quickly remove an item from your page, click the “Inspect Element” icon, highlight the element and press the Delete button on your keyboard .

…and More

You’ll also find several other features such as the protocol and cached headers shown in the Net panel, adding a watch from the DOM panel, and tooltips on conditional breakpoints and array items.

Firebug keeps getting better. Have you discovered any great new features?

The Ultimate JavaScript Bundle: 2 books + 1 course

Buy now $39 Normally $117 - save 66%

Or get access to all SitePoint's Premium Content with a Learnable membership

Craig Buckler

Craig is a Director of OptimalWorks, a UK consultancy dedicated to building award-winning websites implementing standards, accessibility, SEO, and best-practice techniques.

More Posts - Website

{ 9 comments }

Robbo January 10, 2012 at 8:46 am

Moving it around is going to be so good! Bottom always annoyed me.

Craig Buckler January 11, 2012 at 3:18 am

Docking on the left/right is far more efficient if you’re using a widescreen monitor and have Firefox maximized.

Mike January 10, 2012 at 4:23 am

Stop the memory leak issues. Firebug is, by far, my favorite web dev tool. However, it has consistently brought down multiple Macs of fine with 8GB Ram, when used over consistently for a couple hours. It’s just terrible…and a Firefox restart doesn’t always give your Mac that memory back.

Craig Buckler January 10, 2012 at 5:03 am

Firefox did have dubious memory use on the Mac so I’m not sure it’s Firebug at fault. Are you getting the same problem in v9? Mozilla promised to address many of the issues.

Steven Roussey February 2, 2012 at 11:45 pm

We are working on it. Sometimes its Firebug, sometimes its Firefox. 1.9 does have many memory leaks addressed. Right now, Honza is pushing for better tools to identify what is actually leaking. With things like about:memory and the like, it is getting better with each release.

Joseph January 9, 2012 at 11:30 pm

Man Firebug just keeps getting more and more awesome. It comes in SO handy when writing HTML, CSS or JavaScript, especially when I need to run some tests on the jQuery Plugins I write to distribute on my website (http://joezimjs.com/projects/)

IT Mitică January 9, 2012 at 2:01 pm

I like the font preview part. It should also highlight the currently used font face and probably will some time in the future.

Ryan January 9, 2012 at 12:49 pm

Craig! You should do an article on a comparison between Firebug and Chrome developer tools.

Craig Buckler January 10, 2012 at 5:05 am

Thanks Ryan. That’s a nice idea – although I think it should also include Opera Dragonfly and IE’s developer tools. I’ll certainly consider it.

Comments on this entry are closed.