Most Useful and Powerful Extensions for Firebug

June 19, 2013 · 17 comments

by Lars

Most Useful and Powerful Extensions for Firebug

If you’re a web designer or developer it is very likely that you already use Firebug for Firefox every day. If you have not even installed it yet it is about time you check it out. Firebug is packed with useful features that make the life for web developers much easier. Being able to inspect an element on a page and instantly get access to the html and css used to render it is my personal favorite and the fact that it is possible to edit the code and see the result instantly is an insanely useful feature. Although Firebug is packed with features there are several interesting extensions that enhance its capabilities. This post gives you an overview of the best Firebug extensions that may increase your productivity even further.



FireQuery for jQuery Development

IF you’re doing a lot of front end development you are probably using jQuery and Firebug already. FireQuery is a Firebug extension for jQuery development and I’m pretty sure it is useful to you. 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. Install FireQuery



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 extension checks for correct use of meta tags, presence of a title, headings, and other relevant criterions for optimal search engine optimization. SEO is very important for making sure organic search engine traffic is lead your way. This extension is a great tool to check the current state of your website and most important pages.



Firefinder will help you to quickly find HTML elements matching specific CSS selector(s) or XPath expression. You can also auto-select elements when hovering or via the context menu. 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. Very very useful. Install Firefinder


Inline Code Finder

Inline Code Finder is a tool to traverse through all elements in a web page, and highlights inline style and javascript. This is really useful to hunt down inline code elements that makes the page look different than expected.


Also when you hover over an element with an inline event, inline styling or a javascript: link, it will show you more information about it:


Install Inline Code Finder

Page Speed

Page Speed is an open-source Firefox/Firebug Add-on. Webmasters and web developers can use Page Speed to evaluate the performance of their web pages and to get suggestions on how to improve them. These tests are based on a set of best practices known to enhance web page performance. Response time is know to be one of the most important parameters to attract and keep traffic and Page Speed will certainly be able to help you identify and hopefully to get rid of the worst performance problems. There’s a very good Page Speed user guide that you should check out to get an overview of the many features. Install Page Speedimage

Yahoo! 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 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, including™ and JSLint. This is a top fully featured tool for analyzing your pages for load efficiency. Install YSlow



FireRainbow simply brings javascript, HTML and CSS syntax highlighting to Firebug improving the readability of code in Firebug. There are more than 25 themes you can download and use to put colors on the code. Install FireRainbow



CodeBurner, is a SitePoint product that can be used in different containers to provide a built-in HTML and CSS reference. The extension for Firebugs core functionality is centered around a new Reference panel, which contains a search tool for looking up HTML elements and attributes, CSS properties, selectors and at-rules. Install CodeBurner


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.


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. Install Firepath


XRefresh for Browser Refresh Automation

XRefresh will refresh current web page due to file change in selected folders. With this functionality you will be able to do live page editing with your favorite HTML/CSS editor. A possible 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. Install XRefresh


CSS Usage

CSS Coverage is an extension for Firebug which allows you to scan multiple pages of your site to see which CSS rules are actually used in your site. 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. Install CSS Usage



Firepicker adds a small color picker dialog when editing CSS rule 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.Install Firepicker



Firecookie is a an extension for Firebug that makes possible to view and manage cookies in your browser. This is  essential to speed up development of applications that rely on cookies. The extension allows you to view, inspect, export, and manage cookies, log cookie events (creation, deletion, etc.), and much more. Install Firecookie



This is not a firebug extension but it is so useful that I decided to add it anyway. HttpFox monitors and analyzes all incoming and outgoing HTTP traffic between the browser and the web servers. This is a essential tool for tracking strange errors and knowing exactly what is going on (sent and received back from the server). Would be great to have HttpFox integrated into Firebug don’t you think?


Previous post:

Next post:

Web Analytics