Hi webdev, and happy new 2020 for people already there, happy party for the rest of you!
I reeeeeally love Firefox JSON viewer and it's the main thing I miss since I decided to switch to Chrome (as a wannabe frontend dev I find it useful to adhere to industry standards until I have sufficient experience to make my own choices).
Is there any widely used and safe plugin that replicates FF magnificent experience?
Thanks and let's hope 2020 will be a great year for everyone.
Videos
In Chrome use JSONView or Firefox use JSONView
If you don't want to install extensions, you can simply prepend the URL with view-source:, e.g. view-source:http://content.dimestore.com/prod/survey_data/4535/4535.json. This usually works in Firefox and Chrome (will still offer to download the file however if Content-Disposition: attachment header is present).
JSONView for chrome
- In-browser viewer
- Expand and contract JSON items
- Format validation
- Doesn't require .json ending
Enable:
Chrome wrench button >> Tools >> Extensions >> "Allow access to file URLs"
I got impatient waiting for a new Chrome API and ported JSONView just using simple regex matching.
http://github.com/jamiew/jsonview-chrome
This is a rough draft, but it works! You can install it using "Load unpacked extension" from the chrome://extensions -- working out some kinks but will package it as a real extension soon.
For further prettification checkout the "XML Tree" extension (SuperUser won't let me post 2 links yet)
Firebug and Webkits developer tools display any object, structured and well readable. It seems like you try to output a JSON string instead an object. If thats the case, just parse it into an object before
console.log( JSON.parse( data ) );
and by the way, there are lots of neat methods on the console object, like console.dir() which directly lists an object properties/keys.
There are no JSON objects.
There are
Javascript object
JSON data as Javascript string
If you want to display JSON as string in an easily browseable manner do
var obj = JSON.parse(jsonstring);
console.log(obj)
In case anyone else is needing a way to view large JSON files (10MB+), I wrote this extension for Chrome:
https://chromewebstore.google.com/detail/json-navigator/glgilclfmgofaeffphalkglkgbbpmigf
It loads large JSON files faster than Chrome can generate the preformatted text (by a long shot), and has a lot of useful features that make finding the needles in the haystack easier.
Enjoy :)
Live demo: https://r55man.com/json-navigator/