What is Firebug?

Firebug is an add-on for the Firefox web browser. Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page...

Is Firebug only for Firefox?

The add-on will only work in Firefox, but there is also a JavaScript based Firebug Lite version for use with Internet Explorer (IE), Opera, and Safari.

Where can I get Firebug?

Tutorials

And for those of us who prefer viewing to reading, there's a bunch of tutorial videos on YouTube.

Debugging AJAX with Firebug

Once installed, Firebug can show you the XMLHTTPrequests that happen in the background as AJAXy things occur and also what data is returned. This is pretty handy if you find that the requests are failing for no reason you can discern.

To make the most of this, it's important to make sure that the data being sent by the server is properly encoded and has the right headers. The most efficient way to do this is to use JSON for the response, rather than XML (fewer characters used to represent stuff, so faster to download) and to do so using PHP's native json_encode() function. This will make firebug show you the response in a lot more detail than if you just echoed the data as XML fragments.

To watch the XMLHTTPrequests, enable firebug, click on the Net tab and enable that too, then click on the XHR button. Now, anything that happens will show up in Firebug. To see the response data from the server, expand the line for that request using the + icon on the left, then click on the response tab. This shows the raw data but you should also have a JSON and/or HTML tab which will allow you to see it properly formatted.

Inline Code Finder for Firebug

FlashFirebug

FlashFirebug: Debug your own SWF files inside the browser. Edit properties and inspect elements like you do to HTML. Flash files are no longer the closed components they used to be. This extension requires Firebug and the O-Minds Flash package.

FireFile

FireFile: Firebug extension to save the CSS files edited with firebug live to your web server. That makes Firebug become the first remote-save live-preview CSS editor and allows ultra-fast webdesign.