LanguagesJavaScriptFirebug: Add Browser-based Debugging to Your Ajax Development

Firebug: Add Browser-based Debugging to Your Ajax Development

Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

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.

Of all the Web debugging tools available, perhaps none is as indispensable as the Firefox extension Firebug. It gives you the ability to inspect, debug, monitor and modify practically every characteristic of your website (ranging from CSS to JavaScript and even network communications) as your Ajax feature executes. Firebug truly is an omnipresent friend you’ll look to time and again. In this article, I introduce you to Firebug, focusing specifically on the features that will greatly streamline your Ajax development process.

Using Firebug

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 Ctrl + F12. When Firebug is enabled, you can begin using it to inspect your site.

Inspecting HTTP Communications

Ajax updates often contain information retrieved from a script running on the server side, and therein lies the difficulty. The developer doesn’t actually see this interaction first hand, so it’s difficult to peer under the covers of the application and even determine whether the client-side JavaScript is properly communicating with the server.

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.

So by using solely this Firebug feature we’ve been able to ascertain that the HTTP communications flow is occurring as expected; the Web page loads, followed by the inclusion of the jQuery library, followed by the successful interaction with the server-side script when the appropriate JavaScript mechanism initiates. Now, suppose that the page did not update as expected, or wasn’t rendering precisely as you had intended it to. You can continue using Firebug to delve even deeper into the communications process and even determine exactly the contents of the HTTP payloads sent between the client and server.

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 and battles.html scripts in a format that both the PHP and JavaScript languages can understand. In Figure 2 you can see that the battles.php script has transmitted a JSON-formatted string back to the battles.html script, including the names, dates, locations, latitudes and longitudes of several Civil War battles. Using Firebug to peer into these payloads is far more efficient than attempting to output the data using a JavaScript alert box!


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.

Debugging Your JavaScript

Even with the availability of fantastic JavaScript libraries such as jQuery, many Web developers will freely admit an aversion to JavaScript syntax. My guess is this aversion largely is rooted in historical frustrations in debugging client-side code. Firebug goes a very long way towards alleviating these difficulties by allowing you to assign breakpoints to JavaScript code and step through the execution on a line-by-line basis. This can be extremely useful when attempting to decipher how JavaScript is interacting with data sent via a server-side script.

For instance, we can use this feature to monitor how the battlefield information is sent from battles.php back to battles.html by assigning a breakpoint at an appropriate location and then executing the JavaScript code by interacting with the Web page (see Figure 3). Execution will stop at the line identified by the breakpoint, at which point you can monitor exactly what JavaScript is doing with the returned JSON, as demonstrated in the right side of Figure 3.


Figure 3. Debugging JavaScript in Real-time:
Firebug allows you to assign breakpoints to JavaScript and step through the execution line by line.

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.

Conclusion

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.”

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories