Google Chrome affiche la réponse JSON AJAX sous forme d'arbre et non sous forme de texte brut

215

Je ne trouve pas de réponse à celle-ci:

Mes appels AJAX renvoient des données JSON. Dans Google Chrome Developer Tools> Resources> XHR lorsque je clique sur la ressource à gauche, puis sur l'onglet Contenu, je vois la chaîne JSON comme une chaîne et non comme une arborescence comme le font Firebug et Firebug Lite.

Comment forcer Chrome à l'afficher sous forme d'arbre. Existe-t-il un type de contenu que mon fichier PHP doit avoir ???

Je serais heureux de connaître la réponse!

Merci Stefanos

ajax json google-chrome view tree GRboss
la source
La réponse de @Matt McClure ci-dessous est la réponse!
bcm
J'ai également eu des problèmes pour obtenir une structure arborescente lorsque les chaînes sont des guillemets simples "au lieu de guillemets doubles", en remplaçant "par" aidé
Matt

Réponses:

427

Pour afficher une arborescence dans les versions récentes de Chrome:

Accédez à Outils de développement> Réseau> la réponse donnée> Aperçu

Matt McClure
la source
105
Totalement glissé sur l'onglet "Aperçu" et regardait l'onglet "Réponse". Merci!
Ted Naleid
8
Mais je pense que pour obtenir cela, vous devez avoir le bon type de contenu.
alexserver
4
Oui, vous avez besoin d'un type de contenu "application / json" valide spécifié pour Chrome pour vous donner la liste déroulante réductible.
tweak2
5
C'est en effet un peu moins intuitif, car sur l'onglet En-têtes, ils nous permettent de basculer entre "brut" et "analysé", on peut donc s'attendre à ce qu'ils offrent une vue "analysée" similaire sur l'onglet Réponse.
G.Stoynev
1
J'aimerais que ce soit JSON au lieu d'un arbre
Simon_Weaver
57

Google Chrome prend désormais en charge cette fonction ( Developer Tools > Network > [XHR item in list] Preview).

De plus, vous pouvez utiliser un outil tiers pour formater le contenu json. Ici 's qui présente une vue de l' arbre, et ici est une autre qui formate simplement le texte (et fait la validation).

Trevor
la source
6

Le type de contenu correct pour les données JSON est application/json. Je suppose que c'est ce qui vous manque.

Quentin
la source
6
Malheureusement, cela ne force toujours pas Chrome à transformer la chaîne JSON en arborescence. Merci quand même!
GRboss
3

J'ai trouvé la réponse:

Vous DEVEZ encoder votre json comme ceci: {"c":21001,"m":"p"}mais pas {c:21001,m:"p"}ou{'c':21001,'m':'p'}

Ainsi, la clé d'un dict doit être placée entre guillemets ":, puis chrome la prévisualisera en json plutôt qu'en texte brut.

Bingyan Liu
la source
7
En effet, le premier est du JSON valide et les autres exemples ne le sont pas (bien qu'ils soient du javascript valide). Voir simonwillison.net/2006/oct/11/json
styfle
2

Pour qu'il affiche correctement le message JSON, il doit avoir le type MIME "application / json" et être correctement structuré.

Vous pouvez vérifier la structure ici

Mariana B.
la source
1

Il y avait un problème avec une version de Google Chrome Dev build 24.0.1312.5 qui faisait que le panneau d'aperçu n'affichait plus une arborescence d'objets json mais plutôt du texte plat. Il devrait être corrigé dans le prochain dev

Voir plus ici: http://code.google.com/p/chromium/issues/detail?id=160733

JeffBaumgardt
la source
0

Je ne sais pas si Chrome a ajouté cette fonctionnalité depuis la dernière réponse, mais j'ai pu voir la réponse json en ...

  • ouverture des outils de développement dans le navigateur sur la page avec la demande
  • soumettre la demande
  • dans les outils de développement - onglet "Console" - cliquez sur l'arborescence "Objet" sous la ressource pour développer

... J'ai pu voir la réponse comme une hiérarchie lisible qui montrait ce qu'il fallait demander et ce qui était retourné. (Aucun onglet Réseau ou Ressources n'avait quelque chose d'utile que j'ai pu trouver.)

Bonne demande!

Deborah
la source
-1

Vous pouvez utiliser l'extension Google Chrome: JSONView tous les résultats json formatés seront affichés directement sur le navigateur.

Quang Vu
la source
2
OP a demandé spécifiquement le code json affiché dans les outils de développement.
digout