A few weeks back, Professor Lefkovitz asked me to help him diagnose a problem with a web app. The issue involved the communication between a browser and an AJAX web service used for authentication. The initial struggle was trying to find an easy and elegant way of viewing the AJAX request and response. The answer was simple: Firebug to the rescue! After seeing Firebug in action, I was asked to prepare a short lecture and demonstration of Firebug so that my classmates can benefit from this tool. My notes and demo follow below.
Yes you can!
Firefox has a pretty awesome plug-in engine. To get Firebug, simply go to getfirebug.com and click the "Install Firebug for Firefox" button in the upper-right hand corner of the page. Easy!
You'll notice that you have a new icon in the lower-right hand corner of the Firefox window after restarting the browser. This button toggles the Firebug display. By clicking on this button, you can toggle the Firebug view on and off. When you toggle the window on, you'll get something that looks like this:
You'll notice that there are 6 tabs along the top: console, HTML, CSS, script, DOM, and net.
Similar to the HTML panel, this view allows you to see how your CSS rules are interpreted and applied. You can turn off individual rules, add rules, or modify rules on-the-fly. You can even see which rules supersede other rules and which rules are superseded. This is really useful for testing changes in CSS without having to go through the write-save-reload-view process. You can change the CSS within the browser and view the changes without having to constantly switch windows.
In order to help show off some of Firebug's features, I decided to make up an example to show some of the potential uses. Some of the exercises are in text, while others will be verbally stated. This file probably won't make too much sense unless you're in class to see the demo.
Feel free to leave comments or to ask questions!