Skip to main content

Firebug Theme for Firefox Developer Tools

Firebug is a popular development extension for Firefox that has been available for Firefox since the early 1.x days of the web browser.

It launched at a time when development tools were not integrated into web browsers -- the most you could do back then was to display the source code and maybe edit it directly if integration was available -- and it revolutionized how web developers could utilize the browser to edit, debug and monitor code and the actual display of web pages in the web browser.

Firebug is still popular with more than 2 million users, but the team made the decision some time ago that it would concentrate its efforts on integrating features of Firebug into the Firefox Developer Tools instead of working on Firebug 3.x as a standalone extension.

Reasons given by the team were that it did not want to compete with Firefox's Development Tools, that users did not want to use two separate tools, and that the integration would be beneficial in regards to performance, stability and security.

Firebug theme in Firefox

firebug theme developer tools

The initial plan was to create a Firebug theme for Firefox's Development Tools, to bring Firebug user experience improvements to Firefox, and to integrate Firebug tools into Firefox that the browser's own Developer Tools did not support.

A first version of the Firebug theme has been integrated into the most recent Nightly version of Firefox.

As is the case with these things, it will take some time before the theme will become available to web developers that run other editions of the web browser.

The theme at this point in time modifies only colors, fonts and layout but does not introduce any features besides that to the Developer Tools of the browser.

To enable the theme in Firefox, do the following:

  1. With a web page open, tap on F12 to display the Developer Tools interface.
  2. A click on the cogwheel icon in the upper right corner of the Developer Tools interface displays the preferences.
  3. Locate the themes section there, and select Firebug from the list of available themes.
  4. The change is immediate, and affects only the Developer Tools interface and not the full browser interface.

You can check out the bug on Bugzilla that landed the theme, and another that lists potential improvements to the theme that Mozilla considers adding in the future.

As far as the Firebug extension is concerned, it will continue to work for now but that is going to stop when Mozilla introduces e10s on the stable channel as Firebug won't be compatible with Firefox's multi-process architecture. 

This article was first seen on ComTek's "TekBits" Technology News

HOME