Awesome Extensions for Your Firebug

Firebug, an add-on for Firefox browser, is an awesome tool for web development. It can inspect and tweak HTML page and CSS in real-time, so you can see temporary changes that are made to the page in that moment without refreshing the page. It also has an advanced JavaScript debugger; you can see the full Firebug features here

This article is about further extensions for Firebug, which can extend Firebug from its basic feature for web development by installing additional extensions (that is also a Firefox add-on). If you’re still new in what is Firebug and how to use it, there is an extensive tutorial here at Makeuseof about “Amateur’s Guide To Customizing Website Design With Firebug”.

Here are a couple of its popular extensions, which I use in day to day basis:

YSlow

Among other extensions for Firebug, the most popular one, are developed by Yahoo! inc Company. YSlow analyzes web pages and why they’re slow based on Yahoo!’s rules for high performance web sites. The rules are

  1. Minimize HTTP Requests
  2. Use a Content Delivery Network
  3. Add an Expires or a Cache-Control Header
  4. Gzip Components
  5. Put StyleSheets at the Top
  6. Put Scripts at the Bottom
  7. Avoid CSS Expressions
  8. Make JavaScript and CSS External
  9. Reduce DNS Lookups
  10. Minify JavaScript and CSS
  11. Avoid Redirects
  12. Remove Duplicate Scripts
  13. Configure ETags
  14. Make AJAX Cacheable
  15. Use GET for AJAX Requests
  16. Reduce the Number of DOM Elements
  17. No 404s
  18. Reduce Cookie Size
  19. Use Cookie-Free Domains for Components
  20. Avoid Filters
  21. Do Not Scale Images in HTML
  22. Make favicon.ico Small and Cacheable

It ranked (like A, B, C, D) your website for performance based on three predefined rulesets:

  1. YSlow(V2) – this ruleset contains the 22 rules listed above.
  2. Classic(V1)- this ruleset contains the first 13 rules listed above.
  3. Small Site or Blog- this ruleset contains 14 rules that are applicable to small web sites or blogs.

Note, the tools that are available in YSlow are also really useful, like JSlint a JavaScript code quality tools; YUI CSS compressor, Yahoo own tools that minifies CSS and including one of my favorite image compressors, Smush.it. It compresses image size so it became smaller without any loss of quality and thus makes the web load faster because of it smaller size.
You can install the YSlow extensions here and the full guide for the extensions here .

SenSEO

This extension analyzes web pages and tells you how good they fulfill on-page Search Engine Optimization criteria. It gives you

  • Overview of SEO-important web page components
  • Analysis of on-page-SEO-criteria
  • In the newest version SenSEO (1.4.3 in the time of writing) checks
    Correct usage of Document-Title, Meta-Description and Meta-Keywords
  • Headlines, Domain and URL-Path
  • Other general content-criteria

As you can see in the screenshot, it shows all of the component that are needed for search engine optimization, from h1 to h6, meta description and keyword, the alt attribute in images and it even show how the search engine read the website trough visible content.
You can install the extensions from here.

There are others popular extensions like Flashbug (displays all the running .SWF file trace output), FireQuery (plugin for jQuery development), you can see it at “Firebug Extensions add-on page”, The extensions is ranked by its popularity and the complete list is in the official “wiki for list of all Firebug extensions.”.

u may also like this :

Leave a Reply

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