How to get easy-to-read JSON trees with this free Chrome Extension (or Firefox Plugin)

JSON is a very popular file format. Sometimes we may have a JSON object inside a browser tab that we need to read and this can be difficult.

We may need to go and search for an online tool that turns it into an easy-to-read format so we can understand it.

Now, here is a Chrome and Firefox extension that does the formatting and makes your JSONs instantly pretty inside your browser, without having to perform many unnecessary steps.

It comes with support for JSON and JSONP and highlights the syntax so that you can differentiate different attributes and values accordingly. It also comes with the option to collapse nodes, clickable URLs that you can open in new tabs, and you see the raw, unformatted JSON.

It works with any JSON page, regardless of the URL you opened. It also works with local files, after you enable it in chrome://extensions. You can inspect the JSON by typing json into the console.

You can install the extension by going here for Chrome and here for Firefox and then test it, for example, by visiting this API response.

This is what it looks like, before formatting:

Now, take a look at the beautiful JSON response you get with JSON Formatter:

Here is a pro tip: Hold down CTRL (or CMD on Mac) while collapsing a tree, if you want to collapse all its siblings too.

It is an open-source project, so you can view its source code on GitHub.

Thanks for reading.