Diff de JSON / Comparación Estructural

¿Qué es Diff de JSON / Comparación Estructural?

Un diff de texto (como el de git diff) compara dos archivos línea por línea, así que reformatear un documento JSON — reindentarlo, o escribir las mismas claves en otro orden — se ve como una pared de cambios aunque nada relevante haya cambiado. Esta herramienta en cambio parsea ambos documentos y los compara estructuralmente, clave por clave y valor por valor, así que solo aparecen las diferencias reales: claves que se agregaron o quitaron, y valores cuyo contenido o tipo cambió.

Cómo usar Diff de JSON / Comparación Estructural

1. Pegá el JSON original en el panel JSON A, y la versión modificada en JSON B — o hacé clic en Ejemplo para cargar un par de muestra.
2. El panel Diferencias de abajo arma un árbol colapsable automáticamente, con las entradas agregadas, quitadas y cambiadas coloreadas.
3. Activá Ignorar orden de claves o Ignorar orden de elementos de arrays si tus dos documentos deberían diferir solo en el orden.
4. Usá Expandir todo / Colapsar todo para controlar cuánto del árbol se ve.

Cómo funciona la comparación estructural

Se visita una vez cada clave presente en cualquiera de los dos documentos. Una clave que existe en ambos lados se compara recursivamente — los objetos y arrays se recorren hacia adentro, los valores primitivos se comparan directamente. Una clave que falta en un lado se marca como agregada o quitada; un valor presente en ambos lados que difiere se marca como cambiado, mostrando el tipo JSON de cada lado por separado para que un cambio de tipo (como el número 5 pasando a ser el string "5") nunca se confunda con un cambio de valor común:

// A                          // B
{                              {
  "active": true,                "active": false,   ← cambiado (valor)
  "score": 88,                   "score": "88",      ← cambiado (tipo: number → string)
  "legacy": true,                                     ← quitado
                                  "verified": true,    ← agregado
  "roles": ["admin", "dev"]      "roles": ["dev", "admin", "owner"]
}                              }

La comparación de arrays es por índice, no adivinando qué elementos "se movieron": el elemento 0 de A se compara con el elemento 0 de B, el 1 con el 1, y así. Esto es simple, predecible y coincide con cómo se suele comparar el JSON real (respuestas de API, snapshots de configuración) — pero significa que insertar un elemento en el medio de un array desplaza todos los índices siguientes, lo que se muestra como varias entradas cambiadas en vez de una sola "inserción" limpia. Activar Ignorar orden de elementos de arrays cambia a emparejar elementos por valor igual sin importar la posición, así un reordenamiento puro se muestra correctamente como ningún cambio, al costo de ya no distinguir "movido" de "quitado y vuelto a agregar en otro lugar". Para mantener la pestaña responsiva en diffs muy grandes, el árbol se detiene después de las primeras 200 diferencias y muestra una nota con el total real en lugar de renderizar todo.

Preguntas frecuentes

¿En qué se diferencia esto de un diff de texto línea por línea?

Un diff de texto compara líneas crudas, así que reindentar o reformatear un JSON (sin cambiar ningún valor) se muestra como una pared de cambios. Esta herramienta parsea ambos documentos y los compara por clave y valor, así que las diferencias de formato nunca importan — solo importan las diferencias estructurales reales.

¿Cómo compara los arrays?

Por índice: el elemento 0 de A se compara con el elemento 0 de B, y así sucesivamente. Esto es simple y predecible para el caso común (comparar dos respuestas de API o snapshots de configuración), pero significa que insertar un elemento en el medio de un array desplaza todos los elementos siguientes, lo que se muestra como varias entradas cambiadas en lugar de una sola inserción. Activá "Ignorar orden de array" para en cambio emparejar elementos por valor igual sin importar la posición, lo que muestra correctamente un simple reordenamiento como ningún cambio.

¿Qué se considera un valor cambiado?

Dos cosas: que el valor en sí cambie (por ejemplo 88 a 92) y que el tipo JSON cambie (por ejemplo el número 5 pasando a ser el string "5"). Ambos se marcan como cambiados, pero un cambio de tipo se muestra con el tipo de cada lado etiquetado, como (number) 5 → (string) "5", para que puedas distinguirlos de un vistazo.

¿Hay un límite de tamaño para el JSON?

La comparación en sí maneja miles de claves rápidamente, pero renderizar cada diferencia individual como nodos del DOM congelaría la pestaña en un diff enorme. Pasadas las 200 diferencias, el árbol muestra las primeras 200 y una nota indicando cuántas más existen para que puedas acotar tu entrada.