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 display it as a tree. Is there a Content-type that my PHP file must have???
To see a tree view in recent versions of Chrome:
Navigate to Developer Tools > Network > the given response > Preview
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).
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'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.
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'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!
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
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
I don't think the Chrome Developer tools pretty print XHR content. See: Viewing HTML response from Ajax call through Chrome Developer tools?
精彩评论