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

I have also had issues getting a tree structure when the strings are single quotes ' instead of double quotes ", changing ' to " helped — Matt, Mar 22 '15 at 19:08

score 528 · Answer 1 · answered Dec 13 '11 at 20:13

528

To see a tree view in recent versions of Chrome:

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

answered Dec 13 '11 at 20:13

Matt McClure

16,009
2
28
30

144

Totally glossed over the "Preview" tab and was looking at the "Response" tab. Thanks! – Ted Naleid Jan 24 '12 at 19:47
8

But i think to get this, you need to have the correct content-type. – alexserver Feb 15 '13 at 17:33
4

Yes, you need a valid "application/json" content-type specified for chrome to give you the collapsible drop-down. – tweak2 Feb 19 '13 at 22:05
5

It is indeed a little less intuitive, because on the Headers tab they let us switch between "raw" and "parsed", so one would expect that they'd offer similar "parsed" view on the Response tab. – G. Stoynev Oct 28 '13 at 18:20
2

I wish it actually was JSON instead of a tree – Simon_Weaver May 19 '18 at 06:27
After all these years... +1 – Kenny Cason Mar 02 '20 at 00:23
it would be great to have the expand all, collapse, and source toggles. – Kenji Noguchi Apr 19 '20 at 04:55
you think they'd use a more reasonable and equally widely applicable name like "formatted" or "structured". "preview" doesn't say this feature at all. – kristopolous Jul 11 '21 at 04:58

Trevor · Answer 2 · 2014-07-17T20:41:29.327

74

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

edited Jul 17 '14 at 20:41

answered Dec 02 '10 at 22:37

Trevor

13,085
13
76
99

1

flawless answer! – Gaurav Apr 15 '21 at 11:10

score 10 · Answer 3 · edited Oct 26 '18 at 05:32

10

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

edited Oct 26 '18 at 05:32

Harsha Biyani

7,049
9
37
61

answered Oct 26 '18 at 03:04

Quang Vu

362
3
4

4

OP asked specifically about json code shown inside dev tools. – digout May 30 '19 at 10:34
Thank you ,Maybe this is not the perfect answer for the OP's question.But I was looking for this .Up voted – Hasindu Dahanayake Jan 18 '21 at 05:17

score 6 · Answer 4 · answered Oct 08 '10 at 07:31

6

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

answered Oct 08 '10 at 07:31

Quentin

914,110
126
1,211
1,335

7

Unfortunately this still doesn't force Chrome to turn the JSON string into tree. Thanks though! – GRboss Oct 08 '10 at 08:42

score 3 · Answer 5 · edited Dec 16 '11 at 14:11

3

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.

edited Dec 16 '11 at 14:11

Chadwick

12,555
7
49
66

answered Dec 16 '11 at 13:59

Bingyan Liu

39
2

7

That's because the first one is valid JSON and the other examples are not (although they are valid javascript). See http://simonwillison.net/2006/oct/11/json/ – styfle Dec 04 '12 at 01:34

score 2 · Answer 6 · answered Aug 16 '12 at 13:08

2

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

answered Aug 16 '12 at 13:08

Mariana B.

437
5
14

score 1 · Answer 7 · answered Sep 11 '12 at 23:20

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!

score 1 · Answer 8 · answered Dec 04 '12 at 16:26

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

score 1 · Answer 9 · answered Jun 17 '21 at 03:16

1

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

answered Jun 17 '21 at 03:16

BenKoshy

33,477
14
111
80

score 0 · Answer 10 · edited May 23 '17 at 12:10

0

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

edited May 23 '17 at 12:10

Community

1
1

answered Dec 02 '10 at 16:22

lambacck

9,768
3
34
46

score 0 · Answer 11 · edited Jun 08 '23 at 20:11

0

Chrome now has a button for pretty printing responses. Its the {} in the bottom left of the "Response" window:

edited Jun 08 '23 at 20:11

Benjamin Buch

4,752
7
28
51

answered Jun 01 '23 at 10:57

Ilummini

29
6

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

11 Answers11

How to get Tree-view

Linked