Pretty Print JSON URL

I work a lot with JSON endpoints and having a browser extension to pretty print the JSON response is invaluable. However, sometimes I’m using a different machine (or guiding someone on their machine) and rather than asking them to install a browser extension, I use this trick. If the user is on the page displaying the JSON response, running this command in the browser console will pretty print the response await (await fetch(window.location.href)).json().

Pretty Print JSON from URL Example

For example, if you visit my Mastodon account and request the JSON response https://phpc.social/@salcode.json, you’ll see a page of code that is difficult to read.

If you then run

await (await fetch(window.location.href)).json()

from the browser console, you’ll get a nicely formatted JSON object in the browser console and you can expand or collapse parts of the object.

Browser Extension

On Google Chrome, I’m a fan of the JSONVue extension, which makes running the above command unnecessary.

Sal Ferrarello (@salcode)

Sal is a PHP and JavaScript developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a principal engineer.