How to Pretty Print JSON Using Browser Dev Tools

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:

• https://jsonformatter.org/
• https://jsonformatter.curiousconcept.com/
• https://jsonformatter-online.com/

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

This article was syndicated from blog.eviltester.com. Author Alan Richardson is an Agile Software Development and Testing Consultant he has written 4+ books including Dear Evil Tester, Automating and Testing a REST API, Java For Testers. He has created 6+ online training courses covering Technical Web Testing, Selenium WebDriver and other topics. He is a prolific content creator on his blog, Youtube and Patreon.