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.


ElegantThemes
ThemeForest

Advertisement

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

image

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

image

Firefinder

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

image

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.

image

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:

image

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

image

FireRainbow

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

image

CodeBurner

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

image

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.

Firepath

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

image

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

image

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

image

Firepicker

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

image

Firecookie

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

image

HttpFox

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?

image

{ 8 comments… read them below or add one }

Nikunj January 22, 2011 at 5:32 pm

Awesome I did not know even firebug has addons in it thanks for sharing this list :)

Reply

RSK January 22, 2011 at 5:10 pm

Thankz alot for sharing.
Firebug makes my life(Debugging) easier ;)

Reply

good stuff September 27, 2010 at 9:02 pm

Nice set out. Can’t live without firebug!!

Reply

MAB911 August 24, 2010 at 11:39 am

nice post really informative!!!

Reply

ein search July 20, 2010 at 5:31 am

thanks for posting and my back link.

Reply

silviya March 20, 2010 at 11:19 pm

Thanks!

Reply

social network web development March 18, 2010 at 1:59 pm

Another quality and informative post. I agree with your views completely

Reply

Mark Rathbun March 17, 2010 at 5:28 am

Great post :)

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

{ 9 trackbacks }

Previous post:

Next post:


Web Analytics