Extend the Firebug Console with these 15 Extensions

There are a lot of useful tools for web designers and developers, they do tend to come and go and it usually depends on personal preference whether or not any tool is used. There is only one tool that has lasted the test of time and is not only universally used but also loved, and that is the Firefox extension Firebug – it is by far and away the best tool within web design.

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.
I have listed fifteen of my favorites in this article.

You can download the latest version of the Firebug Console here: Firebug Console Download.
Or, you can install it directly for Firefox here: Install Firebug

XRefresh for Browser Refresh Automation

Firebug Extensions and Addons

XRefresh is a browser plugin which will refresh current web page due to file change in selected folders. This makes it possible to do live page editing with your favorite HTML/CSS editor.
Typical usage scenario is for local web development on a machine with two monitors, the first monitor is for source code editing and the second one is fully dedicated to previewing the web page in Firefox.

XRefresh Downloads & Docs »

Xrefresh Overview Video

YSlow for Firebug

Firebug Extensions and Addons

YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages.
It grades web page based on one of three predefined ruleset or a user-defined ruleset. 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

YSlow Downloads & Docs »

Introduction to Front End Performance Tuning with Yslow

Firefinder

Firebug Extensions and Addons

Firefinder 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.

Firefinder Downloads & Docs »

FirePHP for AJAX Development

Firebug Extensions and Addons

FirePHP 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.
It is ideally suited for AJAX development where clean JSON and XML responses are required.

FirePHP Downloads & Docs »

FireQuery for jQuery Development

Firebug Extensions and Addons

With FireQuery, jQuery expressions are intelligently presented in the Firebug Console and the DOM inspector with the elements in the jQuery collections highlighted on hover. With jQuerify you can inject jQuery into any web page.

FireQuery Downloads & Docs »

Drupal For Firebug

Firebug Extensions and Addons

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.

Drupal For Firebug Downloads & Docs »

FireAtlas – Asp.net Debugging

Firebug Extensions and Addons

FireAtlas is an extension dedicated to ASP.NET AJAX 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.

FireAtlas Downloads & Docs »

CSS Usage

Firebug Extensions and Addons

CSS Usage is an extension which allows you to scan multiple pages of your site to see which CSS rules are actually used.
Each time you press "Scan", the CSS files that are included in the current page are shown with the number of times the rules has been found applied on your page before it.

CSS Usage Downloads & Docs »

Firesymfony

Firebug Extensions and Addons

FireSymfony is 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.

Firesymfony Downloads & Docs »

Firepicker – Color Picker

Firebug Extensions and Addons

Firepicker adds a small color picker dialog when editing CSS rules in Firebug. The addon scans for values that can be parsed as CSS colors (#abc, rgb(1,2,3), blue, red etc.) and displays them in a drop-down list right below the firebug's CSS editor box. Clicking on the color value in the drop-down brings up a color picker dialog.

Firepicker Downloads & Docs »

Firepath – Edit, Inspect and Generate XPath Expressions

Firebug Extensions and Addons

FireXPath is 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.

Firepath Downloads & Docs »

Inline Code Finder

Firebug Extensions and Addons

Inline Code Finder is 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.

Inline Code Finder Downloads & Docs »

SenSEO

Firebug Extensions and Addons

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, indepth analysis of on-page SEO criterias and offers the correct usage of Document-Title, Meta-Description and Meta-Keywords.

SenSEO Downloads & Docs »

CodeBurner – Reference Tool for Web Developers

Firebug Extensions and Addons

CodeBurner is a Firefox add-on that integrates with Firebug, to extend it with reference material for HTML and CSS.

Author: (582 Posts)

Paul Andrew is the editor and founder of Speckyboy Design Magazine.

Comments