DEV Community

Branch42 Labs profile image Parth V Square
Parth V Square for Branch42 Labs

Posted on Originally published at netraptor.dev

Chrome's Network tab keeps clearing on reload. Here's how to stop it

#webdev #chrome #devtools #debugging

TL;DR: In Chrome DevTools, open the Network panel and tick Preserve log. Requests then survive reloads and redirects. They still vanish when you close DevTools, anything before DevTools opened is missing, and every page load lands in one unlabelled list. In Firefox the option is Persist Logs, under the gear icon in the Network Monitor.

The problem

You're debugging a login. The form posts, the server redirects, and the request you needed is gone. Chrome's Network panel clears its list every time the main frame loads a new document. That covers reloads, links, form posts and server redirects.

Turn on Preserve log

  1. Open DevTools before loading the page (F12, or Cmd+Option+I on macOS). Chrome only records requests while DevTools is open.
  2. Click the Network tab.
  3. Tick Preserve log in the action bar at the top.
  4. Reproduce the reload or redirect. The old requests stay put and new ones are added below them.
  5. Before you close DevTools, export a HAR (download icon in the action bar) if you want to keep any of it.

The Console has its own Preserve log in its settings. Turn that on too if you want console messages to survive the reload.

Where it falls short

I hit these regularly:

  • Closing DevTools wipes it. The preserved log lives in the DevTools window. Close it and the log is gone.
  • The first load is often missing. If the page loaded before you opened DevTools, those requests were never recorded. Reload with DevTools open. For popups, start Chrome with: 
  google-chrome --auto-open-devtools-for-tabs
Enter fullscreen mode Exit fullscreen mode

If you need a capture that doesn't depend on DevTools at all, chrome://net-export writes a browser-level NetLog.

  • One flat list. After five reloads you have five copies of /api/me and nothing telling you which load each one belongs to. You end up reading the order of the document requests and the waterfall.
  • SPAs never clear anyway. A history.pushState route change isn't a document load, so the log never clears. With or without Preserve log, every route's API calls pile into the same list with no marker between them.

Disable cache is a different job

Disable cache sits right next to it. Preserve log decides whether the list survives a reload. Disable cache decides whether the requests in it hit the network or come from the HTTP cache (only while DevTools is open). If a request seems missing after a reload, check whether it came from the memory or disk cache before you assume it never ran.

Firefox: Persist Logs

  1. Open the Network Monitor (Ctrl+Shift+E, or Cmd+Option+E on macOS).
  2. Click the gear icon at the right end of the Network toolbar.
  3. Select Persist Logs.

The Web Console has its own Persist Logs setting too. The limits are the same as Chrome's.

What I use when the flat list gets in the way

I work on Netraptor, a Chrome extension with its own DevTools panel, and this was one of the gaps we wanted to close. When you open the panel it pulls in what DevTools already logged for the page. After that, each reload, navigation or SPA route change (pushState, replaceState, back/forward) starts a group labelled "Reloaded" or "Navigated to" with the path, time and request count. Earlier loads fold away rather than being deleted. If you turn on "Keep history for this site", it saves that site's fetch/XHR calls to IndexedDB, so they're still there after you close DevTools.

The full guide, with steps and FAQ, is here: Preserve log in Chrome: keep network requests after a page reload.

Top comments (0)