HTTP Archive Viewer @VERSION@

Author: Jan Odvarko, odvarko@gmail.com

The purpose of this online tool is to visualize HTTP Archive (HAR) log files created by HTTP tracking tools. These files contain log of HTTP client/server conversation and can be used for an additional analysis of e.g. page load performance.

User interface of this tool is composed from the following tabs:

  • Home - Paste content of a log file into the text box in this tab.
  • Preview - Switch to this tab if you want to see visualised HTTP traffic.
  • HAR - Use this tab to see structure of the input JSON data as an expandable tree.
  • Schema - Explore format of the input log in this tab.

Links

Home Page (donate): http://www.softwareishard.com/blog/har-viewer/

Feedback: http://groups.google.com/group/http-archive-specification

Report issue: http://code.google.com/p/harviewer/issues/list

HAR Viewer Customization: http://code.google.com/p/harviewer/wiki/Customization

Create HARs using Firebug

One of the tools you can use to log data transfered over HTTP protocol is Firebug. To do this you have to also install Firebug extension called NetExport.

HTTP Archive Specification

Required structure of the input HTTP Archive file (*.har) is described using JSON Schema. You can explore the current schema definition within the Schema tab on this page.

Request Timing Fields

Part of the HTTP log is also a timing info about network request executions. Here is a description of individual request/response phases:

  • Blocking - Time spent in a queue waiting for a network connection.
  • DNS Lookup - DNS resolution time. The time required to resolve a host name.
  • Connecting - Time required to create TCP connection.
  • Sending - Time required to send HTTP request to the server.
  • Waiting - Waiting for a response from the server.
  • Receiving - Time required to read entire response from the server (or cache).

Online Log Files

HAR Viewer also supports JSONP and so, it's possible to load log files from different domains. This allows linking your online logs and preview them automatically within the viewer. See live example.

1. The Content of a *.har file must be enclosed within a callback function:

onInputData({ "log": { ... } })

2. The link displaying a *.har file (using this viewer) must specify URL of the file in inputUrl parameter:

http://www.softwareishard.com/har/viewer/?inputUrl=http://www.example.com/netData.har

3. A custom name of the callback function can be specified in a callback parameter (by default it's onInputData):

http://www.softwareishard.com/har/viewer/?inputUrl=http://www.example.com/netData.har&callback=onInputData