Debugging HTTP Communication with Firefox Extensions

Problem

You need to examine the raw HTTP traffic between a browser and your Rails application server. For example, you're developing features of your Rails application that use Ajax and RJS templates, and you want to examine the JavaScript returned to each XMLHttpRequest object.

Solution

Firefox has a number of useful extensions that let you examine the underlying HTTP communications between your browser and the server. One of these tools is Live HTTP Headers. This extension lets you open up a secondary window so you can see the HTTP communication in a Firefox window.

You can get Live HTTP Headers from and install the Firefox extension.

If Firefox tells you that the site is not authorized to install software on your computer, simply click Edit Options, which opens a dialog box in which you can specify what to allow. In this case, allow to install the extension by clicking Allow in the dialog box; then try again to install the extension. You'll have to restart the browser to complete the installation.

Once you have the extension installed, use it by selecting "Live HTTP headers" from the Tools menu in Firefox. This opens the output window; you can start watching your HTTP header traffic by selecting the Headers tab. Unfortunately, Live HTTP headers only lets you examine the headers of requests and responses. If you need to see the content of an XMLHttpRequest response, use FireBug.

Install FireBug directly from . Once the extension is installed and you've restarted Firefox, open FireBug by selecting Tools → FireBug → Command Line. This splits your current Firefox window into two parts. The lower portion opens to the FireBug console pane. To view XMLHttpRequest traffic in the Console tab, you have to make sure it's checked in FireBug's Options menu. Now when your application sends XMLHttpRequests to a server, you'll see each request in FireBug. Expand each one by clicking on the left arrow to view the Post, Request, and Headers.

Discussion

Before Firefox came along, with its many extremely helpful extensions, developers would use command-line tools such as curl or lwp-request to examine HTTP communication. But if you've ever tried sending an email using Telnet, you'll really appreciate how easy it is to do HTTP inspection with the Firefox extension in this recipe's solution.

shows a typical session in the Live HTTP Headers output window.

Figure 10-1. A Live HTTP Headers window showing HTTP traffic during a browser session

shows a Rails application that stores appointments entered into a database. When the user clicks "schedule it!," an XMLHttpRequest is initiated. This request can be seen in the FireBug Console tab.

Figure 10-2. The FireBug console tab showing XMLHttpRequest traffic

See Also