Prettify JSON in the browser console


I want to check the shape of data for an XHR request in Chrome. So I go to the Network panel in the inspector.

When I check the response tab, I see the following:


Not very inspectable.

When I check the preview tab, it’s a fancy preview mode, with all the nodes folded:

v [{id: 43,…}, {id: 44,…}, {id: 46,…}, {id: 45,…}]
> 0: {id: 43,…}
> 1: {id: 44,…}
> 2: {id: 46,…}
> 3: {id: 45,…}

Not easy to check the shape of the data either.


JSON.stringify to the rescue!

function prettifyJson(json) {
    json,      // copied from Response tab
    undefined, // ignore this argument (or read link below)
    2          // spaces to indent

Paste the above into the Chrome inspector.

Then copy the response in the response tab, and call the function:

>> prettifyJson([{"id":43,"child_node":{"active":true,"name":"name","created_at":"2015-05-25T16:55:09.600-04:00"},"notes":null}])


    "id": 43,
    "child_node": {
      "active": true,
      "name": "name",
      "created_at": "2015-05-25T16:55:09.600-04:00"
    "notes": null

// Tada!!


Written on August 10, 2016 by clemenspark