Skip to content
Marvin's Toolbox.

HAR Viewer

Drop a HAR export from your browser's network tab and see every request on a waterfall timeline. Inspect status codes, timings, sizes, headers and payloads, filter by type or URL, and spot the slow requests at a glance.

Runs entirely in your browser. Nothing you put in here gets uploaded.

Load a HAR file

Drop a HAR file here

Record it in your browser's devtools network panel, then right-click the request list and choose Save all as HAR.

A small synthetic page load, generated locally so you can try the viewer.

About the HAR Viewer Tool

This tool opens a HAR file and lays its requests out on a waterfall timeline. Drop in an export from your browser's network panel and you see every request with its method, status, type, size and duration, plus a bar showing exactly where the time went: blocked, DNS, connect, TLS, send, wait and receive.

Click any request to inspect it in full, with request and response headers, query parameters, cookie counts, body previews and the timing breakdown as numbers. A Load example button fills the viewer with a small generated recording so you can try it without exporting anything first.

What you can do

  • Open a .har file and see every request on a waterfall timeline.
  • Find the slowest requests by sorting the table by duration or size.
  • See where a request's time went, split into blocked, DNS, connect, TLS, send, wait and receive.
  • Check how much data a page transferred, compressed and uncompressed.
  • Filter requests by resource type or by a URL substring.
  • Inspect request and response headers, query parameters and body previews.
  • See the DOMContentLoaded and load events as markers on the waterfall.
  • Spot failed requests, redirects and cache hits at a glance.
  • Go through multi-page recordings one page at a time.

How to use the HAR Viewer

  1. 1Record a HAR: open your browser's devtools on the Network panel, load the page, then right-click the request list and choose Save all as HAR.
  2. 2Drop the file into the tool, or press Load example to try it with sample data.
  3. 3Read the overview stats, then scan the waterfall for long bars and late starts.
  4. 4Narrow the table down with the type chips, the URL filter and the sortable columns.
  5. 5Click a request to see its headers, payload, response preview and exact phase timings.

What a HAR file is

HAR stands for HTTP Archive, a JSON format every major browser can export from its network panel. It records each request and response of a page load, with timings, headers, cookies and often the bodies. That makes it the standard way to hand a performance problem or a flaky API call to someone else, and the format this tool reads.

Be careful when sharing HAR files. They can contain cookies, session tokens and personal data from the recorded site, so strip or redact them before attaching one to a public bug report. Since a HAR file is plain JSON, you can also open it in the JSON Inspector to explore the raw structure, and take a single request's address apart with the URL Parser.

Reading the waterfall

Each bar starts where the request started and is split into colored phases. Blocked is time the request spent queued, waiting for a free connection. DNS, connect and TLS only appear on fresh connections, repeat requests to the same host skip them. Send is the upload, wait is the time to the first response byte, and receive is the download itself.

A long wait phase points at a slow server or a slow database behind it. A long blocked phase means too many requests competed for connections at once. Long receive phases mean large responses, which the size column confirms. The dashed vertical lines mark the page's DOMContentLoaded and load events, so anything far to their right loaded after the page was already usable.

Limits

The viewer can only show what the export contains. Some browsers omit response bodies or exact byte counts, and requests that were still running when you saved the file may carry incomplete timings. Body previews are capped at 10,000 characters and binary bodies are not rendered, though they stay untouched in the file itself.

Related tools

Tools that share a tag with this one.

Code Formatter

Format code in JavaScript, TypeScript, JSON, JSON5, HTML, Vue, CSS, SCSS, LESS, Markdown, YAML, GraphQL, XML and SQL. Pick tabs or spaces, set the indent width, and format the input in place with one click.

devtextjsonyaml

Config Converter

Convert config and data between JSON, YAML, TOML, JSON5, INI, XML, CSV and .env. Type or paste on the left, pick the output format on the right, and copy the result. Includes a format button and a minify toggle.

devconverterconfigjsonyaml

Fake Data Generator

Generate realistic fake data for testing: names, emails, addresses, phone numbers, companies, internet data, dates and more. Tick the fields you need, set how many rows you want and a locale, then copy or download the result as JSON, CSV or plain text.

devjson

jq Playground

Run real jq filters against JSON in your browser. Write a filter, pass options like slurp or raw output, browse a built-in cheat sheet of common filters, and copy the result or send it to another tool.

devjson

JSON Diff

Compare two JSON documents by structure and see every added, removed and changed key and value with its exact path. Browse the result as a tree, a filterable change list or a line diff, ignore array order, catch type changes and export the changes as a JSON report.

devjson

JSON Inspector

Paste JSON to explore it as a collapsible, searchable tree, hide the fields you don't need, and see the structure it implies as a badge-annotated schema and a copyable TypeScript interface.

devjson