Browser optimize

Monitor Web site requests with Mozilla's LiveHTTPHeaders extension

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. Learn more about the LiveHTTPHeaders extension, and get a quick HTTP primer.

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://www.techrepublic.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 (http://www.techrepublic.com). The redirection generates a new HTTP request, as the following snippet demonstrates:

GET / HTTP/1.1
Host: http://www.techrepublic.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 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, 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.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.

---------------------------------------------------------------------------------------

Get weekly development tips in your inbox
Keep your developer skills sharp by signing up for TechRepublic's free Web Development Zone newsletter, delivered each Tuesday. Automatically subscribe today!

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

4 comments
Justin James
Justin James

... than the way I have always done it, which was to telnet to port 80 and emulate a browser, hoping to find the problems myself. :) J.Ja

aspatton
aspatton

Great to hear that it now works in Firefox 2.0 without any problems. Thanks for the update.

ratt2581
ratt2581

I prefer Fiddler over LiveHttpHeaders (I do use both) but Fiddler (2) is more customizable and I think has a cleaner interface. I do use LiveHttpHeaders though when I just want to quickly view some responses though. Both are valuable tools