36

There are some great Chrome extensions around for pretty-printing JSON (great SU question here: Google Chrome Plugin for JSON Reading), but they all seem to depend on detecting whether the incoming document is in a JSON format automagically.

Knowing that, the question is: How can I set it up so that I can pretty-print displayed JSON manually, rather than relying on some extension's magical detection (that may or may not fail to trigger when I need it to)?

I started from that SU post, and found some extensions:

(i.e., the results for JSON formatter). Those, and more, will all detect JSON formatting, and display it in a pretty-printed way, but none of them support an easy, bugproof way to manually turn it on on a page where JSON is not detected (except by, perhaps, tricking the engine by sticking format=json in the query string, but none of them were explicit about telling me I could do that).

Is there a better option out there?

Giacomo1968
  • 58,727
A. Wilson
  • 693

4 Answers4

22

JSON Formatter provides buttons to toggle between raw and formatted views of a JSON document.

It is open source. As of March 2023, the chrome extension was last updated on January 2023 and the last commit was in March 2023.

As of November 2016, the last commit was in March 2015. There are over 100 forks, many of which have more recent commits. It's not immediately clear if one of those forks is better maintained.

The OP of this answer originally wrote: "I feel like a big dummy. Some more thorough searching turned up https://chrome.google.com/webstore/detail/the-missing-json-inspecto/hhffklcokfpbcajebmnpijpkaeadlgfn/related, which is exactly what I need." However, an edited version of this answer indicated that that extension was not open source and was no longer maintained.

Matiboux
  • 3
  • 3
A. Wilson
  • 693
18

Here is a way with Chrome 97 and no plugins.

  1. Visit a API or JSON resource in the URL
  2. Open developer tools. (F12)
  3. Click the Source tab.
  4. Open a source or hit CTRL-P
  5. Select the JSON
  6. In the top, select Pretty Print
  7. You get nice JSON human-readable formatting!

Here is an example:

enter image description here

enter image description here

Jess
  • 985
3

I ran into the same problem and dislike the bloated-ware so I develop Jipy It simply ask you to highlight (full or partial) JSON payload and trigger the format function. (hotkey, context-menu, or button)

TLJ
  • 131
0

Check also https://stackoverflow.com/questions/27778338/how-to-get-json-output-in-chrome-dev-tools-console

In console tab: copy(your_json) and press CTRL+V to past your prettify json version

fearis
  • 103
  • 5