Browser DevTools for Site Owners: Network, Console, Cache and Copy as cURL

Half the guides on this site say “open DevTools and check the Network tab”. If you have never done it, that instruction is useless. This sheet shows how to open the developer tools in each browser, which panels matter when a website misbehaves, how to read what they show, and how to hand the evidence to your host or developer. Nothing here changes your website: DevTools only shows what your browser received, and anything you edit in it disappears when you reload.

Read this first: menu names below follow Chrome and Edge, which share the same DevTools. Firefox and Safari have the same ideas with slightly different labels. Browsers rename panels from time to time (Chrome’s Security panel became Privacy and security in 2025, for example), so if a label does not match, look for the closest equivalent or use the panel search.

Open DevTools

Browser	Open DevTools	Straight to the Console	Notes
Chrome, Edge, Brave, Opera	F12, or Ctrl+Shift+I (Windows, Linux), Cmd+Option+I (Mac)	Ctrl+Shift+J, Cmd+Option+J	Or right-click any part of the page and choose Inspect
Firefox	F12, or Ctrl+Shift+I, Cmd+Option+I	Ctrl+Shift+K, Cmd+Option+K	Network opens directly with Ctrl+Shift+E, Cmd+Option+E
Safari (Mac)	Cmd+Option+I, after enabling developer features	Cmd+Option+C	Turn on Settings, Advanced, “Show features for web developers” (older versions: “Show Develop menu in menu bar”)
Phones	Use the desktop browser’s device mode instead	Not applicable	Chrome and Edge: Ctrl+Shift+M, Cmd+Shift+M toggles the device toolbar to emulate phone sizes

DevTools opens docked to the side or bottom of the window. The three-dot menu inside DevTools lets you move it or undock it into its own window, which helps on small screens.

The panels a site owner actually needs

Panel	Use it to answer
Network	Did the page and each file load? What status code? How long did it take? Was it cached? Where did a redirect go?
Console	Did any JavaScript fail? Is something blocked as mixed content, by CORS or by a security policy?
Elements (Firefox: Inspector)	What HTML and CSS is this part of the page really using? Why is it hidden or the wrong color?
Application (Firefox: Storage; Safari: Storage)	Which cookies and local storage does the site set? Is a service worker serving an old copy? Clear site data.
Lighthouse	A quick performance, accessibility, best practice and SEO audit of one page.
Privacy and security (formerly Security)	Certificate details and whether everything loaded over HTTPS.

Network panel: the basics

Open DevTools, click Network, then reload the page. The panel only records while it is open, so always reload after opening it.

Control or column	What it does	When to use it
Disable cache (checkbox)	Stops the browser using its own cache while DevTools is open	Always, when checking whether a fix worked
Preserve log (checkbox; Firefox: Persist Logs)	Keeps entries across page loads and redirects	Redirect loops, login problems, form submissions that reload the page
Status	The HTTP status code for each request	Spot 404, 403, 500 and redirects at a glance
Type	document, stylesheet, script, font, image, fetch	The first row of type document is the page itself
Size	Bytes transferred, or “(disk cache)”, “(memory cache)”, “(ServiceWorker)”	Tells you whether a file really came from the server
Time and Waterfall	How long each request took and when it started	Slow pages: find the one long bar
Throttling dropdown (No throttling)	Simulates a slow connection	See what phone visitors on poor signal experience
Filter box and type buttons (All, Doc, CSS, JS, Img, Font, Fetch/XHR)	Narrows the list	Find one file in a page with hundreds of requests

Right-click a column header to add more columns, such as Domain, Protocol or Remote Address (the server IP that answered).

Reading the Status column

Status	Meaning	What to do next
200	OK	The request worked. If the page still looks wrong, the problem is in the content, CSS or JavaScript.
301, 302, 307, 308	Redirect	Click it and read the location response header. Many in a row means a chain or loop: too many redirects.
304	Not modified, the browser’s copy is still valid	Normal. Check Disable cache to force a full download.
403	Forbidden	Firewall, security plugin or permissions: 403 forbidden.
404	Not found	A missing file or page. For many 404s on CSS and JS after an update, see CSS not loading.
500	Server error	Check the PHP error log: 500 internal server error.
502, 503, 504	Gateway or overload problems	502 and 504, 503 and 508
(blocked:mixed-content), (blocked:other), (failed)	The browser never got a response	Mixed content, an ad blocker or extension, a CORS or security policy. Check the Console for the reason.
(canceled)	The browser abandoned the request	Often harmless (the page navigated away). Repeated on one file can mean a timeout.

The full list of codes is on the HTTP status codes cheat sheet.

Useful Network filters

Type these into the Network filter box in Chrome or Edge. A leading minus sign excludes matches. Separate several filters with spaces to combine them.

Filter	Shows
status-code:404	Only requests that returned 404
domain:example.com	Only requests to that domain
-domain:example.com	Everything except your own domain, which reveals third-party scripts
larger-than:500k	Files bigger than 500 KB, usually oversized images or videos
mime-type:image/png	One file type
has-response-header:cf-cache-status	Responses that passed through Cloudflare’s cache
collect	Plain text: any URL containing the word, such as analytics hits

Read one request in detail

Click any row in the Network list to open its details. The Headers tab is the one you need most.

Where	Look for	Tells you
General	Request URL, Status Code, Remote Address	Which server answered. Compare the IP with what your host says after a move.
Response headers	cache-control, age, x-cache, cf-cache-status, x-litespeed-cache	Whether a cache served the page and how old the copy is. See changes not showing.
Response headers	location	Where a redirect sends the browser
Response headers	server, cf-ray	Whether the response came through Cloudflare or another proxy
Response headers	content-security-policy, strict-transport-security	Security policies that can block resources. See the security headers cheat sheet.
Preview and Response tabs	The body the server sent	A form or AJAX request that “does nothing” often returns an error message here
Timing tab	Waiting for server response	A long wait is slow server processing, not slow images: high TTFB

Bypass the cache properly

Action	How	What it clears
Normal reload	F5, Ctrl+R, Cmd+R	Nothing; the browser revalidates
Hard reload	Ctrl+Shift+R or Ctrl+F5 (Windows, Linux), Cmd+Shift+R (Mac)	Ignores the browser cache for this load
Empty cache and hard reload	With DevTools open in Chrome or Edge, right-click (or long-press) the reload button and choose it	Empties the browser cache for the site, then reloads
Clear site data	Application, Storage, “Clear site data”	Cookies, local storage, cache and service workers for this site. Logs you out.
Private window	Ctrl+Shift+N (Chrome, Edge), Ctrl+Shift+P (Firefox), Cmd+Shift+N (Safari)	Starts with no cookies or cache, like a new visitor

None of these clear your server or CDN cache. If a hard reload still shows the old version, look at the cache headers above; the fix is on the server.

Console: errors that matter on WordPress sites

Red lines are errors, yellow are warnings. Warnings and errors from browser extensions (addresses starting with chrome-extension://) are not your site’s problem. Test in a private window with extensions off.

Message contains	Usually means	Go to
Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure	An http:// image, script or font on an https page	mixed content
Failed to load resource: the server responded with a status of 404	A missing file	The Network panel, then CSS not loading
has been blocked by CORS policy	A font, script or API call from another domain without permission	fonts showing as Times New Roman
Uncaught ReferenceError: jQuery is not defined	A script ran before jQuery loaded, often after delay or defer settings	delay JS broke things
Refused to load or Refused to execute with Content Security Policy	A security header blocks the resource	The security headers cheat sheet
Uncaught TypeError naming a plugin file	A JavaScript bug or conflict in that plugin	page builder broke or the plugin’s support
Long lists of wp-json errors with 401, 403 or rest_ codes	The REST API is blocked	not a valid JSON response

Copy a request as cURL

When a host or developer asks you to “send the failing request”, this is the clearest way. In the Network panel, right-click the request, choose Copy, then Copy as cURL (bash) on Mac and Linux, or Copy as cURL (cmd) or (PowerShell) on Windows. Firefox: right-click, Copy Value, Copy as cURL.

The copied command repeats the exact request, including headers and cookies, from a terminal on your own computer. Paste it into a terminal to reproduce the problem outside the browser; the curl cheat sheet explains the output.

Before sharing it, remove secrets. A copied request from a logged-in session includes your login cookies (look for -b or a cookie: header with wordpress_logged_in_) and sometimes form data. Anyone holding those cookies can act as you until you log out. Delete those parts, or copy the request from a private window where you are not logged in.

Save the evidence

What	How	Watch out for
HAR file (a recording of every request)	Network panel, the download arrow icon (“Export HAR”), or right-click the list and choose save as HAR	HAR files can contain cookies, form data and passwords. Recent Chrome versions offer a sanitized export; otherwise record in a private window, logged out where possible.
Console log	Right-click in the Console, “Save as…”	Include the time and the page address
Full-page screenshot	Chrome and Edge: Ctrl+Shift+P (Cmd+Shift+P), type “screenshot”, choose “Capture full size screenshot”	Captures the whole page, not just the visible part
Lighthouse report	Lighthouse panel, choose categories and device, Analyze page load, then save as HTML	Scores vary between runs; compare like with like

Recipes

“Is my fix live, or is it the cache?”

1. Open a private window, open DevTools, Network, check Disable cache.
2. Reload and click the first document row.
3. Read age, cf-cache-status or x-cache. HIT with a large age means a server or CDN cache is serving an old copy. Purge it.

“The form does nothing when I click Send”

1. Open DevTools, check Preserve log, then submit the form.
2. In Network, filter Fetch/XHR and click the new request. Read its Status and the Response tab.
3. Check the Console for red errors. Then follow form submits but nothing arrives.

“Which third parties does my site load?”

1. Network, reload, then type -domain:example.com (your domain) in the filter.
2. Add the Domain column. Every domain listed is a third party you may need in your privacy policy: see small business privacy requirements.

“Why is this page slow?”

1. Network, Disable cache, reload. Sort by Size, then by Time.
2. A huge first document Time is the server (high TTFB). Huge images are front-end: fix LCP.
3. Run Lighthouse on mobile for a structured list. The performance metrics cheat sheet explains the numbers.

Gotchas

• DevTools edits are temporary. Changing CSS or HTML in Elements only affects your screen until you reload. Use it to test a fix, then make the change in the theme or builder.
• Disable cache only works while DevTools is open. Close DevTools and the browser cache is back.
• Logged in is not the same as a visitor. Most caches skip logged-in users, so you see fresh pages while visitors see old ones. Test in a private window.
• Extensions add noise. Ad blockers cause (blocked:other) entries and console errors that real visitors without them never see.
• Service workers can serve stale pages. If a site keeps showing an old version even after a hard reload, check Application, Service workers, and click Unregister.