Netraptor

Forgot to open DevTools? How to see network requests that already happened

Updated · 7 min read

You can't see network requests that happened before you opened DevTools. Chrome's Network panel records only while DevTools is open, so earlier requests were never logged. Your options are to reproduce the bug with DevTools already open, make Chrome open DevTools automatically, record at the browser level with chrome://net-export, check your server logs, or use a tool that was already recording when the bug happened.

Steps

  1. 1

    Open DevTools before the page loads

    Press F12, Ctrl+Shift+I on Windows and Linux, or Cmd+Option+I on macOS, then click the Network tab. The panel starts recording now, not before.

  2. 2

    Turn on Preserve log

    Tick Preserve log in the Network action bar so a redirect or a login does not clear the list. See how Preserve log works for its limits.

  3. 3

    Reload and reproduce

    Reload the page, or repeat the steps that triggered the bug. Requests from the first load now show up, because DevTools was open when they ran.

  4. 4

    Make it automatic for bugs you can't repeat on demand

    Start Chrome with --auto-open-devtools-for-tabs, or record the whole browser with chrome://net-export, so the next occurrence is captured even if you forget.

  5. 5

    Save what you caught

    Export a HAR file from the Network panel before you close DevTools. The log disappears with the DevTools window. See how to create a HAR file in Chrome.

Why the Chrome DevTools Network tab is empty after the fact

Chrome's Network features reference says it plainly: DevTools records all network requests "so long as DevTools is open." Nothing runs in the background before that. When you open DevTools after a one-off 500, a login redirect or a race on first load, the Network tab is empty because the requests were never written down anywhere you can reach.

There is no hidden cache to dig through. Browser history stores the URLs of pages you visited, not the API calls those pages made. Every working option below records the next occurrence. Choose one based on how hard the bug is to trigger.

Network tab not showing requests: other causes to rule out

If DevTools was open and the Network tab still shows nothing, or not the request you expected, check these first:

  • A filter is still on. Clear the filter box, click All in the type chips, and make sure Invert is unchecked. Under More filters, Hide data URLs and Hide extension URLs remove rows too.
  • Recording is stopped. The round record button at the left of the action bar should be red. Grey means Chrome is not recording. Click it, or press Ctrl+E (Cmd+E on macOS) with the Network panel focused.
  • You're looking at the wrong tab. A link that opens a new tab or popup gets its own DevTools window, and its requests never appear in the original tab's Network panel. Requests from iframes do show in the parent page's panel.
  • A service worker is involved. A worker can answer a request from its own cache, and requests it sends on its own, such as background sync, show up in the worker's DevTools. Open that from chrome://inspect/#service-workers.
  • The request happened before DevTools opened, as covered above. Reload with DevTools open.

Reproduce with DevTools already open

For most bugs this is the fastest route. Open DevTools on the tab, tick Preserve log, then reload or repeat the action. Preserve log matters for login and checkout bugs, because Chrome clears the list on every document load and the request you need is usually the one right before a redirect. Preserve log in Chrome covers the details.

Tick Disable cache too if the bug only shows for a first-time visitor. Cached requests can skip the network on a reload, so the call that failed the first time may not repeat.

When it fails, export a HAR file before you close DevTools. You can open it later in the free HAR analyzer, which runs in your browser and lists the failed, slow and large requests.

Open DevTools automatically for every tab

If the bug happens on first load or in a tab you never think to inspect, make Chrome open DevTools for you. Quit Chrome completely, then start it with the --auto-open-devtools-for-tabs switch. Every new tab and window opens with DevTools attached, so recording starts before the page's first request.

# macOS
open -a "Google Chrome" --args --auto-open-devtools-for-tabs

# Windows
"C:\Program Files\Google\Chrome\Application\chrome.exe" --auto-open-devtools-for-tabs

# Linux
google-chrome --auto-open-devtools-for-tabs

The switch only takes effect when Chrome starts, so it does nothing if a Chrome window is already running. A separate profile avoids that problem and keeps your everyday browsing out of it. Add --user-data-dir=/tmp/chrome-debug to the command.

For popups only, there is a lighter option. In DevTools, open Settings (the gear icon), then Preferences, and check Auto-open DevTools for popups in the Global section. Chrome's preferences reference says it opens DevTools when you click links that open new tabs, which catches OAuth and payment popups that redirect before you can press F12.

Chrome net export: record the whole browser

chrome://net-export writes a NetLog, a browser-wide log of network events that does not need DevTools at all. It is the tool Chromium developers ask for in bug reports, and the steps are in Providing network details.

  1. Open a new tab and go to chrome://net-export.
  2. Click Start Logging to Disk and choose where to save the JSON file.
  3. Reproduce the problem in a different tab. Keep the net-export tab open, because closing it stops the log.
  4. Click Stop Logging when you are done.

Like DevTools, net-export only records from the moment you click Start. Leave it running in the background on days you're chasing an intermittent bug. A long log grows quickly, and you can cap it with the --net-log-max-size-mb startup flag.

The default capture level, Strip private information, removes cookies and credentials. Include raw bytes adds the bytes sent and received, and the Chromium docs warn that this level may include personal information. Don't share that file casually.

Check the server side

If the bug already happened and you can't make it happen again, the server may be the only place it was recorded. A one-off 500 usually leaves a line in your access logs, a stack trace in your error tracker or APM, and a trace if you run distributed tracing. Search around the time you saw the error, filtered by your user ID or IP. If your API returns a request ID header, log it on the client too, so you can match a user's report to a server log line next time.

Server logs show what the server received and returned. They miss requests that never reached it, such as CORS failures, blocked requests and calls that timed out on the client. For those, use one of the browser options above. See how to fix a CORS error if that turns out to be the cause.

Keep history with Netraptor so the API calls are already there

Netraptor is a Chrome extension with a panel in DevTools. Its Keep history for this site switch records a site's API calls while DevTools is closed, so the next time a bug happens before you open DevTools, the calls are already saved.

  • Turn it on from the Netraptor toolbar popup, or the History pill in the Netraptor panel. Chrome asks for access to that site, and the switch covers the domain and its subdomains. Reload the page once to start.
  • Netraptor hooks fetch and XMLHttpRequest in the page when it starts loading, in every frame, so API calls made during the first load are captured too. Each call is saved with its status, headers and bodies, including the ones that fail.
  • Calls are saved to IndexedDB in your browser. Saved sessions appear in the Netraptor panel's session picker next to the live one, grouped by page load (Reloaded or Navigated to) with single-page-app route changes split out.
  • Filter a saved session with status-code:5xx to find the one-off 500, then export it as HAR, Postman or curl.

Know the limits before you rely on it. Keep history records API calls only (fetch and XHR). Documents, scripts, styles, images and redirects of the page itself are not saved. It records only on sites you turned it on for, and only after you turned it on, so it can't recover a bug from yesterday. The Free plan keeps the last three sessions and Pro keeps all of them.

Opening the Netraptor panel without Keep history works like the Network panel. It pulls in everything DevTools has already logged for the tab, so you don't need to reload when you switch to it, but it can't see requests from before DevTools opened either.

The practical setup is to turn on Keep history for the apps you build and test. If you want a coding agent to read those calls instead of guessing, see how to let your coding agent see your app's API calls.

Frequently asked questions

How do I see network requests that happened before I opened DevTools?
You can't in Chrome, because the Network panel records only while DevTools is open. Reproduce the bug with DevTools open, start Chrome with --auto-open-devtools-for-tabs, record with chrome://net-export, check server logs, or use an extension that records in the background on that site.
Why is the Chrome DevTools Network tab not showing requests?
Usually a filter is still on, recording is stopped, or the request ran in another tab, in a service worker, or before DevTools opened. Clear the filter, check that the record button is red, and reload with DevTools open.
What is chrome://net-export?
It is a Chrome page that writes a NetLog, a browser-wide log of network events, to a JSON file. It works without DevTools and records every tab from the moment you click Start Logging to Disk until you stop it or close the net-export tab.
How do I view a Chrome net export log?
Open the JSON file in the NetLog viewer at netlog-viewer.appspot.com. It is not a HAR file, so HAR viewers and the Network panel can't open it. Its Events view and Timeline suit DNS, TLS and connection problems.
Can Chrome open DevTools automatically?
Yes. Start Chrome with --auto-open-devtools-for-tabs and every new tab opens with DevTools attached. For popups only, enable Auto-open DevTools for popups in DevTools Settings, under Preferences > Global.
Does Preserve log keep requests from before DevTools was opened?
No. Preserve log keeps requests across reloads and navigations, but only those recorded while DevTools was open. Requests from before DevTools opened were never recorded.