Note that Firebug 2.0.8 is not compatible with upcoming multiprocess (aka e10s) Firefox. You need Firebug 3 (aka Firebug.next) built on top of Firefox native tools to run with multiprocess browser. Firebug 3 is available as an alpha and you can download the latest version from our github repository. The team is currently fully focusing on Firebug 3.

Read more about why Firebug 3 is based on native Firefox tools and why some features are not yet ready in this thread.

Firebug 2.0.7 is not compatible with upcoming Multiprocess Firefox (read more about e10s), but we are already working on Firebug 3 (alpha available for testing) that is fully compatible. Note that Firebug 2 users will be automatically prompted for update when running in e10s enabled browser. The following panel will be displayed when clicked on Firebug start button. Read more about Firebug & e10s.

Summary: The world of web development tools is changing quickly and Firebug doesn’t want to stay behind. If you are Firebug fan or just curious what the future holds for Firebug and where the next Firebug generation is heading, read on…

In 2006, Firebug started a revolution of in-browser developer tools and it quickly became the most popular and powerful web development tool. Millions of people used Firebug to tweak their pages to perfection as well as understand and learn new web technologies. It was suddenly possible to inspect a web page from different angles and see how it’s created and how to improve it.

Firebug has inspired all main browser vendors to include similar tools in their products. Firebug itself has been developed as highly extensible application and it also inspired a lot of developers to create Firebug extensions.

Firebug has always been maintained as an independent open source project and it has received contributions from many people over time. Developers usually have many ideas about what would make them more effective in daily work and so, Firebug has naturally become a great tool made for developers by developers.

It has always been a handy tool. That’s one key of its success and that’s also why many users still prefer it even if there are other tools in the wild having more features. That said, Firebug helped web development to evolve by introducing a simple user interface.

Firebug 2

Firebug introduced new user experience designs as well as new web standards that have been widely adopted by other browsers and tools. For instance, Firebug stands behind the Console API standard, which represents the way to log debugging information. We introduced the HTTP Archive specification for page load performance analyses and also graphical web page breakpoints to make debugging easier and more effective.

Firebug is still a powerful web development tool used by millions of users around the world
who love especially its simplicity and great user experience, but it’s also facing new challenges. The biggest is the fact that it doesn’t make much sense for Firebug (as Firefox add-on) to duplicate functionality built into Firefox.

The product has always been an extension and the natural direction is to build the next Firebug generation on top of the existing developer tools in Firefox – and extend them. So, the next step is tight integration with the existing Firefox platform. This way Firebug also gets significant performance, stability and security advantages. Firebug will complement the Firefox Developer Tools by adding new functionality – not by competing with them.

The next Firebug generation starts with introducing a new Firebug theme, new features and bringing the great Firebug user experience to the built-in tools. Users don’t want two separate tools in Firefox – they want one great and powerful tool!

So, give it a try and install Firebug 3 alpha (you can also check out the firebug.next source repository). We’d love to hear feedback from you!

Fresh new Firebug 2 has been released and it’s time to see what new features has been introduced in this version.

Firebug 2.0 is compatible with Firefox 30 – 32

Firebug 2.0 beta 8 has also been released to update users on AMO beta channel. This version is exactly the same as 2.0

Firebug is an open source project maintained by developers from around the world and here is a list of all members who contributed to Firebug 2

Jan ‘Honza’ Odvarko

Sebastian Zartner

Simon Lindholm

Florent Fayolle

Farshid Beheshti

Steven Roussey

Markus Staab

Sören Hentzschel

Belakhdar Abdeldjalil

Thomas Andersen

Jakob Kaltenbrunner

David Gomez

Leif Dreizler

Luca Greco

Benediktas Knispelis

There are also plenty of translators who localized Firebug into 35 languages!

Before we jump right into the details, let’s see how the current UI looks like. Firebug 2 went through a face lift in this version. World class designers have been working on the new theme and the user interface is now clean and more intuitive.

Firebug 2 UI:

The screenshot shows Win OS theme other OSes (Linux and Mac) have own custom theme.

New Features

Firebug 2 introduces many new features and bug fixes also because we completely removed dependency on the ancient Firefox debugging engine (aka JSD1) and incorporated new debugging engine known as JSD2.

Syntax Highlighting

One of the most visible new features is probably that the Script panel supports JavaScript syntax highlighting.

Syntax coloring is also there if you edit HTML as a free text by clicking on the Edit button in the toolbar. The same for CSS source edit mode…

Pretty Print

The Script panel also supports pretty-printing and if you deal with minified JavaScript code you’ll find this feature extremely useful.

DOM Events Inspector

Firebug 2 integrates existing EventBug extension and introduces new Events side panel within the existing HTML panel. This panel lists all of the event handlers on the page grouped by event type for the currently selected DOM element. The panel is nicely integrated with other Firebug panels and allows to quickly find out which HTML element is associated with specific event listener or see the JavaScript source code (read more).

Searching in HTML Panel

Search in the HTML panel has been improved and the user can now use CSS selectors or regular expressions to find specific elements.

Code Auto Completion

Code auto-completion system has been improved across Firebug 2 UI on several places. It’s now available in the Command Editor (within the Console panel) where you can press the <tab> key to open a little completion popup window.

Auto completion works even in breakpoint-condition popup dialog where it offers variables in the current scope.

You can enjoy auto-completion when editing HTML attributes (works for SVG attributes too) and also within HTML style attribute. All these little details make Firebug an awesome tool to use!

JavaScript Expressions Inspector

When debugging and stepping through your code you can quickly inspect and explore details of any JavaScript expression you see in the Script panel. Just hover your mouse over the expression or selected piece of code and see the result in the tooltip.

You can also right click on an expression (or again on the current selection) and pick Use in Command Line or Inspect in DOM Panel actions.

Console Log Grouping

There is new option in the Console panel that allows to group console logs coming in a row from the same location (on by default).

Inspect JavaScript Function Return Value

This feature allows to examine and modify return value of a JavaScript function. See an example:

function myFunction() {
return foo();
}

The usual problem in other debuggers and tools is is how to examine the return value of foo(). Firebug allows that by stepping through a return statement and displaying the value within the Watch side panel. It even allows you to modify the return value through the Watch panel just like other values (read more).

Show/Hide Firebug Panels

One change we introduced in Firebug 2 is the way how to hide/show individual panels. Check out the next screenshot that depicts how it’s done.

Displaying Original CSS Color Values

Another nice enhancement allows displaying original CSS color values. There is a new option Colors As Authored in the CSS panel that allows displaying CSS color values as they were defined. This makes it easier to compare the styles interpreted by the browser with the ones inside the original CSS source file. While this new option is now the default, you still have the possibility to switch to hexadecimal, RGB or HSL formatting.

Quickly create new HTML attribute

There is a new way how to quickly create new attributes for HTML elements. All you need to do is hover mouse cursor over the closing arrow bracket of an element you want to add a new attribute to. See, the cursor changes its shape into a hand.

Click on the closing tag to open an inline editor and start typing an attribute name.

The rest works as usual. After you typed the name press the tab key and type the attribute value.

Inspect Registered Mutation Observers

The existing getEventListeners() command (see a Firebug tip) has been extended and it now displays also registered mutation observers for given element.

FireQuery Adds a collection of jQuery-related enhancements to Firebug. Recommended for all jQuery developers. (see also this post)

FireStorage Plus! Is an extra panel to Firebug for displaying and manipulating the web storage containers such as localStorage and sessionStorage. (see also this post)

FlashFirebug Debug ANY AS3 SWF files on the web. Edit properties and inspect elements. Redirect SWF output to the extension. Run AS3 code and transform objects on the fly. Access SWF assets with the decompiler. View AMF calls and Shared Objects and much more!

NetExport NetExport is a Firebug extension that allows exporting data from the Net panel.

Omnibug Omnibug is a plugin for Firebug to ease developing web metrics implementations. Each outgoing request (sent by the browser) is checked for a pattern; if a match occurs, the URL is displayed in a Firebug panel, and decoded to show the details of the request. In addition, requests can be logged to the filesystem.

PageSpeed Page Speed is an open-source Firefox/Firebug Add-on. Webmasters and web developers can use Page Speed to evaluate the performance of their web pages and to get suggestions on how to improve them.

YSlow YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. YSlow is also a Firefox add-on integrated with the Firebug web development tool.