Pain-Free JSON Formatting in Chrome

DZone 's Guide to

Pain-Free JSON Formatting in Chrome

Here's a quick post that will even more quickly boost your productivity when working with JSON in web apps.

· Web Dev Zone ·
Free Resource

With the Super Bowl now over, surely your attention has now switched to how to view large amounts of unformatted JSON in an effective way.

Ok, maybe your attention hasn't been directed that way, but, ask yourself how many times as a web developer have you had to view a raw dump of an entire JSON document? I mean the kind that is tens of thousands of kilobytes large (or more!); most likely for debugging or tracking a setting down.

Whatever the reason, it's a pain to try to copy and paste that text into an online JSON formatter (or some other tool), especially if the JSON that is dumped is likely to change or be updated frequently (isn't debugging fun?). And sure, sometimes it's preferable to use an external tool; however, I find that if I'm working with debug output from a web app, it's often rather inconvenient to have to leave the current tab in my browser, and it's even worse if I have to select only a section of the JSON output.

Fortunately, if you use Chrome (I know I do), there is a browser plug-in that will save you countless headaches: JSONView was created to address the issues above, and is extremely easy to use. With the plug-in enabled in Chrome, all you need to do is call up that JSON output and the plug-in will automatically pretty-print the data, complete with coloring, indenting, and the ability to collapse and expand blocks. How easy is that?

While the plug-in itself has relatively few options, it doesn't need many. If you're really keen, you can create your own formatting style by using its style editor, which can be rather handy.

I know that many people on my team and in my company make use of this plug-in, so I know I'm not just a lone fan-boy. If you frequently run into the situations described above, then this plug-in will definitely improve your productivity and lower your frustration levels; and who doesn't want that?

formatting ,json ,web data ,web dev

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}