Forgot to open DevTools before the bug? Here's what you can still do
TL;DR: You can't see requests that happened before you opened DevTools. Chrome's Network panel only records while DevTools is open, so they were never logged. What you can do is set things up so the next one gets caught:
TL;DR: You can't see requests that happened before you opened DevTools. Chrome's Network panel only records while DevTools is open, so they were never logged. What you can do is set things up so the next one gets caught: reproduce with DevTools open, launch Chrome with --auto-open-devtools-for-tabs, record the whole browser with chrome://net-export, or check the server logs.
The moment
A one-off 500 flashes up. Or the login redirect loops once and then works. You hit F12, click Network, and the panel is empty.
The Chrome docs are clear that DevTools records network requests "so long as DevTools is open." There's no background buffer to recover from. Browser history has the page URL, not the API calls the page made.
So the job becomes catching it next time.
First, make sure the tab is really empty for that reason
I've lost time to these more than once:
- A filter is still on. Something in the filter box, a type chip other than All, Invert ticked, or Hide data URLs / Hide extension URLs under More filters.
-
Recording is off. The round button at the left of the action bar should be red.
Cmd+E/Ctrl+Etoggles it. - Wrong tab. A link that opened a new tab or popup has its own DevTools. Iframe requests do show in the parent page's panel.
-
A service worker is involved. It may have answered from its cache, or sent the request itself (background sync and similar). Inspect the worker from
chrome://inspect/#service-workers.
If none of those apply, the request ran before DevTools opened.
Option 1: reproduce with DevTools open
- Open DevTools on the tab and go to Network.
- Tick Preserve log so redirects don't wipe the list.
- Tick Disable cache if the bug only happens on a cold load.
- Reload or repeat the steps.
- Export a HAR before closing DevTools, because the log dies with the window.
I wrote up Preserve log and its limits separately.
Option 2: let Chrome open DevTools for you
Quit Chrome fully, then:
# macOS
open -a "Google Chrome" --args --auto-open-devtools-for-tabs
# Linux
google-chrome --auto-open-devtools-for-tabs
# Windows
"C:\Program Files\Google\Chrome\Application\chrome.exe" --auto-open-devtools-for-tabs
Every new tab now opens with DevTools attached, so first-load requests are recorded. The switch is ignored if Chrome is already running. I add --user-data-dir=/tmp/chrome-debug so it gets its own profile and my normal windows stay normal.
If the problem is only popups (OAuth, payment windows), there's a setting for that: DevTools Settings > Preferences > Global > Auto-open DevTools for popups.
Option 3: chrome://net-export
This records a NetLog for the whole browser, no DevTools needed. The steps from Chromium's docs:
- Open
chrome://net-exportin a new tab. - Click Start Logging to Disk.
- Reproduce in another tab. Leave the net-export tab open or logging stops.
- Click Stop Logging.
It also only records from when you press Start. On days I'm chasing something intermittent, I start it in the morning and leave it running. Cap the size with --net-log-max-size-mb if that worries you.
The default level strips cookies and credentials. Include raw bytes adds the actual bytes, which can contain personal data.
Open the file in the NetLog viewer. It isn't a HAR, and it reads more like a connection-level trace (DNS, TLS, sockets) than a request inspector. Great for "why did this connection fail", less great for "what JSON came back".
Option 4: the server already logged it
If it already happened and won't happen again, check access logs, your error tracker or APM, and traces around that timestamp. If your API returns a request ID header, start logging it on the client too, so the next report maps straight to a server line.
The gap is requests that never reached the server: CORS failures, blocked calls, client timeouts. For those you need one of the browser options.
What I do now
For apps I work on every day, I don't want to depend on remembering F12. I use Netraptor, a Chrome extension I'm building, and turn on Keep history for this site for those apps. It hooks fetch and XHR in the page from the start of the load and saves those calls to IndexedDB with DevTools closed. When a 500 shows up, I open the panel, pick the saved session and filter status-code:5xx.
It only records API calls (no documents, scripts or images), only on sites I've turned it on for, and only from that point on. So it won't rescue yesterday's bug, but it does catch the next one.
Full guide, with the Network-tab-empty checklist and FAQ: https://netraptor.dev/guides/see-requests-before-devtools-opened
Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes β full credit and traffic to the original publisher.