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

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 diplay it as a tree. Is there a Content-type that my PHP file must have???

I would happy to know the answer!

Thank you Stefanos

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).

To see a tree view in recent versions of Chrome:

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

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

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

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.

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

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

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!

I don't think the Chrome Developer tools pretty print XHR content. See: Viewing HTML response from Ajax call through Chrome Developer tools?