By Joe McElroy

I cannot live without firebug when developing, and become a nessesory tool for all front end developers. Some tricks and plugins i use that some of you may not be aware:

1. CSS selector support on console via $ and $$

Ability to select html elements via the console by these methods. Its similar in use to mootools and prototype html selector engine.

2. yslow

YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. 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

3. firecookie

Firecookie is an extension for Firebug that makes possible to view and manage cookies in your browser. Logs also in your firebug console when a cookie has been changed. Very useful to diagnose a cookie problem

4. script debugging

be able to insert breakpoints, inspect the call stack, add watch expressions etc. Extremely useful to diagnose javascript problems. Has shortcut keys such as step over is f1.

5. Net Component

Net allows you to see how many external files (such as javascript script files and css stylesheets) have been included onto the page, with details on each file (such as response headers)

6. Element Selection

ability to see what css has been applied to the html element by the inspector. You can also adjust these css properties by the style tab or layout tab.

7. firefinder

Finds HTML elements by using CSS selectors or XPATH expressions. Possibly a useful plugin but i hardly use it as $$ supported by firebug console is excellent. Xpath selection is useful however.

8. fireunit

See more information from our friend john resig: http://ejohn.org/blog/fireunit/