FireBug is a Firefox extension that include web development tools such as editor, debugger, error console, command line and inspectors for debugging. With FireBug, you can edit, debug and monitor CSS, HTML, Java Script, and Ajax live in any web page.

It is very convenient and easy to use, you can browse with Firefox and open the Firebug to begin working. The F12 key is shortcut key to open and close Firebug panel. Firebug gives you a quick way to find and inspect HTML elements. Hit the Inspect button, point your mouse at any part of the page, and Firebug unveils its place in the live HTML source. Firebug also lets you increase or decrease the size of its fonts.

The CSS tab shows you the full cascade of CSS rules that affect the style of the selected node. One quick glance at the CSS view solves the mystery of why something doesn’t look the way you expected it to.

Exploring Objects
An AJAX-ian web page never stands still. HTML nodes are constantly being created, modified, and removed by JavaScript. As changes occur, Firebug’s HTML view stays up to date in real-time and highlights the changes in yellow. When you see things moving and changing in a page, this gives you a quick way to learn how it was accomplished.

Pixel Perfection
Firebug helps visualize the previously invisible. When your mouse moves over anything that represents an HTML element in Firebug, the element’s rectangle in the page is highlighted, and its margin, border, padding, and content are each shaded a different color.

Experimenting and Tweaking
Firebug is not just an inspector, it’s also an editor. Virtually every object in Firebug can be edited inline just by clicking or double-clicking it. As you type, Firebug applies changes immediately, giving you constant feedback. All editors support auto complete. The CSS editor auto completes as you type, and the DOM editor auto completes property names when you hit the Tab key.

Network Activity
The core idea of AJAX is that small snippets of data will be fetched from the server using a channel called “XMLHttpRequest”, then used to update the page. Without Firebug, all that traffic is invisible. But with Firebug, you can observe the progress of each request and inspect the sent/received text.

Log Debugging
Firebug is not just a way for you to examine a page from the outside; it is also a place for you to send messages from within the page itself. To facilitate this, Firebug provides every web page loaded in Firefox with the console object that contains a number of functions for logging. As your script executes, you can fill the console with an ongoing stream of data for you to analyze.

Breakpoint Debugging
Firebug’s Script tab contains a powerful debugger that lets you pause JavaScript execution on any line. You can then step forward line-by-line to analyze how the state of the program changes in real time. Breakpoints need not be triggered indiscriminately; Firebug lets you specify the circumstances under which a breakpoint is triggered.

Profiling
console.time(”loading”); loadWidgets(); console.timeEnd(”loading”);

Firebug is a free download and an open-source project. You can get the latest release from https://addons.mozilla.org/firefox/1843/.