The Diagnostic Mindset

Before reaching for DevTools, answer two questions: what exactly is failing (a whole page? one API call? just images?) and is this affecting all users or just one? A problem isolated to one user on a corporate network is almost always a firewall or proxy issue — not your code.

Open DevTools with F12, go to the Network panel, and press Escape to open the Console drawer. Most access failures produce a red Console error, a red Network entry, or both.

Step 1 — Read the Console Error

The Console almost always names the problem category before you click a single request. Here is a representative set of errors:

Step 2 — CORS Errors

CORS (Cross-Origin Resource Sharing) is a browser security policy. When JavaScript at https://app.example.com tries to read a response from https://api.other.com, the browser first checks whether the server sent permission headers. If not, the browser suppresses the response — even though it was received.

How a CORS request flows

Investigating CORS in the Network panel

Click the blocked request → Response Headers tab. Look for:

CORS reason codes in the Console

Step 3 — Mixed Content

An HTTPS page that loads any sub-resource over HTTP is called mixed content. The browser blocks active mixed content (scripts, fetch requests, iframes) entirely. Passive mixed content (images, audio, video) may load but breaks the padlock icon.

Finding mixed content fast

In the Network panel, press Ctrl + F to open the search bar. Type http:// — this searches request URLs and response bodies across all requests. Any hit that is an HTTP URL on an HTTPS page is a candidate for the block.

Step 4 — TLS / Certificate Errors

TLS errors prevent the browser from establishing a secure connection. They are visible on the error page Firefox shows instead of the content, and in the Security tab of Network request details.

Checking certificate details

Click the lock icon in the address bar → Connection Secure → More Information. The Security panel shows the issuer, validity period, and SANs. For sub-resource TLS errors: click the failing request in the Network panel → Security tab.

Step 5 — DNS Failures

DNS failure means the browser couldn't resolve the domain name to an IP address. Firefox shows its "Server not found" page. In DevTools, the failing request shows -- status, and the Timings tab shows only a failed DNS Lookup phase.

DNS failures are almost always environmental — DNS filtering on a corporate network, a domain that hasn't propagated yet, or an expired domain. They look similar to firewall blocks in DevTools. To tell them apart, run nslookup api.example.com in a terminal — DNS failure returns Non-existent domain; a firewall block resolves successfully but the TCP connection never completes.

Step 6 — Network / Firewall Blocks

A firewall block means DNS succeeded but the TCP connection was refused or dropped. The Timings tab distinguishes the two failure modes:

Step 7 — Proxy Issues

A proxy sits between the browser and the internet. Corporate networks commonly use proxies for compliance and security. Proxy involvement is identified by response headers and specific HTTP status codes.

Identifying proxy headers

Putting It All Together — Diagnostic Flow

Exercises

fetch('http://example.com/test')
  .catch(e => console.error(e.message));

fetch('https://this-domain-definitely-does-not-exist-xyz.com')
  .catch(e => console.error('Error:', e.message));

Key Takeaways

• Read the Console first — the error message names the problem category. Don't navigate the Network panel blindly when the Console has already told you what's wrong.
• CORS is enforced by the browser; the request already reached the server. Fix it by adding Access-Control-Allow-Origin (and Access-Control-Allow-Headers for auth) on the server.
• Wildcard + credentials conflict: Access-Control-Allow-Origin: * cannot be used with credentials: 'include' — use a specific origin instead.
• Mixed content: any http:// resource on an HTTPS page. Use Ctrl + F in the Network panel and search http:// to find them quickly.
• TLS errors: check the lock icon → More Information for certificate details; check Issued By to spot proxy SSL inspection.
• DNS failures show only a failed DNS Lookup phase in Timings. They are environmental — corporate filter, unpropagated domain, expired domain.
• Firewall blocks: connection refused = instant fail; firewall drop = slow timeout. The Timings tab Connecting phase distinguishes them.
• Proxy involvement is revealed by Via, X-Cache, or X-Forwarded-For headers in the response, or a 407 status code.
• Block URL (right-click any request) lets you test what happens when a resource is unavailable — ideal for resilience testing.