When Chrome refuses to display JSON responses as formatted output, the browser is showing raw text instead of the structured tree you expect. The reason Chrome can’t view JSON response in browser almost always comes back to one of three causes: incorrect MIME type from the server, cached rendering decisions that persisted after you fixed the server, or an extension stripping the headers Chrome needs to identify JSON content. Each of these has a targeted fix that takes under 5 minutes.

Quick Fix

1. Open DevTools (F12), go to Network tab
2. Right-click the JSON response, select Copy then Copy response
3. In the Console tab, run: console.log(JSON.stringify(JSON.parse(PASTE_HERE), null, 2))

Why Chrome Won’t Display JSON Responses

Chrome’s JSON viewer is not speculative. It does not look at the response body and try to guess whether the content might be JSON. It relies almost entirely on the Content-Type header in the HTTP response. When that signal is absent, wrong, or blocked, the browser defaults to plain text rendering.

Missing or Incorrect Content-Type Headers

The most common cause by a wide margin. When servers return JSON without setting Content-Type: application/json, Chrome treats the response as generic text. Express.js servers default to text/html for responses unless you explicitly call res.json() or set the header manually. Apache and Nginx require explicit MIME type configuration for .json file extensions.

Local development servers are particularly prone to this issue. Many lightweight dev server tools do not configure MIME types at all, sending every response with a generic content type and leaving Chrome with no information about the format.

“JSON is a text-based data format following JavaScript object syntax. Even though it closely resembles JavaScript object literal syntax, it can be used independently from JavaScript, and many programming environments feature the ability to read (parse) and generate JSON.”

Source: Working with JSON - Learn web development - MDN — MDN Web Docs

Browser Cache Storing Old Rendering Decisions

Chrome caches how it rendered previous responses from a given URL. If you fix the Content-Type header on your server but Chrome has already cached the old plain-text rendering decision, the JSON will still display as raw text. The cache does not automatically invalidate just because the server now sends different headers.

This creates a confusing situation where your server configuration is correct but Chrome still shows raw text. The cache is overriding the correct behavior.

Extension Interference With Response Headers

Privacy extensions and ad blockers intercept responses before Chrome’s rendering pipeline sees them. Some of these extensions strip or modify headers from domains they consider suspicious, including localhost and local IP addresses. When the Content-Type header gets stripped, Chrome receives the JSON body without any type information and renders it as text.

This cause explains why JSON displays correctly in an incognito window (where most extensions are inactive) but shows as raw text in your regular profile.

How to Fix Can’t View JSON Response in Browser

Fix 1: Verify and Correct Your Server’s Content-Type Header

Open DevTools and click on the Network tab before making your API request. Find your request in the list and click it. Look at the Response Headers section for the content-type entry.

If it shows anything other than application/json or application/json; charset=utf-8, fix it at the server level. For Express.js: use res.json(yourData) instead of res.send(yourData). For Node.js with the http module: call res.setHeader('Content-Type', 'application/json') before writing the response body. For PHP: call header('Content-Type: application/json') before echo.

Fixing the header solves the problem immediately for all future requests, with no browser-side changes needed.

Fix 2: Clear the Cache for the Specific Domain

If you have already fixed the server headers but Chrome still shows raw text, cached rendering decisions are the issue. The most targeted approach is clearing site-specific data rather than your entire browser history.

Go to Settings, then Privacy and security, then Site Settings, then View permissions and data stored across sites. Search for your API domain, find it in the list, and click the trash icon to delete all stored data for that site.

An alternative: while DevTools is open, right-click the browser’s reload button and select “Empty Cache and Hard Reload.” This clears cached responses for the current page and forces Chrome to re-evaluate the content type from scratch.

Fix 3: Test in Incognito to Isolate Extension Conflicts

Open an incognito window with Ctrl+Shift+N (Windows) or Cmd+Shift+N (Mac) and navigate to the JSON endpoint. If the response formats correctly in incognito but not in your regular profile, an extension is stripping or modifying the Content-Type header.

Go to chrome://extensions/ and disable your privacy extensions and ad blockers one at a time, retesting after each one. Once you find the conflicting extension, check its settings for options to whitelist your API domain or localhost. Most ad blockers include domain exclusion lists precisely for this purpose.

“Detailed review of the top 5 JSON viewer Chrome extensions with feature comparison and use cases.”

Source: Top 5 JSON Viewer Chrome Extensions You Need To Check Out — ful.io

Fix 4: Enable Chrome’s Native JSON Viewer Flag

Navigate to chrome://flags/#enable-json-viewer and set it to Enabled, then restart Chrome. This activates Chrome’s built-in JSON rendering for responses that have the correct Content-Type header but are still displaying as text due to a viewer configuration issue.

Note that this flag does not override the Content-Type requirement. It is most useful in Chrome versions where the JSON viewer was inadvertently disabled by a corporate policy or a previous Chrome flag change.

Fix 5: Use DevTools Console as an Immediate Workaround

When you need to inspect a JSON response right now without waiting to fix the underlying cause, the DevTools Console provides clean formatted output. Copy the raw response text from the Response tab, then paste it into the Console with this command:

JSON.parse(`PASTE_YOUR_JSON_HERE`)

The parsed result appears as an interactive expandable object in the console output. You can expand nested objects and arrays exactly as you would in a proper JSON viewer. This works regardless of headers, size limits, or extension conflicts.

JSON Formatter Pro: Fix It Permanently

Manual approaches work but require repeating the same diagnostic steps every time you encounter a new endpoint with header problems. JSON Formatter Pro intercepts responses before Chrome’s rendering pipeline and applies JSON formatting based on the response body content, not just the header.

This means it formats JSON correctly even when servers send wrong MIME types, even when extension conflicts would otherwise strip the required header, and even when Chrome’s native viewer is misconfigured. It maintains a 4.8/5 rating with consistent updates, and at 738KiB it adds no meaningful overhead to the browser.

Version 1.0.4 added support for JSON5 and JSONP formats, covering the non-standard response types that Chrome’s built-in viewer skips entirely.

Get JSON Formatter Pro at zovo.one

Why This Happens: The Technical Context

Chrome’s design philosophy for content rendering prioritizes security. Rather than guessing that ambiguous content might be JSON and rendering it as such, Chrome requires explicit declarations. This prevents scenarios where malformed or malicious content gets treated as JSON when it should not be.

The practical cost for developers is that APIs which do not follow HTTP standards strictly, including many internal tools and older REST endpoints, require either a server-side fix or a client-side tool that does not depend on those declarations.

FAQ

Does clearing browser cache fix JSON viewing permanently?

Only if the root cause was a cached rendering decision from before a server-side fix was deployed. If the server is still sending incorrect Content-Type headers, clearing the cache provides temporary relief but the problem returns the next time Chrome caches the response.

Can I force Chrome to always display JSON without extensions?

Not through a simple global setting. Enabling chrome://flags/#enable-json-viewer gets you part of the way, but it still depends on correct Content-Type headers. An extension like JSON Formatter Pro is the only browser-side approach that works regardless of server configuration.

Why does JSON display correctly in Firefox but not Chrome?

Firefox applies more permissive content-type detection, attempting JSON formatting even when headers are absent or incorrect. Chrome requires strict application/json MIME types. This is a deliberate difference in how the two browsers balance convenience against security standards compliance.

How do I check what Content-Type my server is sending?

Open DevTools with F12, click the Network tab, trigger your API request, click the request entry in the list, and look at the Response Headers section. The content-type line shows exactly what your server sent.

Built by Michael Lip — More tips at zovo.one