13 Must-Have Add-ons To Strengthen Firebug

Firebug LogoFirebug is probably one of the most helpful tools used when developing websites.

Specially, after JavaScript & Ajax became that much popular, it is hard to findout how we were developing & debugging without Firebug.

This great Firefox add-on, besides the ease of use & continious development by a talented team, has many features that make it a must-have like:

  • working inside browser, no need to switch apps.
  • being real-time, logging every request
  • ability to edit code & see results instantly
  • debugging JavaScript, measuring its performance & more..

It also has another feature, which is extendibility with help of Firefox add-ons.

There are various add-ons that can add more power to Firebug for creating better & faster. Here they are:

 

YSlow

YSlow Firebug Addon

YSlow is a Firebug add-on for analyzing web pages and getting suggestions on ways to improve the performance (parallel with the rules for high performance web pages).

YSlow grades web pages based on the predefined rulesets or a user-defined one . It also provides tools for performance analysis, including Smush.it™ and JSLint.

Page Speed

Firebug Page Speed

Very similar to YSlow, it is an add-on by the Google team for evaluating the performance of web pages and, best of all, getting suggestions (based on "Web Performance Best Practices") on ways to improve them.

Page Speed automatically optimizes images & provides compressed ones foruploading later.

It can also detect  JavaScript and CSS loaded that actually isn’t used for decreasing the total size of these files.

Pixel Perfect

Pixel Perfect

In order to easily find out how a fresh element will look with the design in general, Pixel Perfect enables web developers and designers to overlay a web composition over top of the developed HTML.

It is possible to toggle on/off any number of design elements to see if they fit well or not. And, with the opacity option, HTML below the composition can be viewed.

CodeBurner

CodeBurner

CodeBurner offers a reference panel with a search tool for looking up HTML elements, attributes, and CSS properties.

It also provides shortcuts to view information or code samples about a selected item.

FireUnit

FireUnit

FireUnit provides a simple JavaScript API for doing simple test logging – unit testing and viewing within a new tab of Firebug.

FirePHP

FirePHP

With the help of FirePHP, it is possible to log to the Firebug console by a simple PHP method call.

Data is sent via response headers & won’t interfere with the content on the page.

For any developer who got used to the Firebug interface , this extension is great for PHP debugging.

FireRainbow

FireRainbow - Firebug Syntax Highlighter

FireRainbow adds a better syntax highlighting support to Firebug & has theming support.

FireDiff

FireDiff

It adds a change monitor recording every change made, by Firebug and the website itself, to CSS and the DOM.

This provides a deeper look into the functionality of the website & helps keeping a record of the changes that were required to debug and tweak the page’s display.

Jiffy Firefox Extension

Jiffy

Jiffy Extension, using the Jiffy-Web, adds a new panel to Firebug & generates the visual view of the JavaScript time measurements. It can also output a print-friendly version of the report.

Hammerhead

Hammerhead

It enables you to measure the loading times of webpages.

The extension has support for multiple pages & can clear caches (disk & memory) with a click for a healthier result.

Firecookie

Firecookie

Firecookie, is a cookie viewer/manager that works inside Firebug.

For a faster development, when coding an application using cookies, the panel eases viewing the cookies & their values, expire dates, etc.

It is also integrated with the Net panel & displays both sent and received cookies.

Firefinder

Firefinder

Firefinder offers a way to quickly finding HTML elements matching mentioned CSS selector(s) or XPath expression.

It allows you to instantly test CSS selectors in the page while seeing the content at the same time, and matching elements will be highlighted.

It also shows a count of how many matches there are & lists all the matching ones in a collapsible list in the Firefinder panel.

LiveCoder

LiveCoder

LiveCoder extends Firebug by allowing developers to look at the Firefox chrome.

It is especially valuable to developers building add-ons. LiveCoder’s GUI lets you examine and modify the DOM of any Firefox add-on.

27 Comments
  1. Reply Ben June 9, 2009 at 7:35 AM

    awesome list, thanks!

    I installed CodeBurner, Firecookie und FireRainbow, the other ones are from my point of view not useful for me.

  2. Reply tenerife holidays June 9, 2009 at 7:54 AM

    oh man – this is a nice list of goodies thx

  3. Reply Derek June 9, 2009 at 7:56 AM

    You forgot one for ColdFusion developers. ColdFire http://coldfire.riaforge.com

  4. Reply Jerry June 9, 2009 at 9:11 AM

    Great list of some gems that I never knew about. Thanks for posting them.

  5. Reply Todd June 9, 2009 at 10:38 AM

    I previously installed Pixel Perfect but ended up never using it after going to Blueprint CSS. The rest of list is great though, thanks!

  6. Reply dlv June 9, 2009 at 11:12 AM

    excellent! i did’t know about come of this extensions… all are welcome
    thanks Umut

  7. Reply Adam June 9, 2009 at 12:03 PM

    Great post, thank you…

  8. Reply AJ June 9, 2009 at 1:16 PM

    Really cool list. Did not know about quite a few. Am gonna take a look at many of them.

    Thanks

  9. Reply Joffrey June 9, 2009 at 1:18 PM

    Where is Page Speed by Google?
    It’s a must now. 🙂

  10. Reply webmasterdubai June 9, 2009 at 1:42 PM

    nice firebug extensions , firebug it self nice extension for web developer, designers and also for web masters really thanks firebug and firefox developers.

  11. Reply Joel June 9, 2009 at 2:00 PM

    Really good one for .NET developers: FireAtlas http://fireatlas.chesnaistechnologies.com/

  12. Reply HiRes Squad June 9, 2009 at 2:02 PM

    Yeah this is a nice list of addons for an addon 😉

    For the wide-screen users amongst us: Widerbug http://www.command-tab.com/2008/01/19/widerbug-widescreen-firebug/
    displays the firebug-window on the side and you get more code in one view …

  13. Reply Jamal June 10, 2009 at 12:34 AM

    Thnx, now firebug is loaded and ready…

  14. Reply Tom June 10, 2009 at 1:46 PM

    the pixle perfect looks cool, defiantly going to check that one out

  15. Reply Umut M. June 10, 2009 at 3:03 PM

    Great to hear that the post was helpful to everybody.

    @Derek, @Joel & HiRes Squad,
    I’ll be adding the suggestions to the list as well, thanks very much.

    @Jofrey,
    Page Speed is already in the list.

  16. Reply Branson June 10, 2009 at 10:58 PM

    After falling in love with Firebug as well as YSlow year ago, im surprised that I havent seen any of the other ones on this list.

    Thanks for breathing new life into Firebug!

  17. Reply legco June 11, 2009 at 3:04 AM

    It’s seems the Yslow and Pge Speed – mutually exclusive things, enough of any one of them

  18. Reply Diego June 11, 2009 at 6:30 AM

    Ya estoy usando algunos de hace un tiempo y son fantasticos, lastima que en IE no haya cosas similares

  19. Reply tasarhane June 12, 2009 at 5:30 AM

    going to install FirePHP..
    interested.

  20. Reply Myfacefriends June 12, 2009 at 8:19 AM

    this is awesome collection list! thanks.

  21. Reply kuy June 13, 2009 at 8:35 AM

    I’ve registered “FirePalette” extension, provides simple color picker to Firebug’s CSS panel, to AMO.
    https://addons.mozilla.org/en-US/firefox/addon/12377

  22. Reply Module23 June 14, 2009 at 4:53 PM

    Never heard of the jiffy extension before, but it really works great in combination with firebug. Thanks for that great tip!

  23. Reply Mohammad Badi June 27, 2009 at 8:07 AM

    Thank you guys, really thanks for the great list ..
    I have downloaded everything and my Firebug working so cool.
    Thanks

  24. Reply Roman May 19, 2010 at 10:33 PM

    FireLinkReport – very useful Firebug add-on for on-page link analysis.

  25. Reply Eddie Jaoude June 2, 2010 at 7:09 AM

    If you are using yslow & pagespeed, then you can use PageShow, a free online portal to capture your results. This will give you benefit of historic results and comparison and W3c validation.

    The way it works is that yslow & pagespeed have a beaconing facility that sends the results to your private account on PageShow.

    Check it out, all feedback welcome…
    http://pageshow.jaoudestudios.com

  26. Reply Sony January 25, 2012 at 7:37 AM

    How could you forget http://cssUpdater.com ? With it you can save your FireBug CSS changes.

  27. Reply paid web directories November 14, 2012 at 12:17 AM

    Thanks…..nice and useful list of firebug addons. I searched for it in mozilla site but not able to find this much….

Leave a reply

Search