Get your first look at the Firebug 3 - DevTools integration

Oct 29, 2015 12:20 GMT  ·  By

Firebug, one of Mozilla's most used and beloved extensions, currently deployed with over 2.3 million browsers, will be integrated as part of the Firefox's DevTools (Developer Tools).

The extension, while not as popular with regular Internet users, is a must-have tool for any Web designer and developer.

Firebug helps developers inspect and debug Web pages, being one of the most helpful tools programmers have at their disposal when creating and fine-tuning new websites, or fixing existing ones.

Firebug has been extremely popular in the Firefox community, and it also spread to Chrome, but it never caught on, mainly because Chrome came with its built-in Developer Tools feature, which was managed by Google's staff and included more tools that Firebug's small team could ever provide.

Firefox copied Chrome with the addition of the browser's DevTools feature, which, according to recent reports, in upcoming versions will integrate some of Firebug's features within its own offering.

At the time of this article, the latest Firebug version is 2.0.13, but Firefox's team is planning to integrate the upcoming Firebug 3 into Firefox's DevTools.

From now on, Firefox DevTools will look like Firebug

The Firebug-DevTools integration will be e10s-compatible (multi-process support), and Firebug's features will be implemented as DevTools' extensions.

DevTools will also receive a facelift, Firefox engineers making it look like the good old Firebug.

Firebug 3, or Firebug.next, is available on GitHub, and you can test it right now. The easiest way to install it is to download the XPI to your PC and then choose "Install Add-on From File" in the browser's Add-ons section.

If that doesn't work, go to about:config and set "xpinstall.signatures.required" to false and try accessing the XPI's link again.

If you don't want to bother, we took a few screenshots of Firefox 42 running Firebug 3 Beta 1.

Firebug settings panel
Firebug settings panel

Firebug 3 screenshot tour (7 Images)

Firebug inspector
Firebug consoleFirebug debugger
+4more