Is there an easier way to view json object from firefox or chrome's developer console?

Question

What is the easiest way to read json from Firefox or Chrome's developer console? Do I need to install a plugin? Or hopefully there's a javascript function that lets you view json in a way that's much easier to read...

For example. If I try console.log(data) where data is the json object, the developer console displays it like a one huge chunk of string instead of displaying the structure, so it's really hard to sift through and filter out what I want.

EDIT: I apologize for the confusion I caused. I just checked Chrome and it seems Chrome does display JSON in a structured way. However on Firefox it's all jumbled together. I attached the screenshot. I guess the question is "Is there a way to display this in a more structured way like on Chrome?", and as I learned from below, I guess console.dir() takes care of this. Then my last question would be: Is this an intended behavior?

Answer 1

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)

Answer 2

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.

Answer 3

What version of Chrome are you using? When I console.log an object, it is displayed as an object where you can expand properties, not a string. (Chrome 16.0.912.77). Are you parsing the JSON before logging it or just logging the JSON string?