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.
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
Pixel Perfect is a Firefox/Firebug extension that allows web developers and designers to easily overlay a web composition over top of the developed HTML. This is very useful for creating html and css that perfectly match the design. 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. Check out the video demonstration and the walkthrough. Install Pixel Perfect
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 Speed
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 Smush.it™ and JSLint. This is a top fully featured tool for analyzing your pages for load efficiency. Install YSlow
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 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 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?