Learn HAR Analysis
1. Intro / What is HAR?
A HAR file (short for HTTP Archive) is a log of everything your browser does on the network while loading a web page. Think of it as the “black box recorder” for your browsing session — every request to a server, every response, every delay is written down inside.
It exists because modern websites are complex. A single page might trigger hundreds of requests: HTML, JavaScript, CSS, fonts, images, API calls, ads, tracking pixels. If something feels slow or broken, a HAR file shows exactly where the problem lies — whether it’s a sluggish server, a redirect loop, or a script that blocks everything else.
Technically, a HAR is just a big JSON file. Open it in a text editor and you’ll see structured data with entries like url, status, timings, and more. For a human, it looks overwhelming — lines upon lines of requests — but for tools it’s gold: a complete timeline of how your page loaded.
2. When to use HAR files
HAR files are most useful when something about a web page feels off — slow loading, broken images, failed logins, or just a mysterious spinner that never ends. They act like a detective’s notebook, showing you exactly what the browser tried to do and how long each step took.
You might use a HAR file when:
- Diagnosing performance issues – find out if a slow page is caused by the server, too many redirects, or heavy JavaScript files.
- Debugging network errors – see which requests failed, timed out, or returned errors like 404 or 500.
- Analyzing third-party impact – spot ad scripts, analytics trackers, or embedded widgets that delay the rest of the page.
- Checking API calls – capture the exact requests your app makes, including headers, payloads, and responses.
- Working with support teams – many SaaS providers ask for a HAR file when you report a bug. It gives them a reproducible view of what your browser experienced.
3. How to generate a HAR file
Creating a HAR file is built right into your browser. It only takes a minute, and you don’t need any special tools.
Chrome / Edge / Brave (Chromium browsers)
- Open the page you want to capture.
- Press F12 (or right-click → Inspect) to open DevTools.
- Go to the Network tab.
- Check that the red ● record button is active (click it if not).
- Refresh the page to capture everything from the start.
- Let the page fully load.
- Right-click anywhere in the network request list → Save all as HAR with content.
Firefox
- Open the page.
- Press F12 to open DevTools.
- Switch to the Network tab.
- Make sure recording is enabled (red dot).
- Refresh the page and wait until it loads completely.
- Right-click in the list → Save all as HAR.
⚠️ Tips & common mistakes
- Always start capturing before refreshing the page.
- Don’t switch tabs mid-capture; browsers may pause recording.
- HAR files can contain sensitive data like cookies or request payloads. Share them only with trusted people or tools.
4. How to read a HAR file manually
Open a HAR file in a text editor and you’ll see a huge JSON object. Each entry represents a single request your browser made. The most important fields are:
- url – the address requested.
- status – HTTP status code (200 OK, 404 Not Found, etc.).
- timings – how long each phase took: DNS lookup, connection, waiting for server, content download.
- request / response – headers, payloads, and body details.
Many tools also show a waterfall chart: a timeline of all requests stacked vertically. Each bar shows how long a file took to load, making it easier to see bottlenecks at a glance.
Without a viewer, HAR files look messy. With one, they reveal the exact moment where performance goes sideways.
5. Common issues visible in HAR files
Here are patterns you’ll often uncover in HAR analysis:
- Slow server response (high TTFB) – server takes too long to reply.
- Large media files – images or videos not optimized.
- Redirect chains – too many hops before reaching the final page.
- Blocking JavaScript – scripts that delay rendering of the page.
- Failed requests – 404s, 500s, timeouts.
Spotting these in HAR files helps developers fix what’s slowing things down.
6. Tools for HAR analysis
You can analyze HAR files in several ways:
- Browser DevTools – Chrome and Firefox can re-open HAR files in the Network tab.
- HAR Viewer / command-line tools – open-source utilities to parse and visualize HAR.
- Online tools – like har-analyzer.dev, which gives you instant charts, breakdowns, and filters without touching raw JSON.
7. Step-by-step example
Let’s say a user complains: “The checkout page is super slow.”
- Generate a HAR while loading the checkout page.
- Open it in an analyzer.
- You notice one request to /api/cart took 4.2 seconds while everything else was fast.
- That points to the backend cart service as the bottleneck.
HAR files make invisible delays visible. Instead of guessing, you get hard evidence.
8. FAQ
- Do HAR files contain passwords? – Sometimes they may contain tokens or form data. Always sanitize before sharing.
- How large can a HAR be? – Depends on the session; big pages with many requests can create 10MB+ HAR files.
- Is it safe to share? – Only with trusted developers or support teams, since it may contain private data.