Skip to content

Analyzing the HAR in the browser (alternative)

This is the second option for analyzing a HAR — an alternative to the Postman workflow if you'd rather not leave the browser. The browser's DevTools can load a HAR back into the Network panel and let you inspect it exactly as if you had just captured it: the same request list, filters, and request/response viewers.

It does the same three jobs as the Postman chapter — find the request, read the body, note the URL. Everything downstream (Custom Data Type, Application) is identical regardless of which tool you used to look.

When does this help? When the HAR came from someone else and you want to step through it with the familiar Network panel, or when you don't have Postman handy. Either tool is fine.

Import a HAR into Chrome / Edge DevTools

  1. Open DevTools (F12) → Network tab.
  2. Drag the .har file onto the Network request list — or click the ⬆ Import HAR (up-arrow) icon in the Network toolbar and pick the file.
  3. The panel repopulates with every request from the capture. Browse it like a live recording.

Import a HAR into Firefox DevTools

  1. Open DevTools (F12) → Network tab.
  2. Open the ⚙ gear / settings menu in the Network toolbar (or right-click the request list) → Import HAR File… and pick the file.
  3. The requests load into the panel for inspection.

Keep it local

Loading a HAR back into your own browser is local and safe. Avoid pasting HAR contents into public/online HAR viewers — they contain live tokens and customer PII.

Step 1 — Find the request

In the repopulated Network panel:

  1. Click the Fetch/XHR filter to hide images, fonts, and CSS — what's left is the API calls. The request you want is almost always a POST/PUT/PATCH (for sends) or a GET returning JSON (for lists you want to mask).
  2. Type a hostname or path fragment into the filter box to narrow further (e.g. graphql, /v1/users). You can also filter method:POST.
  3. For GraphQL, click a candidate → Payload (Chrome) / Request (Firefox) tab — the operationName (e.g. ApplyDiscount) names the operation directly. All GraphQL goes to the same /graphql URL, so the body is how you tell operations apart.
  4. Ignore noise — analytics/telemetry hosts (segment, datadog, sentry, google-analytics). A clean single-action capture leaves only a handful of real candidates.

Step 2 — Read the body

Select the request and use these tabs:

What you want Chrome / Edge tab Firefox tab
Request body (sends) Payload (toggle view parsed / view source) Request
Response body (receives) Response (or Preview for a formatted tree) Response
Content type / headers Headers Headers

The Preview tab (Chrome) renders JSON as an expandable tree, which makes walking the key path easy. Firefox's Response tab pretty-prints JSON the same way. Compressed responses are decoded for you automatically — another reason the browser is convenient for response-side work.

Step 3 — Read the shape & note the URL

Same as the Postman chapter — once you can see the body tree, answer the three questions:

  1. What uniquely identifies this request? (an action field, operationName, the path) → the condition / anchor of your Data Type.
  2. Where exactly does the value live? (record.discount.amount, results[].properties.email) → the traversal.
  3. Single value, repeated object, or array of values? → decides whether you need an Array node.

Write the path in plain English, then grab the URL (request bar) and method (Headers tab) for the Application.

Continue to Custom Data Types →.