Radhoo.com

Firebug is a free plugin that you can install on FireFox and will help you debug and work with your code live (on the browser). The tool was developed by Joe Hewitt and Rob Campbell. The latest Firebug version (1.4) requires FireFox 3.0 or higher.

Features of Firebug:

1. You can see exactly what dimensions there are on your site, what font, what color (HEX) and edit your CSS directly from Firebug.
2. It contains a JavaScript debugger. You can pause the execution of you scripts at any time and find out how exactly they work;
3. Firebug detects errors in your JavaScript, CSS, and XML code;
4. Can monitor your network activity and tune your JavaScript for a best loading time;
5. You can inspect and edit (live) your HTML code;

List of useful shortcuts for Firebug:

• Open/Close Firebug Panel – F12;
• Focus Command Line – CTRL + Shift + L;
• Focus Search Box – CTRL + Shift + K;
• Re-Execute Last Command Line – CTRL + Shift + E;
• Switch to Previous Tab – Ctrl+`;
• Toggle Inspect Mode – Ctrl+Shift+C;
• Toggle JavaScript Profiler – Ctrl+Shift+P;

You can get Firebug from here.