How to create a HAR file in your browser

Sometimes, when debugging a networking issue with you, we might ask you for a HAR file.

A HAR file is your browser's own record of a page load. It lists every request the page made, how long each one took, what came back, and what failed. When something breaks for you and works for us, that file is the difference between us guessing and us seeing exactly what your browser saw.

Before you start

Three things decide whether the file is any use.

Open the developer tools before you reproduce the problem. The recording only holds requests made while the tools were open, so opening them afterwards gets you an empty file.

Use the browser and the device where it goes wrong. A recording from Chrome on your laptop says nothing about a problem that only happens in Safari on your iPad.

Record the one thing that's broken. Close your other tabs first if you can. Half an hour of general browsing is harder for us to read, and it puts more of your own data in the file than we need.

Chrome and Edge

The same steps work in Brave, Arc, Opera and Vivaldi, which all share the same developer tools.

1. Go to the page where the problem happens.
2. Press F12 to open the developer tools, or ⌥⌘I on a Mac.
3. Click the Network tab.
4. Tick Preserve log. Without it the list empties every time the page navigates, which loses exactly the requests you're trying to catch.
5. Tick Disable cache, so you get the requests a first-time visitor would make.
6. Reload the page, then do whatever triggers the problem. Rows fill the table as requests happen.
7. Click the download arrow at the top of the panel, Export HAR (sanitized), and save the file.

If that arrow is greyed out, nothing has been recorded yet. Reload the page with the Network tab open and try again.

Firefox

1. Go to the page where the problem happens.
2. Press Ctrl+Shift+E to open the Network Monitor, or ⌥⌘E on a Mac.
3. Tick Disable Cache in the toolbar.
4. Open the settings menu at the right-hand end of that toolbar (the gear icon) and tick Persist Logs.
5. Reload the page and reproduce the problem.
6. Open that gear menu again and choose Save All As HAR.

Safari

Safari keeps its developer tools hidden until you ask for them.

1. Open Safari → Settings → Advanced and tick Show features for web developers. A Develop menu appears in the menu bar.
2. Go to the page where the problem happens.
3. Press ⌥⌘I, or choose Develop → Show Web Inspector.
4. Click the Network tab.
5. Tick Disable Caches in the toolbar.
6. Click the funnel icon in that same toolbar and tick Preserve Requests, so the list survives a page navigation.
7. Reload the page and reproduce the problem.
8. Click Export at the top of the panel, or press ⌘S, and save the file.

Export stays greyed out until there's something to save. If it looks dead, reload the page first.

On a phone

You can't do this in the browser itself. Recording a HAR file on an iPhone, iPad or Android phone means plugging it into a computer and inspecting it from there, which is a developer's job rather than yours.

If the problem only shows up on your phone, tell us that and describe what you see. A screen recording is worth more to us than no file at all.

What's in the file

A HAR file is plain text. You can open it in any text editor and read what you're about to send.

It holds every URL the page asked for, the headers that went with each request, and how the server answered. That means it can also hold the session cookie that keeps you logged in, along with anything you typed into a form while it was recording.

Chrome and Edge strip the Cookie, Set-Cookie and Authorization headers out for you – that's what "sanitized" in the button name means. Firefox and Safari don't strip anything. So if you're recording your Ghost admin or the customer portal in Firefox or Safari, treat the file the way you'd treat a password: send it straight to us, and don't post it anywhere public.

Two habits make that a non-issue:

• Log in first, then start recording. Don't type a password while it's running.
• Stop as soon as you've reproduced the problem.

What to send us

The file, plus three things that save a round trip:

• the exact URL where it goes wrong
• what you did, and what you expected to happen instead
• whether it happens every time or only sometimes

Send it to help@magicpages.co. HAR files get big, so if your email bounces it back, zip it first.

While the developer tools are still open, a screenshot of the Console tab is worth adding. It's the tab next to Network, and red lines in there often point straight at the cause.

If the page won't load at all on a custom domain, that's the faster place to start:

Troubleshooting Custom Domain Setup Errors

Fix DNS errors, typos, and record type mistakes preventing your custom domain from connecting to your Magic Pages site.

Magic PagesJannis Fedoruk-Betschki