Applicable Product:

Peoplefluent Learning

Applicable Release:

All

Summary:

When troubleshooting web performance issues, loading errors, or network bottlenecks, developers often rely on HAR files. But what exactly is a HAR file, and what valuable information does it contain? This article breaks down the contents of a HAR file and how to interpret its data.

Detailed Information:

What is a HAR File?

HAR stands for HTTP Archive. It is a JSON-formatted file that records a detailed log of a web browser’s interactions with a website. The file captures all network requests and responses, timing information, headers, cookies, and other useful metrics during the page load process.

Developers use HAR files to analyze how resources are loaded and pinpoint bottlenecks or failures.

Key Information Contained in a HAR File

1. Request Details

• URL: The full web address requested by the browser.
• HTTP Method: GET, POST, PUT, DELETE, etc.
• Headers: Includes request headers like User-Agent, Accept, Authorization.
• Query Parameters: Any parameters sent with the URL.
• Cookies: Cookies sent by the browser with the request.
• Post Data: For POST requests, the data payload sent to the server.

2. Response Details

• Status Code: HTTP response status (e.g., 200 OK, 404 Not Found, 500 Server Error).
• Response Headers: Server headers such as Content-Type, Cache-Control, Set-Cookie.
• Cookies: Cookies set by the server.
• Content: Response body (sometimes truncated in large files), including HTML, JSON, images, scripts.
• Redirect URL: If the response redirects, the next URL is logged.

3. Timing Information

HAR files provide detailed timing data for each request, useful for performance analysis:

• Blocked: Time spent waiting to start the request (due to browser limits).
• DNS Lookup: Time to resolve domain names.
• Connect: Time to establish the TCP connection.
• SSL/TLS: Time taken for secure handshake.
• Send: Time taken to send the HTTP request.
• Wait: Time waiting for the initial server response (TTFB - Time to First Byte).
• Receive: Time to download the response data.
• Total: Total time taken for the request and response cycle.

4. Page Load Events

• Page Timings: Includes when page started loading, DOMContentLoaded event, and page load event timings.
• Page References: Links each request to a specific page load event if multiple pages were recorded.

5. Resource Types

Each request is categorized by resource type, such as:

• Document (HTML page)
• Stylesheets (CSS)
• Scripts (JavaScript)
• Images (JPEG, PNG, SVG)
• Fonts
• XHR/Fetch requests (AJAX calls)

Why is This Information Useful?

• Performance Analysis: Identify slow-loading resources or long DNS lookups.
• Error Debugging: Spot 404 or 500 errors and understand failed requests.
• Security Audits: Check headers and cookies for security settings like HTTPS, CORS, or secure flags.
• API Testing: Examine request payloads and responses in detail.
• Regression Testing: Compare HAR files before and after changes to detect regressions.

How to Generate and View HAR Files

Most modern browsers can generate HAR files via Developer Tools:

• Chrome: Network tab → Right-click → Save all as HAR.
• Firefox: Network tab → Right-click → Save all as HAR.
• Edge: Similar to Chrome.

To analyze HAR files, you can use:

• HAR Analyzer tools like Google’s HAR Analyzer.
• Browser Developer Tools.
• Third-party tools like HTTP Archive Viewer.