Firebug: Add Browser-based Debugging to Your Ajax Development
Given the important -- perhaps even indispensable -- role Ajax has come to play in offering an improved online experience, Web developers likely will spend an increasing share of time developing ever-more complex features. Creating sites capable of transparently communicating with the server without necessitating a page reload has evolved from something of a novelty to a crucial part of the modern Web environment. As a result, adopting efficient debugging best practices will become crucial to Ajax development.
As I mentioned, Firebug is a Firefox extension, meaning it runs within your browser. After you install the extension, you can enable it by pressing the
F12 button. This will cause Firebug to open at the bottom of your browser window, giving you access to its various features. Alternatively, you can open Firebug in a separate window by pressing
F12. When Firebug is enabled, you can begin using it to inspect your site.
Inspecting HTTP Communications
Figure 1 presents a screenshot of the HTTP communication flow as an Ajax-enabled Web page loads to my browser. The flow begins by loading the Web page, titled
battles.html. This page happens to be using Google's content distribution network to host the jQuery library, resulting in the next four communications. Finally, I clicked on a link in this page, which results in the
battles.php script being contacted.
Figure 1. Using Firebug to Monitor HTTP Communications: Here is a screenshot of the HTTP communication flow as an Ajax-enabled Web page loads.
Monitoring HTTP Payloads
Looking closely at Figure 1 you'll see plus signs (+) situated next to each HTTP communication. Clicking on a plus sign will produce a nested, tabbed interface that allows you to peer into that communication's headers, response, cache, and HTML. The application referenced in the previous section happens to be using JSON to transmit data between the
battles.php script has transmitted a JSON-formatted string back to the
Figure 2. Monitoring HTTP Payloads with Firebug: Using Firebug to peer into payloads is far more efficient than outputting the data.
If you're solely interested in examining communications made via XMLHttpRequest, click on the XHR tab located within the Firebug console. Doing so will highlight only communications made in this fashion, saving you the trouble of sorting through the list of unrelated communications.
For instance, we can use this feature to monitor how the battlefield information is sent from
battles.php back to
Using the arrow icons located at the top of the console, you can then begin stepping through the code, watching the results on the right side of the screen. In doing so, you can precisely determine -- rather than guess -- where exactly bugs are cropping up!