OfflineTools

Need help with your JSON?

Try our JSON Formatter tool to automatically identify and fix syntax errors in your JSON. JSON Formatter tool

How Chrome DevTools Changed JSON Formatting Forever

Chrome DevTools changed JSON formatting by making readable API responses the default part of browser debugging instead of a separate task. That shift mattered because it removed the old copy-paste workflow: inspect a request, open an external formatter, paste the payload, then switch back to the browser. Today the more useful question is not whether DevTools changed the workflow, but how far Chrome's built-in JSON handling goes and where it still falls short.

If you land on this page because Chrome formatted one response perfectly but showed another as raw text, that difference usually comes down to content type, valid JSON, or the difference between the Preview and Response tabs. Understanding those details is what turns DevTools from a convenience into a reliable debugging tool.

What Actually Changed

Before modern DevTools, JSON in the browser was often just a wall of text. Chrome normalized a better expectation: responses should be inspectable in place, collapsible, searchable, and readable without leaving the page you are debugging.

Why that shift mattered

  • API debugging became much faster because the response structure was visible immediately.
  • Developers stopped pasting sensitive payloads into third-party formatter websites by default.
  • Tree views and collapsible nodes made large nested objects practical to inspect.
  • Built-in formatting set the standard that other browsers and tools eventually followed.

What Chrome DevTools Does Well Today

Current Chrome DevTools is more useful than the original “pretty print raw JSON” story. For JSON responses in the Network panel, Chrome typically gives you two different ways to inspect the payload:

  • Preview for structure: When Chrome recognizes a response as JSON, the Preview tab usually shows an expandable tree so you can inspect objects and arrays without reading every character.
  • Response for exact text: The Response tab is better when you need the raw body, need to verify escaping or whitespace, or want to use Chrome's prettify control on minified output.
  • Subtype awareness: Chrome DevTools added proper parsing and prettifying for application/*+json response types such as application/ld+json and application/hal+json, not just plain application/json.
  • Searchability: Once the response is readable, finding keys, values, or suspicious nested fields becomes much faster than scanning raw text.

Version note

A useful modern improvement is Chrome 117's update to parse and prettify application/*+json subtypes in the Response tab. That means APIs and structured-data responses using vendor or standards-based JSON subtypes are now handled more consistently.

The Fastest Workflow in 2026

  1. Open DevTools before reproducing the request so the Network panel captures it.
  2. Trigger the action that loads the API response you care about.
  3. Click the request and check the Headers tab first.
  4. Confirm the response looks like JSON and the server sends a JSON media type such as application/json or application/ld+json.
  5. Use Preview when you want a tree view and use Response when you need the exact payload text.
  6. If the payload is minified text, use the prettify control in the response view.
  7. If you need to search across headers, payloads, and responses, use Command + F on macOS or Control + F on Windows and Linux from the Network panel.

Example header that should format cleanly

HTTP/1.1 200 OK
Content-Type: application/hal+json; charset=utf-8

{"_links":{"self":{"href":"/users/123"}},"id":123,"name":"Alice"}

In modern Chrome, this kind of response is a strong candidate for parsed preview and prettified response output because the media type clearly identifies it as JSON.

Why Chrome Sometimes Does Not Format JSON

Most “Chrome stopped formatting JSON” complaints are not really about Chrome. They come from one of a small number of predictable failure cases:

  • Wrong content type: The server returns JSON bytes but labels them as text/plain or text/html. Chrome is less likely to treat that as structured JSON.
  • Invalid JSON: A trailing comma, truncated body, server-side template noise, or an error page wrapped around the payload breaks parsing.
  • You need the raw text, not the tree: Sometimes the response is formatted, but you are looking in Preview while the real question is about exact escaping or whitespace in Response.
  • The payload is only JSON-like: JavaScript objects, log output, or embedded JSON fragments inside HTML are not the same thing as a valid JSON response.
  • The response is too awkward to inspect comfortably: Very large payloads may technically open in DevTools but still be unpleasant to search, compare, or share.

Where DevTools Still Falls Short

Chrome DevTools is excellent for inspection inside the request lifecycle, but it is not a full replacement for a dedicated JSON formatter. The moment you move beyond “inspect this response right now,” its limits show up quickly.

Use DevTools when

  • You are debugging a live request and need to inspect the returned structure quickly.
  • You want to verify whether the server sent the correct JSON media type.
  • You need to compare headers, timing, status code, and payload in one place.

Use a dedicated formatter when

  • You want to format pasted snippets, files, or partial fragments outside a captured request.
  • You need to clean up or validate JSON that arrived with the wrong content type.
  • You want to redact sensitive fields before sharing output with someone else.
  • You need repeatable formatting, side-by-side comparison, or offline work without browser state.

The Real Legacy

Chrome DevTools changed JSON formatting forever because it changed developer expectations forever. Once browser tooling made structured JSON inspection feel instant and normal, every other serious tool had to catch up. That said, DevTools solved the in-browser debugging problem, not every JSON problem. For live requests it is the first place to look. For validation, cleanup, privacy-sensitive pasting, or heavy comparison work, a dedicated formatter is still the better tool.

Need help with your JSON?

Try our JSON Formatter tool to automatically identify and fix syntax errors in your JSON. JSON Formatter tool