April 23, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Firebug: Add Browser-based Debugging to Your Ajax Development

  • April 30, 2010
  • By Jason Gilmore
  • Send Email »
  • More Articles »

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!


Tags: JavaScript, Ajax, Firefox, debugging, Firebug



Page 1 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel