O forum atual do agile testers está sendo depreciado, ou seja, não é possível criar ou responder a threads no momento. Por favor utilize o novo fórum https://github.com/AgileTesters/forum/issues

How to Pretty Print JSON using Browser Dev Tools

Topic created · 1 Posts · 83 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)


        "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": [
        "species": [
        "vehicles": [
        "starships": [
        "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