Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to Pretty Print JSON Using Browser Dev Tools

DZone's Guide to

How to Pretty Print JSON Using Browser Dev Tools

Here are some quick tips for pretty printing JSON in the browser using the browser's built-in developer tools.

· Web Dev Zone ·
Free Resource

Have you seen our HERE Twitch channel to livestream our Developer Waypoints series?

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



Developer Waypoints is a live coding series from HERE, which will teach you how to build with maps and location data.

Topics:
web dev ,json ,formatting ,dev tools ,javascript

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}