15+ Awesome Firefox Extensions to Improve the FireBug

FireBug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. FireBug lets you explore the far corners of the DOM by keyboard or mouse. All of the tools you need to poke, prod, and check your JavaScript, CSS, HTML and Ajax are brought together into one seamless experience, including a debugger, error console, command line, and a variety of fun inspectors.

15+ Awesome Firefox Extensions to Improve the FireBug
15+ Awesome Firefox Extensions to Improve the FireBug

Well, it can do more than you could ever imagine with all these FireBug extensions which improved your work. FireBug extensions typically come in the form of Firefox add-ons. In this post, I have found 15 extensions that will boosts your web development speed!

1. CodeBurner

CodeBurner
CodeBurner

CodeBurner is a Firefox add-on that integrates with Firebug, to extend it with reference material for HTML and CSS. The extension’s core functionality is centered around a new Reference panel, which has a search tool for looking up HTML elements, attributes, and CSS properties. The extension also hooks into context-menus in the HTML and CSS panels, the DOM crumbtrail, and the Inspector, adding options to look up a selected item (ie. search for it in the Reference panel) or to view a code example.

2. Firecookie

Firecookie
Firecookie

Firecookie is a an extension for Firebug that makes possible to view and manage cookies in your browser. Apart from all the other cookie managers and viewers available as Firefox extensions, this one is made as an extension for Firebug, so web developer has the functionality accessible within familiar Firebug’s UI.

3. NetExport

NetExport
NetExport

NetExport is a Firebug 1.5 extension that allows exporting all collected and computed data from the Net panel. The structure of the created file uses HTTP Archive 1.1 (HAR) format (based on JSON).
Once the extension is installed there is a new Export button available in the Net panel toolbar.

4. Firediff

Firediff
Firediff

Firediff is a Firebug extension that tracks changes to a pages DOM and CSS. Firediff implements a change monitor that records all the changes made by firebug and the application itself to CSS and the DOM. This provides insight into the functionality of the application as well as give a record of the changes that were required to debug and tweak the page’s display.

5. Firefocus

Firefocus UI
Firefocus UI

Firefocus is a simple Firebug extension that tracks the element that now has focus. Its primary purpose is to help the debugging of advanced keyboard implementations without having to rely on platform specific tools such as MSAA Inspect.

6. FormBug

FormBug extends Firebug to make developing form intensive sites easier. If you’re dealing with forms with dozens of inputs, or have kept the Web Developer extension installed because of its “populate forms” feature, or just want to be able to quickly check the state of form data on a page, FormBug is for you.

7. Firefinder

FireFinder
FireFinder

Firefinder is an extension to Firebug (in Firefox) and offers the functionality to, in a quick way, find HTML elements matching chosen CSS selector(s) or XPath expression. It allows you to instantly test your CSS selectors in the page while seeing the content at the same time, and matching elements will be highlighted.

8. Firequark

Firequark
Firequark

Firequark is an extension to Firebug to aid the process of HTML Screen Scraping. Firequark automatically extracts css selector for a single or multiple html node(s) from a web page using Firebug (a web development plugin for Firefox). The css selector generated can be given as an input to html screen scrapers like Scrapi to extract information. Firequark is built to unleash the power of css selector for use html screen scraping.

9. Pixel Perfect

Pixel Perfect
Pixel Perfect

By toggling the composition on and off, the developer can visually see how many pixels they are off in development. Pixel Perfect also has an opacity option so that you can view the HTML below the composition. By being able to see both the composition and the HTML you can now simultaneously use Firebug while Pixel Perfect is still in action. Follow the instructions below to get started.

11. FireSass

FireSass
FireSass

FireSass is a Firebug extension that makes Firebug display the Sass filenames and line numbers of Sass-generated CSS styles rather than those of the generated CSS.

12. Arboreal (Discontinoued)

Arboreal ― A Firebug extension for DOM tree visualization
Arboreal ― A Firebug extension for DOM tree visualization

Arboreal is a Firebug HTML sidepanel which visualizes the elements of a web page.
I recommend default DOM Inspector that implemted with Firefox and locate at Web Developer Menu, it’s included 3D DOM visualization

13. YSlow

YSlow
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 a Firefox add-on integrated with the Firebug web development tool. YSlow grades web page based on one of three predefined rule set or a user-defined rule set. It offers suggestions for improving the page’s performance, summarizes the page’s components, displays statistics about the page, and provides tools for performance analysis, including Smush.it™ and JSLint.

14. SenSEO

SenSEO
SenSEO

SenSEO analyzes web pages and tells you how good they fulfill on-page Search Engine optimization criteria. SenSEO is a Firefox add-on integrated with the popular Firebug web development tool. The code is based on the YSlow extension.

15. CSS Usage

CSS Usage
CSS Usage

The CSS Usage addons allows you to quickly and securely inspect the CSS code behind a webpage, so that you can see which lines of that code are used. NOTE: The CSS Usage add-on is cross-platform and it works on Windows, Linux and Mac OS.

Find something Missing?

Is your useful FireBug Extensions not on the list? Share it with us in the comments, along with your experience and why you like it over other Add-ons.

2 thoughts on “15+ Awesome Firefox Extensions to Improve the FireBug”

  1. sir, regarding add-on number 12. Arboreal, this addon does not work on latest firefox releases. would you have any idea of a fix or a replacement. many thanks

    • Yes, I’ve checked and found it’s discontinued. I recommend default DOM Inspector that implemted with Firefox and locate at Web Developer Menu, it’s included 3D DOM visualization

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.