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 :

• – What do u do if u don’t have sense of art in designing a website
• – Miabebo Shop: Nursing Covers & Diaper Bags
• – Google Hack on Document
• – Toko Dephe Site Launch
• – Google hack query Summary (yes, another one… )