Mozilla - HTTPLiveHeaders

Monitor Web site requests with Mozilla™s LiveHTTPHeaders extension

Tony Patton, TechRepublic

A client recently rang me up to find out why their Web site suddenly disappeared and another company's Web site appeared in its place. Mozilla's LiveHTTPHeaders extension was invaluable as I traced the Web site requests, ultimately providing the information I needed to solve the problem. Learn more about the LiveHTTPHeaders extension, and get a quick HTTP primer.

HTTP primer

A Web browser and Web server communicate via Hypertext Transfer Protocol (HTTP). The browser sends a request, and the server replies with a response. I'll show you a simple HTTP conversation so you can get a better idea of the process. First, I will view the TechRepublic.com site. A request is made:

GET / HTTP/1.1
 Host: www.techrepublic.com
 User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4

This request uses HTTP 1.1 to request the TechRepublic.com host; the Firefox 2.0 browser is used to make the request. The processing is transferred to the server, which sends the following response to the request for the TechRepublic.com site:

HTTP/1.x 301 Moved Permanently
 Date: Tue, 04 Sep 2007 14:45:59 GMT
 Server: Apache/2
 Location: http://techrepublic.com.com/
 Content-Length: 236
 Keep-Alive: timeout=15, max=867
 Connection: Keep-Alive
 Content-Type: text/html; charset=iso-8859-1

This response from the Web server provides a lot of information. One of the more important details is included in the first line of the response via the status code, which tells you the status of the request. A status code of 200 is the most common value returned -- it means that everything is okay. My example returns 301 -- this value means the Web site has been moved. The World Wide Web Consortium provides a comprehensive list of valid status codes.

The fourth line of the response gives the new location of the requested resource. The request includes more information that may be useful depending on the scenario. Notice that the third line of the response reveals the Web server being used (Apache). Since the site has moved to a new location, the request is redirected to the new site (techrepublic.com.com). The redirection generates a new HTTP request, as the following snippet demonstrates:

GET / HTTP/1.1
 Host: techrepublic.com.com

This request receives the following answer via another HTTP response header:

HTTP/1.x 200 OK
 Server: Apache

I have only included the first two lines of the response, but you can see that the HTTP status code is 200 for the request, signaling the request was successfully processed. While watching HTTP traffic, you will see requests for all resources used on a page. This includes graphic files, external style sheets, JavaScript libraries, Flash files, and so forth.

Now that you have an idea about the basics of HTTP, I'll explore the LiveHTTPHeaders tool, which allows you to take a peek at HTTP requests and responses.

LiveHTTPHeaders

LiveHTTPHeaders (http://livehttpheaders.mozdev.org/) is a free Mozilla extension that allows you to monitor HTTP traffic for Web requests; that is, you can easily watch browser requests as they are sent and the responses from the Web server. You are restricted to Mozilla-based browsers such as Firefox when using the extension.

After you download LiveHTTPHeaders with your Mozilla browser and it is installed, LiveHTTPHeaders is an option available in the Tools menu. You may run it in its own browser tab or via its own window. I prefer running it in its own window since it is easier to switch between the browser and another window or line them up side-by-side.

The tool's interface has these four areas:

• Headers: Provides the details of the HTTP request and response headers. A Clear button lets you quickly clear the window for a new

request. A Replay button allows you to perform the request again. A great feature is the ability to save HTTP header logs for later analysis or replay via the Save button. Headers is the main part of the tool.

• Generator: Provides a list of the requests made like post and get. You can filter the results to include or exclude images, redirects, CSS, invalid, and skipped requests. A Help button provides plenty of information on its proper usage. A Save button allows you to save the data. The data from the Generator may be used to feed load test tools. The Generator tool is an extension of LiveHTTPHeaders.
• Config: Allows you to set various configuration options, which includes specifying whether it is opened in a new tab or window. You may filter or exclude URLs from the data and use a style sheet for displaying the results.
• About: Provides product information including version and contributor details. Also, buttons link you to the product home page and allow you to easily check for updates.

A great feature of LiveHTTPHeaders is the ability to save HTTP header logs for later analysis or replay. A help window assists in finding out the correct options. When the tool is open, it generates data for any request made via the browser. However, you may disable/enable the capture of data via the Capture check box in both the Headers and Generator tabs.

Another interesting feature is the ability to modify requests. That is, you can modify the various pieces of information of requests such as the User-Agent string, language settings, or POST request data. This is a nice feature when debugging application behavior.

To solve my client's problem of the disappearing Web site, I was able to use LiveHTTPHeaders to trace an HTTP request for a Web site. The request was redirected twice, resulting in the wrong site being loaded. The problem was tracked down to a DNS change made the previous night by a member of the networking team.

Installing LiveHTTPHeaders with Firefox 2.0

The latest version of LiveHTTPHeaders is designed to work with pre-2.0 versions of Firefox, so it will not install as-is with Firefox 2.0. You can find a lot of information about installation workarounds online. I followed the instructions on the OraTransplant site (http://www.oratransplant.nl/2006/11/07/using-livehttpheaders-with-firefox-20/), and the tool worked with my Firefox 2.0 installation.

A useful tool

The LiveHTTPHeaders Mozilla extension is a useful tool for both Web developers and administrators. It provides an easy way to monitor HTTP activity and track down potential problems with Web requests. It is another tool to keep handy when those problems appear that require extensive analysis to resolve.

What tools do you use when tracking down Web application problems? Do you use the LiveHTTPHeaders tool? Share your experience and opinions with the Web development community.