开发者

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

开发者 https://www.devze.com 2023-01-19 00:31 出处:网络
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

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

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


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

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号