JSON Formatter, Diff y Tree Viewer: comparar y explorar…

Tres herramientas complementarias para depurar JSON

Una vez validada la sintaxis, empieza el trabajo de verdad: leer un payload minificado, detectar qué cambió entre dos versiones de API o navegar una config anidada de varios miles de líneas. El formateador JSON en línea vuelve legible un documento compacto en un clic — indentación de 2 o 4 espacios, tabulaciones, sin alterar los datos. El diff JSON compara dos documentos lado a lado y lista las rutas modificadas, añadidas o eliminadas. El visualizador JSON en árbol pliega las ramas profundas, resalta los resultados de búsqueda y evita scrollear líneas interminables. Estas tres herramientas del hub de herramientas JSON se ejecutan enteramente en el navegador — sin envío a servidor. Si el JSON es inválido, empieza por la guía de validar y reparar JSON antes de formatear o comparar.

Formatear sin cambiar los valores — solo espacios e indentación

Diff estructural con rutas JSON y modo solo claves para el drift de esquema

Árbol plegable con búsqueda en claves y valores de cadena

Workflow completo: validar → formatear → explorar → comparar → minificar

100 % local — ideal para payloads API, configs y secretos

Buenas prácticas y límites honestos

Orden recomendado en el workflow

Formatear o comparar JSON inválido produce errores frustrantes. Respeta el orden: validar (y reparar si hace falta) → formatear o explorar → diff → minificar para prod.

No confíes en el formateador para corregir la sintaxis — parsea de forma estricta

El diff compara la estructura parseada, no el texto bruto línea a línea

El tree viewer es de solo lectura — sin edición inline

Para fixtures versionadas, activa el orden de claves antes del diff para reducir el ruido

Documenta el workflow en tu equipo: validador → formatter → diff en review de PR

Límites a conocer

Cada herramienta tiene un perímetro preciso — no esperes un IDE completo ni un merge automático.

Diff: el orden de los elementos en un array cuenta — reordenar = cambio

Diff: sin comparación YAML/XML directa — convierte primero a JSON

Tree viewer: archivos muy grandes pueden ralentizar el navegador móvil

Formatter: no minifica — usa minify-json para reducir el tamaño

Escape/unescape: solo cadenas, no documentos JSON enteros

Formateador, diff y árbol: cuándo usar cada herramienta

JSON Formatter — embellecer para la relectura

El formateador JSON parsea la entrada, comprueba que es válida y reescribe el documento con una indentación coherente. Los números, el orden de las claves y las cadenas permanecen idénticos — solo cambian los espacios en blanco.

Indentación de 2 espacios, 4 espacios o tabulaciones según tu guía de estilo

Opción de ordenar claves (desactivada por defecto) para diffs estables entre commits

Entrada inválida → mensaje de error; corrige primero o pasa por json-repair

Complemento del minificador: formateador = legibilidad, minify-json = tamaño de payload

El mismo editor Monaco que el validador — experiencia coherente en el hub

JSON Diff — comparar dos versiones de forma estructural

El diff JSON exige dos documentos válidos. Señala los valores modificados, las claves añadidas o eliminadas y los cambios de tipo — con las rutas JSON Pointer para localizar cada delta.

Comparación posicional de arrays — un reordenamiento puede aparecer como cambio

Modo «solo claves»: ignora las ediciones de valores, útil para comprobar la forma del esquema

Resumen de las rutas afectadas — ideal para reviews de config o regresiones API

Ambos paneles deben parsear antes de Comparar — valida o repara antes

Para texto libre (no JSON), usa el diff de texto del hub de utilidades

JSON Tree Viewer — explorar sin IDE

El visualizador JSON construye un árbol interactivo tras un parse correcto. Profundidad ≥ 2 plegada por defecto en documentos grandes; búsqueda en claves y valores de cadena; expandir todo / plegar todo para payloads muy profundos.

Solo lectura — edita en otro sitio y vuelve a pegar para refrescar el árbol

Ideal para respuestas API desconocidas en integración o exports de config voluminosos

Documentos enormes pueden tensionar el móvil — se recomienda Chrome desktop

Encadena con json-diff después de localizar la rama sospechosa

Complementa json-formatter: formatear para leer en líneas, árbol para navegar en profundidad

Escapar / desescapar — mención rápida

Cuando tu JSON contiene cadenas multilínea, comillas o secuencias copiadas desde las DevTools, la herramienta de escapar JSON (pestañas Escape y Unescape) prepara o restaura literales vía JSON.stringify / JSON.parse nativos — antes de formatear o explorar.

Escape: texto bruto → contenido escapado para un valor de cadena JSON

Unescape: secuencias \n, \" restauradas a texto legible

Opción de escapar barras oblicuas para integración en una etiqueta script HTML

Tratamiento local — sin conversión automática al teclear, clic Convertir explícito

Workflow de debug: formatear, explorar, comparar

Escenario 1 — respuesta API minificada ilegible

Copias una respuesta 200 desde las Network DevTools — una sola línea de varios ko.

Paso 1: validar (si hay duda)

Pega en el validador JSON. ¿Error de sintaxis? Consulta la guía de reparación antes de continuar.

Paso 2: formatear

Abre el formateador JSON, elige 2 o 4 espacios y pulsa Formatear. El documento se vuelve legible sin cambiar los datos.

Paso 3: explorar en árbol (opcional)

Para un objeto muy anidado, pega la misma salida en el visualizador JSON — pliega las ramas inútiles y busca una clave concreta.

Escenario 2 — regresión entre staging y producción

Dos snapshots de config o de respuesta API deben compararse antes de un despliegue.

Paso 1: normalizar (opcional)

Formatea ambos documentos con el mismo estilo de indentación — o activa el orden de claves en el formateador para diffs más estables.

Paso 2: comparar

Pega el original a la izquierda y la nueva versión a la derecha en el diff JSON. La tabla lista cada ruta modificada.

Paso 3: profundizar en el delta

¿Una ruta sospechosa? Copia la rama en el tree viewer o reformatea solo esa sección para la review de equipo.

Complementos en el hub JSON

Estas herramientas se integran en un pipeline más amplio en el hub de herramientas JSON.

json-formatter: embellecer con indentación configurable y orden de claves opcional

json-diff: comparación estructural, modo solo claves para el drift de esquema

json-tree-viewer: árbol plegable, búsqueda, expandir todo / plegar

json-escape: preparar o restaurar cadenas escapadas antes de integrar

json-validator + json-repair: siempre aguas arriba si la sintaxis es dudosa

minify-json: compacta el payload final antes de enviarlo a producción

Conclusión

Depurar JSON no debería exigir instalar una extensión ni enviar payloads sensibles a un servidor de terceros. Formatea para leer, explora en árbol para navegar, compara para validar regresiones — todo en local en FastMinify. Encadena con la validación y la minificación cuando estés listo para entregar.

Explorar las herramientas JSON ahora

Valida siempre la sintaxis antes de formatear o comparar

Usa el diff en modo solo claves para comprobar la forma de un esquema

El tree viewer destaca en configs anidadas — no en la edición

Normaliza la indentación (o ordena las claves) antes de una review de diff

Consulta la guía de validar/reparar JSON para payloads rotos

JSON Formatter, Diff y Tree Viewer: comparar y explorar payloads