DEV Community

Skojio Community
Skojio Community

Posted on • Originally published at skojio.com

How to format JSON in Chrome without an extension

#json #chrome #developertips

Anyone who has stared at a 600-line JSON response from an API knows the moment: you want to scan it, but Chrome's default view is a single wall of text with no indentation, no folding, no hope.

You can solve this without installing anything. Three browser-native tricks cover most cases, and one free Skojio tool covers the rest.

Trick 1 — Use the DevTools Network panel

Open DevTools, switch to the Network tab, click the request that returned the JSON, then open the Response sub-tab and click the small {} pretty-print button at the bottom-left of the panel.

Chrome reformats the response in place: indentation, line breaks, the lot. No extension required.

The catch: this only works for responses Chrome captured during a network request. If you have JSON pasted from a Slack message or saved to a .json file, this trick doesn't help.

Trick 2 — Paste it into the Console

The DevTools Console gives you a real JavaScript REPL. Paste this in:

JSON.parse(`<paste your JSON here>`)
Enter fullscreen mode Exit fullscreen mode

Chrome renders the parsed object as a collapsible tree. You can click to expand and collapse, search within keys with Ctrl+F, and copy individual values cleanly.

This works well for moderately sized payloads. It struggles when the JSON contains backticks (which break the template literal) or when the payload is large enough to make the console laggy.

Trick 3 — view-source: for static files

If you have JSON saved as a file or hosted somewhere static, prefix the URL with view-source::

view-source:https://api.example.com/data.json
Enter fullscreen mode Exit fullscreen mode

Chrome renders it monospace with line numbers. Combined with Ctrl+F this is enough to scan structure quickly.

When the tricks fall short

The browser tricks fail when:

  • You want to validate the JSON, not just view it (catch missing commas, wrong quote types)
  • You want to minify for production (strip whitespace)
  • You want to compare two JSON payloads visually
  • You're pasting JSON with embedded backticks or other awkward characters
  • You want a permanent URL you can bookmark

The Skojio JSON Formatter runs entirely in your browser — no data leaves your machine — and handles all of the above in a single panel. It validates with line-number errors, lets you toggle between formatted and minified views, and you can paste anything (backticks included) without losing your mind.

Picking the right tool for the moment

Situation Best option
API response in DevTools Pretty-print button in Network panel
Quick tree view of pasted JSON Console JSON.parse(...)
Static .json file view-source: prefix
Validation, minification, sharing Skojio JSON Formatter

None of these require installing an extension. Pick the one that fits the moment.

Top comments (0)