How to Export and Inspect HAR Files in Google Chrome DevTools for Network Debugging

Diagnosing complex web application bugs, third-party API timeouts, or intermittent asset loading errors often requires capturing the complete waterfall of HTTP requests and responses. The HTTP Archive (HAR) format is the standard JSON-based container used across the web development industry to log HTTP interactions. A HAR file records timing metrics, request headers, query strings, cookies, status codes, and server response payloads.

Google Chrome DevTools provides native tools to record, export, and re-import HAR files directly within its Network panel. This capability allows developers, QA engineers, and IT support teams to capture live session data from an end-user machine and replay the network trace on another system without reproducing the local environment. If you frequently inspect and troubleshoot web performance in Chrome, you may also find our tutorials on inspecting WebSocket messages and frames in Chrome DevTools and evaluating colour contrast in Chrome DevTools helpful.

Recording Network Activity in Chrome DevTools

Before capturing a clean HAR file, prepare Chrome DevTools to ensure complete logging without truncation:

1. Open Google Chrome and navigate to the webpage you wish to record.
2. Press F12 on Windows/Linux or Option + Command + I on macOS to launch DevTools.
3. Click on the Network tab in the top navigation bar.
4. Ensure the red recording button in the top-left corner is illuminated (click it to start recording if it is grey).
5. Tick the Preserve log checkbox. This ensures network requests are not erased if the web page undergoes redirects or page reloads.
6. Optionally, tick Disable cache while DevTools is open to guarantee assets are fetched fresh from origin servers rather than local disk cache.
7. Reload the webpage or execute the user workflow (such as logging in or submitting a form) that reproduces the performance bottleneck or error.

Exporting Network Traces as a HAR File

Once the network activity has been recorded across the waterfall, export the trace to disk:

1. In the Network panel toolbar, locate the downward-pointing arrow icon labelled Export HAR… (or secondary-click anywhere in the network request table and choose Save all as HAR with content).
2. Chrome prompts you to select a destination directory and filename.
3. Choose a secure location and click Save.

Selecting “Save all as HAR with content” bundles the full decoded response bodies (including JSON API responses, HTML payloads, and image binaries) into the archive, making it significantly more useful for root-cause diagnosis.

Sanitising Sensitive Authentication Data

Because HAR files capture raw HTTP headers and request bodies, they may inadvertently contain sensitive data such as session cookies (Set-Cookie), authentication bearer tokens (Authorization: Bearer ...), API secrets, and personal form inputs. Chrome DevTools includes built-in sanitisation controls:

• When clicking the Export HAR dropdown arrow, select Export HAR (sanitised)… where available to automatically strip sensitive authentication tokens from outgoing request headers.
• Alternatively, open the exported .har file in a text editor or code IDE and perform a find-and-replace to redact corporate session IDs and passwords before sharing the file with external vendors or support ticketing systems.

Importing and Analysing a HAR File in Chrome

To inspect a HAR file supplied by a client or colleague:

1. Open a fresh tab in Google Chrome and press F12 to open DevTools.
2. Switch to the Network tab.
3. Click the upward-pointing arrow icon labelled Import HAR file… in the toolbar (or simply drag and drop the .har file from your desktop directly into the Network panel).
4. Chrome recreates the original network waterfall, allowing you to filter by resource type (Fetch/XHR, JS, CSS, Media), inspect timing breakdowns (DNS Lookup, Initial Connection, SSL Handshake, TTFB), and audit response headers exactly as if you performed the session yourself.