Google Chrome muestra la respuesta JSON AJAX como árbol y no como texto sin formato

215

No puedo encontrar una respuesta a esta:

Mis llamadas AJAX devuelven datos JSON. En Herramientas para desarrolladores de Google Chrome> Recursos> XHR cuando hago clic en el recurso de la izquierda y luego en la pestaña Contenido, veo la cadena JSON como una cadena y no como un árbol como lo hacen Firebug y Firebug Lite.

¿Cómo fuerzo a Chrome a mostrarlo como un árbol? ¿Hay un tipo de contenido que debe tener mi archivo PHP?

¡Me encantaría saber la respuesta!

Gracias Stefanos

ajax json google-chrome view tree GRboss
fuente
¡La respuesta de @Matt McClure a continuación es la respuesta!
bcm
También he tenido problemas para obtener una estructura de árbol cuando las cadenas son comillas simples 'en lugar de comillas dobles', cambiar 'a' ayudó
Matt

Respuestas:

426

Para ver una vista de árbol en versiones recientes de Chrome:

Vaya a Herramientas para desarrolladores> Red> la respuesta dada> Vista previa

Matt McClure
fuente
105
Totalmente pasado por alto la pestaña "Vista previa" y estaba mirando la pestaña "Respuesta". ¡Gracias!
Ted Naleid
8
Pero creo que para obtener esto, debe tener el tipo de contenido correcto.
alexserver
44
Sí, necesita un tipo de contenido válido "aplicación / json" especificado para Chrome para obtener el menú desplegable plegable.
tweak2
55
De hecho, es un poco menos intuitivo, porque en la pestaña Encabezados nos permiten cambiar entre "sin procesar" y "analizado", por lo que uno esperaría que ofrecieran una vista "analizada" similar en la pestaña Respuesta.
G. Stoynev
1
Desearía que en realidad fuera JSON en lugar de un árbol
Simon_Weaver
57

Google Chrome ahora es compatible con esto ( Developer Tools > Network > [XHR item in list] Preview).

Además, puede usar una herramienta de terceros para formatear el contenido json. Aquí 's que presenta una vista de árbol, y aquí es otra que simplemente da formato al texto (y lo hace de validación).

Trevor
fuente
6

El tipo de contenido correcto para los datos JSON es application/json. Supongo que eso es lo que te estás perdiendo.

Quentin
fuente
66
Desafortunadamente, esto todavía no obliga a Chrome a convertir la cadena JSON en árbol. Gracias sin embargo!
GRboss
3

He encontrado la respuesta:

DEBES codificar tu json así: {"c":21001,"m":"p"}pero no {c:21001,m:"p"}o{'c':21001,'m':'p'}

Por lo tanto, la clave de un dict debe estar entre comillas dobles: "luego Chrome la previsualizará como json en lugar de texto sin formato.

Bingyan Liu
fuente
77
Esto se debe a que el primero es JSON válido y los otros ejemplos no lo son (aunque son javascript válidos). Ver simonwillison.net/2006/oct/11/json
styfle
2

Para que muestre el mensaje JSON correctamente, debe tener el tipo mime "application / json" y estar estructurado correctamente.

Puedes consultar la estructura aquí

Mariana B.
fuente
1

Hubo un problema con una compilación de Google Chrome Dev build 24.0.1312.5 que provocó que el panel de vista previa ya no mostrara un árbol de objetos json sino un texto plano. Debería arreglarse en el próximo desarrollador

Ver más aquí: http://code.google.com/p/chromium/issues/detail?id=160733

JeffBaumgardt
fuente
0

No estoy seguro de si Chrome ha agregado esta función desde la última respuesta, pero pude ver la respuesta de json al ...

  • abrir herramientas de desarrollador en el navegador mientras está en la página con la solicitud
  • enviando la solicitud
  • en herramientas de desarrollador - pestaña "Consola" - haga clic en el árbol "Objeto" debajo del recurso para expandir

... pude ver la respuesta como una jerarquía legible que mostraba qué pedir y qué se devuelve. (Ni la pestaña Red o Recursos tenía algo útil que pude encontrar).

Feliz solicitud!

Deborah
fuente
-1

Puede usar Google Chrome Extension: JSONView todos los resultados json formateados se mostrarán directamente en el navegador.

Quang Vu
fuente
2
OP preguntó específicamente sobre el código json que se muestra dentro de las herramientas de desarrollo.
excavación