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

Question

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

User · Answer

To see a tree view in recent versions of Chrome   Navigate to Developer Tools   Network   the given response   Preview

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Google Chrome now supports this  Developer Tools  gt  Network  gt   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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

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

Examples related to ajax

Examples related to json

Examples related to google-chrome

Examples related to view

Examples related to tree