Ver JSON
El visor de JSON muestra un documento como un árbol plegable en tu navegador. El árbol se virtualiza sobre una lista de filas aplanada, así que una respuesta de API de cincuenta mil nodos abre y se desplaza a la misma velocidad que una pequeña, y cada fila lleva el puntero RFC 6901 que la referencia.
¿Cómo funciona Ver JSON?
Un visor de JSON se juzga por completo por cómo se comporta con un documento demasiado grande para leerlo como texto — que es la única razón por la que alguien abre uno. La mayoría falla ahí, y falla por la misma razón estructural: renderiza el árbol como componentes anidados, uno por nodo. Es la implementación obvia, y significa que una respuesta de cincuenta mil nodos produce cincuenta mil elementos DOM, de los cuales quizá cuarenta están en pantalla. El desplazamiento se vuelve entrecortado, expandir una rama vuelve a renderizar todo su subárbol, y la pestaña empieza a consumir cientos de megabytes.
Este visor aplana primero el documento en un array de filas — cada una con su profundidad, su tipo, su número de hijos y el índice donde termina su subárbol — y luego renderiza solo las filas dentro del viewport. El DOM mantiene unos cincuenta elementos sin importar el tamaño del documento, así que un archivo grande abre tan rápido como uno pequeño.
Registrar dónde termina cada subárbol es lo que hace barato el plegado. Ocultar una rama es un solo salto de índice en vez de recorrer todo lo que hay dentro, así que plegar la raíz de un documento de 50,000 nodos cuesta una comparación en lugar de cincuenta mil. La misma estructura hace que la búsqueda tenga sentido: las coincidencias se buscan en todo el documento, no solo en la parte expandida, y se conserva cada antepasado del camino hacia una coincidencia, porque un valor sin su ruta no te dice nada.
El aplanado es iterativo, con una pila explícita en lugar de recursión. Un recorrido recursivo desborda la pila de llamadas de JavaScript alrededor de los diez mil niveles de anidamiento, y un documento tan profundo es precisamente el que alguien lleva a un visor porque nada más logra abrirlo. Hay una prueba con veinte mil niveles.
Cada fila muestra el puntero JSON RFC 6901 que la referencia — /order/lines/0/sku — y lo copia al hacer clic. Es la cadena que pegas en un JSON Patch, una ruta de jq, una aserción de prueba o un reporte de error, y tenerla exacta elimina el paso más tedioso de trabajar con una respuesta desconocida.
Documento
{"order":{"lines":[{"sku":"WID-1","qty":2}]}}Árbol
▾ root { 1 }
▾ order { 1 }
▾ lines [ 1 ]
▾ 0 { 2 }
sku "WID-1" /order/lines/0/sku
qty 2 /order/lines/0/qty¿Qué opciones y casos límite admite Ver JSON?
| Parámetro | Tipo | Valor predeterminado | Comportamiento y casos límite |
|---|---|---|---|
| Profundidad inicial | niveles | 2 | Los contenedores más profundos que esta empiezan plegados, para que un documento grande se abra como una vista general legible en lugar de cuarenta mil líneas. Expandir todo está a un solo clic. |
| Virtualización | solo en la vista | — | Cualquier momento hay unas cincuenta filas en el DOM, sin importar el tamaño del documento. Esta es la diferencia entre un visor que abre una respuesta de 20 MB y uno que cuelga la pestaña. |
| Búsqueda | subcadena | insensible a mayúsculas | Coincide con claves y valores renderizados en todo el documento, incluyendo ramas plegadas, y mantiene todos los ancestros de una coincidencia para que la ruta siga visible. |
| Puntero JSON | RFC 6901 | mostrado por fila | Haz clic para copiar. Las claves que contienen / o ~ se escapan como ~1 y ~0, para que el puntero sea correcto y no solo plausible. |
| Colores de tipo | cadena, número, booleano, null | — | Los escalares se colorean por tipo, para que una cadena numérica "42" sea visualmente diferente del número 42 — una distinción que causa una sorprendente cantidad de errores de integración. |
| Edición | no compatible | — | Este es un visor. Para editar valores, renombrar claves y reordenar arrays, usa el Editor JSON, que mantiene sincronizado un panel de texto y un árbol. |
| Tamaño de entrada | bytes | 8 MB | El análisis se ejecuta en el hilo principal. Por encima del límite, la herramienta rechaza la entrada en lugar de congelarse. El árbol en sí mismo maneja muchos más nodos de los que permite el límite del analizador. |
Preguntas frecuentes
¿Abrirá un archivo realmente grande?
Hasta el techo de parseo de 8 MB, sí, y el árbol no es el cuello de botella — renderiza solo lo que está en pantalla, así que el número de nodos casi no le afecta. El límite es el paso de parseo, que corre en el hilo principal y se rechaza por encima de 8 MB en lugar de intentarse, porque intentarlo bloquea la pestaña.
¿Qué es el /order/lines/0/sku que aparece junto a cada fila?
El puntero JSON RFC 6901 que referencia ese nodo. Haz clic para copiarlo. Es la ruta que pegas en una operación JSON Patch, una aserción de prueba o un reporte de error, y tenerla exacta — incluidos los escapes ~0 y ~1 para claves que contienen ~ y / — elimina la parte más propensa a errores de describir dónde está algo.
¿Puedo editar valores aquí?
No, a propósito. Un visor que además edita tendría que reconciliar dos fuentes de verdad en cada tecla, y por eso el editor de JSON es una herramienta aparte: mantiene sincronizados un panel de texto y un árbol, con deshacer. Mantener este de solo lectura es lo que le permite seguir siendo rápido con documentos con los que el editor sufriría.
¿Por qué mi número se muestra en un color distinto al de mi cadena?
Los escalares se colorean por tipo. Importa más de lo que suena: la cadena "42" y el número 42 se ven idénticos en texto en bruto y se comportan de forma completamente distinta después. Que un valor entrecomillado sea una cadena donde se esperaba un entero es una causa recurrente de fallos de integración, y el color lo hace visible de un vistazo.
¿La búsqueda mira dentro de las ramas plegadas?
Sí. La búsqueda recorre todo el documento aplanado en lugar de las filas visibles, así que una coincidencia enterrada en un subárbol plegado se encuentra y se muestra junto con los antepasados que llevan a ella. Limpia la consulta y el árbol vuelve a lo que tenías expandido.
¿Se sube el documento?
No. Lo parsea y lo renderiza JavaScript en la pestaña que ya tienes abierta. Abre DevTools, ve al panel «Network» y pega una respuesta — nada que la contenga sale. Los documentos para los que la gente necesita un visor suelen ser respuestas de API de producción, que es justo el material que no debería pasar por un servidor desconocido para hacerse legible.