How to Pretty Print JSON using Browser Dev Tools

Topic created · 1 Posts · 74 Visualizações
  • 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.

    showing json in 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.

    showing json in the console

    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/"
    }"
    

    how to use JSON stringify

    Free Video Showing How to Pretty Print JSON

    Watch on YouTube

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