To say that Firebug is just a web developing tool would do it injustice, it is much more than that. It houses a powerful suite of tools for debugging and optimizing CSS, JavaScript, HTML and thoroughly speeds up your web development.

A great thing about Firebug is it gives you the option to add extra extensions and make it that even more indispensable, you can tailor it and mold it to your needs. In this article, we’ve listed 10 Extension Plugins of our favorites.

1. Pixel Perfect

A useful extension that allows web developers and designers to easily overlay a web composition over the top of the developed HTML.

2. CodeBurner – Reference Tool for Web Developers

A suite of tools for web developers, that provides reference material for HTML and CSS, integrated with a range of popular development environments.

3. SenSEO

Analyzes web pages and tells you how good they fulfill on-page Search Engine optimization criteria. SenSEO gives you an overview of SEO-important web page components; in-depth analysis of on-page SEO criteria’s and offers the correct usage of Document-Title, Meta-Description and Meta-Keywords.

4. Inline Code Finder

A tool to traverse through all of the elements in a web page, and when it finds an HTML element with any of these, it will highlight them: Inline JavaScript events, Inline style and JavaScript links.

5. Firepath – Edit, Inspect and Generate XPath Expressions

A Firebug extension that adds a development tool to edit, inspect and generate XPath expressions. With this extension you can edit with auto-completion (using TAB or up and down arrows), you can also evaluate the expression on HTML or any XML documents and display the resulting evaluations in a Firebug-like DOM tree.

6. Firepicker – Color Picker

Adds a small color picker dialog when editing CSS rules in Firebug.

7. Firesymfony

A port of the Symfony Web Debug Toolbar as a Firebug extension. Besides the normal functionality of the Symfony Toolbar, it adds new features, like Database Query, One Click copy to clipboard, or Mouse Over Partial and Component Cache Highlighting.

8. FireAtlas – Debugging

This extension will provide you with these useful services when developing ASP.NET AJAX web sites: PageRequestManager events tracing; WebService calls tracing and inspection; Partial Update inspection within Firebug Net Panel; Application components listing.

9. Drupal for Firebug

Extends the Firebug module to provide Drupal specific debugging and status messages. It allows users to see the processing of the node, form, and user objects and works with the Devel module to display SQL queries and execute PHP from the Firebug window.

10. FirePHP for AJAX Development

Enables you to log to your Firebug Console using a simple PHP method call. All data is sent via response headers and will not interfere with the content on your page.

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.