How to Format JSON in Chrome DevTools When an API Response Looks Messy

Quick answer: Open DevTools (F12), go to the Network panel, filter by Fetch/XHR, and click the request. The Preview tab shows the JSON as an expandable tree; the Response tab shows the raw body and has a {} button that pretty-prints it. If Preview shows nothing useful, the server probably returned HTML or invalid JSON, so check the raw Response and the Content-Type header first.

An API call succeeds, but its response is a dense line of braces and quotes. Before copying the entire thing into an editor, open Chrome DevTools. There is a good chance the browser already has what you need. The distinction between Preview and Response matters most when an API is returning the wrong content.

Open a valid sample in the JSON Viewer to explore objects and arrays as collapsible nodes alongside the formatted code.

Step 1: Capture the actual request

Open the page using the API and press F12 (or use the browser's developer-tools menu). Go to Network, then repeat the action that triggers the request. If the panel is crowded, filter by Fetch/XHR.

Click the relevant request and check:

• Status: was it a successful response, an authorization failure, or a server error?
• Headers: is the server returning an appropriate Content-Type, such as application/json? The JSON content type guide explains what the header should look like and why text/html on a JSON endpoint is a red flag.
• Preview: can you expand objects and arrays to find the field you want?
• Response: what bytes/text did the server actually return?

Do not assume every successful HTTP request contains JSON. A redirect or misconfigured endpoint can return HTML instead.

Step 2: Use Preview for structure and Response for evidence

Suppose a response looks like this:

{"order":{"id":1042,"customer":{"name":"Maya","city":"Ahmedabad"},"items":[{"sku":"P-10","qty":2}]}}

In Preview you can typically expand order, then customer, and see city immediately. This is faster than counting braces in a line of text. If you prefer the raw text but indented, open Response and click the {} (pretty print) button at the bottom of the panel.

But if your application throws SyntaxError: Unexpected token '<' (older Chrome versions phrase it as Unexpected token < in JSON at position 0), open Response. You might find an HTML login page or a framework error page. In that situation, reformatting the text won't help: the endpoint, session or response handling needs fixing. Our JSON parse error guide walks through that case, and the Unexpected token guide decodes the rest of the message.

Step 3: Copy a safe example for deeper inspection

Sometimes the payload is deeply nested or you want to compare its structure with another response. Right-click the request in the Network panel and choose Copy, then Copy response, or select and copy the text from Response. Then paste a sanitized example into JSON Prettifier.

You can inspect indentation, syntax and object key ordering. If a response is invalid JSON, the validator will help narrow down where parsing fails. For very large responses, the guide to validating large JSON in the browser explains what to expect from browser-based tools.

Remove access tokens, session cookies, personal information and production secrets first. A request can include sensitive headers even when the response body seems harmless, so be particularly careful with Copy as cURL, which captures the whole request including cookies and authorization headers. The redaction guide lists the fields that are easy to miss.

Step 4: If you need formatted JSON in JavaScript, use JSON.stringify

For a value that is already a JavaScript object, you can add indentation like this:

const data = {
  order: { id: 1042, items: [{ sku: 'P-10', qty: 2 }] }
};

console.log(JSON.stringify(data, null, 2));

The final 2 adds two spaces of indentation. If you have raw JSON text, parse it first:

const raw = '{"order":{"id":1042}}';
console.log(JSON.stringify(JSON.parse(raw), null, 2));

Only parse text you expect to contain valid JSON. Parsing a plain JavaScript object, an HTML response or undefined will not do what you want.

In the DevTools Console, the copy() helper puts the result straight on your clipboard, which is handy for objects that are too large to read in the log:

copy(JSON.stringify(data, null, 2));

Why Chrome sometimes won't show a JSON tree

A few common reasons:

• The server sends HTML, plain text, or an empty body instead of JSON.
• The response is malformed and cannot be parsed as JSON.
• The response has an unusual content type or format.
• The request you clicked isn't the one your application uses.

Start with the raw Response and headers. They tell you far more than a guessing game about the frontend code.

Should you use DevTools or an online formatter?

Use DevTools when the question is about the HTTP request: status, redirect, headers, timing, or the actual response. Use a formatter when you want to read or validate an isolated JSON document outside the running application. They solve related but different problems.

If you're working inside an editor instead, see our VS Code JSON validation guide or the five ways to format JSON.

Bottom line

Next time an API response looks unreadable, investigate the request first. You may not need a separate tool until you want to study the JSON outside the browser session.