Google Chrome display JSON AJAX response as tree and not as a plain text

Ajax Problem Overview

I cannot find an answer to this one:

My AJAX calls return JSON data. In Google Chrome Developer Tools > Resources > XHR when I click on the resource on the left and then on the Content tab I see the JSON string as a string and not as a tree as Firebug and Firebug Lite do.

How do I force Chrome to display it as a tree. Is there a Content-type that my PHP file must have???

Ajax Solutions

Solution 1 - Ajax

To see a tree view in recent versions of Chrome:

Navigate to Developer Tools > Network > the given response > Preview

Solution 2 - Ajax

Google Chrome now supports this (Developer Tools > Network > [XHR item in list] Preview).

In addition, you can use a third party tool to format the json content. Here's one that presents a tree view, and here's another that merely formats the text (and does validation).

Solution 3 - Ajax

The correct content-type for JSON data is application/json. I assume that is what you are missing.

Solution 4 - Ajax

You can use Google Chrome Extension: JSONView All formatted json result will be displayed directly on the browser.

Solution 5 - Ajax

I've found the answer:

You MUST encode your json like this: {"c":21001,"m":"p"} but not {c:21001,m:"p"} or {'c':21001,'m':'p'}

Thus, the key of a dict must be wrapped in double quotes:", then chrome will preview it as json rather than plain text.

Solution 6 - Ajax

In order for it to display the JSON message properly it has to have the "application/json" mime type and to be correctly structured.

You can check the structure here

Solution 7 - Ajax

I'm not sure if Chrome has added this feature since the last answer, but I was able to view the json response by...

opening developer tools in the browser while on the page with the request
submitting the request
in developer tools - "Console" tab - click on the "Object" tree under the resource to expand

...I was able to view the response as a readable hierarchy that showed what to ask for and what is returned. (Neither Network or Resources tab had anything helpful that I was able to find.)

Happy requesting!

Solution 8 - Ajax

There was an issue with a build of Google Chrome Dev build 24.0.1312.5 that caused the preview panel to no longer display a json object tree but rather flat text. It should be fixed in the next dev

See more here: http://code.google.com/p/chromium/issues/detail?id=160733

Solution 9 - Ajax

I don't think the Chrome Developer tools pretty print XHR content. See: https://stackoverflow.com/questions/3181287/viewing-html-response-from-ajax-call-through-chrome-developer-tools

Solution 10 - Ajax

How to get Tree-view

See step by step instructions on how to do this in the below GIF. (I recorded in Chrome - chromium shouldn't be too different.)

Click on the link to enlarge and follow along

Content Type	Original Author	Original Content on Stackoverflow
Question	GRboss	View Question on Stackoverflow
Solution 1 - Ajax	Matt McClure	View Answer on Stackoverflow
Solution 2 - Ajax	Trevor	View Answer on Stackoverflow
Solution 3 - Ajax	Quentin	View Answer on Stackoverflow
Solution 4 - Ajax	Quang Vu	View Answer on Stackoverflow
Solution 5 - Ajax	Bingyan Liu	View Answer on Stackoverflow
Solution 6 - Ajax	Mariana B.	View Answer on Stackoverflow
Solution 7 - Ajax	Deborah	View Answer on Stackoverflow
Solution 8 - Ajax	JeffBaumgardt	View Answer on Stackoverflow
Solution 9 - Ajax	lambacck	View Answer on Stackoverflow
Solution 10 - Ajax	BenKoshy	View Answer on Stackoverflow