How to Pretty Print JSON using Browser Dev Tools

Tester News Bot

Quick tips for pretty printing JSON in the Browser.

All examples in this post use the swapi.co API

Where do you find JSON?

In the network tab, I will very often be observing network traffic, and I’ll want to interrogate the message to view it more easily.

So I copy and paste it from the network tab.

I could use an online tool to format it and view it:

Or I could use the browser itself.

Paste the JSON into the console

Pasting the Json into the console will show an interactive view where I can expand and contract the outline and view the JSON.

Pretty Print it using JavaScript

JavaScript has a built in JSON class and I can use the stringify method to pretty print an object as JSON to the console.

So I first create an object from the JSON:

bob={"name":"Luke Skywalker"}

Then I can pretty print the JSON (4 is the indentation level):

JSON.stringify(bob, null, 4)

e.g

"{
    "name": "Luke Skywalker",
    "height": "172",
    "mass": "77",
    "hair_color": "blond",
    "skin_color": "fair",
    "eye_color": "blue",
    "birth_year": "19BBY",
    "gender": "male",
    "homeworld": "https://swapi.co/api/planets/1/",
    "films": [
        "https://swapi.co/api/films/2/",
        "https://swapi.co/api/films/6/",
        "https://swapi.co/api/films/3/",
        "https://swapi.co/api/films/1/",
        "https://swapi.co/api/films/7/"
    ],
    "species": [
        "https://swapi.co/api/species/1/"
    ],
    "vehicles": [
        "https://swapi.co/api/vehicles/14/",
        "https://swapi.co/api/vehicles/30/"
    ],
    "starships": [
        "https://swapi.co/api/starships/12/",
        "https://swapi.co/api/starships/22/"
    ],
    "created": "2014-12-09T13:50:51.644000Z",
    "edited": "2014-12-20T21:17:56.891000Z",
    "url": "https://swapi.co/api/people/1/"
}"

Free Video Showing How to Pretty Print JSON

Watch on YouTube

https://eviltester.com/2019/02/pretty-print-json-using-dev-tools.html