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!
Debugging PHP Code with FirePHP
Firebug has become such a widespread fixture within the Web developer’s toolbox that an extension ecosystem has begun to form (Think of it! Extensions for the extension!). If you’re a PHP developer, consider installing FirePHP, a Firebug extension that allows you to accompany HTTP payloads returned from a PHP script with debug information originating within PHP!
You install FirePHP just as you did Firebug, by browsing to the FirePHP site. You’ll also need to install the FirePHP PEAR class, which will allow you to insert FirePHP debugging syntax into your PHP scripts. Installation instructions are available on the FirePHP site.
When you have FirePHP installed, you can begin inserting log messages into your PHP scripts, as demonstrated here:
require_once('FirePHP.class.php'); $firephp = FirePHP::getInstance(true); $battles = array(); $battles = array ( "name" => "Shiloh", "date" => "April 6-7, 1862", "location" => "Hardin County, Tennessee", "latitude" => 35.1525, "longitude" => -88.323056 ); $firephp->log($battles, 'Battle #1');
Executing this script within the browser produces the log message in Figure 4.
Figure 4. Logging Array Contents with FirePHP: Here is the result of executing the above script within the browser.
Other Useful Firebug Extensions
In addition to FirePHP, I suggest taking a look at the Firebug’s other available add-ons, including:
- Firecookie: FireCookie adds a cookie management tab to Firebug’s interface, allowing you to easily examine the number and content of cookies stored by a particular website.
- YSlow: YSlow analyzes your Web page for performance issues and makes suggestions for improvement based on the result.
As a developer, your job is to create useful applications, not waste time with inconvenient code-debugging techniques. So why not make sure you have the best tooling available, starting with Firebug! If you use other tools for debugging website code, tell us about them in the comments!
About the Author
Jason Gilmore is the founder of EasyPHPWebsites.com. He also is the author of several popular books, including “Easy PHP Websites with the Zend Framework,” “Easy PayPal with PHP,” and “Beginning PHP and MySQL, Third Edition.”