Herramienta de diferencias JSON
Pega dos documentos JSON en los editores izquierdo y derecho y DevKitLab te muestra un diff al estilo de git, en paralelo o unificado, junto con una lista de cambios estructurales indexada por JSON Path. Cuando el valor de una cadena cambia de forma extensa, el panel de cambios despliega automáticamente un resaltado rojo / verde a nivel de palabra para que veas exactamente qué fragmento cambió, sin tener que comparar a mano una cadena larga. Puedes ignorar el orden de las claves para una comparación semántica, contraer las secciones sin cambios para centrarte en el diff, saltar entre cambios y reformatear ambos lados con un clic. Todo se ejecuta de forma local en tu navegador, así que ambos payloads se quedan en tu dispositivo.
- Diff al estilo de git en paralelo, con resaltado de la línea completa y contornos a nivel de carácter para los cambios en línea
- Cambia a la vista unificada para ver los fragmentos antiguo / nuevo en línea, sin dos columnas
- El panel de cambios estructurales indexado por JSON Path enumera cada añadido / eliminado / modificado / movido; haz clic para saltar al editor
- Los cambios en cadenas largas se despliegan en un diff rojo / verde a nivel de palabra para localizar la diferencia exacta
- Comparación semántica opcional que ignora el orden de las claves, para que reordenarlas no parezca una reescritura completa
- Contrae las secciones sin cambios (activado por defecto) para centrarte solo en el contexto del diff, útil incluso en JSON enormes
- Atajos de cambio anterior / siguiente, intercambio de lados y un reformateo de ambos lados con un clic
- Los elementos de array se alinean por la heurística id / key / name / uuid / _id, así que insertar un elemento no desplaza el resto
- Las entradas izquierda y derecha se guardan automáticamente en localStorage y sobreviven a una recarga
- Procesamiento totalmente local: ambos payloads, tokens, configuraciones y logs no se suben a ningún servidor
Resumen
Este diff de JSON va más allá de poner dos payloads uno al lado del otro. Te ofrece a la vez una vista de texto y una vista estructural semántica, además de resaltado a nivel de carácter, diffs de palabra para cadenas largas, salto por rutas y alineación de arrays, para que revisar cambios de API, ediciones de configuración y deltas de fixtures sea más rápido y con menos errores.
- 01
Diff al estilo de git en paralelo
Dos editores CodeMirror con desplazamiento sincronizado. Las líneas modificadas se resaltan y, dentro de cada línea modificada, los contornos a nivel de carácter marcan la subcadena exacta que cambió, parecido al diff de una PR de GitHub.
- 02
Modo unificado en línea
Una vista de un solo editor con el texto anterior mostrado como una superposición de solo lectura encima de cada bloque de cambio. Las ediciones pequeñas se muestran en línea para que leas juntos los fragmentos antiguo y nuevo.
- 03
Lista de cambios estructurales
Un panel a la derecha enumera cada cambio indexado por JSON Path, como $.users[2].name. Añadido / eliminado / modificado / movido tienen cada uno un color y un icono distintos, así que el tipo de cambio se distingue de un vistazo.
- 04
Diff a nivel de palabra para cadenas largas
Cuando un campo de cadena cambia de forma extensa, la fila del cambio despliega un resaltado rojo / verde a nivel de palabra que muestra exactamente qué fragmento se reescribió, insertó o eliminó, sin necesidad de una segunda herramienta para revisar cadenas largas.
- 05
Comparación que ignora el orden de las claves
Activa «Ignorar el orden de las claves» para que el diff estructural ordene las claves de forma recursiva antes de comparar. Combínalo con «Formatear ambos» para reescribir también el contenido de los editores, de modo que el diff visual ignore igualmente el orden de las claves.
- 06
Contraer las secciones sin cambios
Activado por defecto. Los tramos largos de contenido idéntico se contraen y se conservan tres líneas de contexto alrededor de cada cambio. Incluso las configuraciones con miles de líneas sin cambios siguen siendo legibles.
- 07
Navegar entre cambios
Los botones anterior / siguiente saltan bloque a bloque por el diff. Combinados con el panel de JSON Path, no se pasa por alto ningún cambio en una revisión larga.
- 08
Alineación de arrays por contenido
Por defecto, los elementos de array se emparejan por id / key / name / uuid / _id, evitando el ruido habitual del diff donde insertar un elemento hace que toda la cola parezca cambiada.
- 09
Formatear ambos lados con un clic
Cuando los dos lados solo difieren en la indentación o el orden de las claves, «Formatear ambos» reescribe los dos editores con indentación de 2 espacios (y ordena las claves si «Ignorar el orden de las claves» está activado), de modo que el diff visual queda limpio al instante.
- 10
Totalmente local, sin subidas
El análisis, el diff, el diff a nivel de cadena, la copia y la lectura de archivos ocurren en el navegador. Ambos payloads —respuestas de producción, tokens, configuraciones— se quedan en tu dispositivo.
Cómo usarla
El flujo habitual: pega ambos lados, activa opcionalmente «Ignorar el orden de las claves» y «Formatear ambos», luego revisa con la vista en paralelo y el panel estructural, y copia las rutas de todo lo que necesites señalar.
- 01
Pega el JSON original en el editor izquierdo y el JSON modificado en el derecho. Ambos son editables y las entradas se guardan automáticamente en localStorage.
- 02
La vista dividida por defecto muestra resaltado rojo / verde de la línea completa con contornos a nivel de carácter para los cambios en línea. Cambia a la vista unificada si prefieres una sola columna.
- 03
Consulta el panel «Cambios estructurales» de la derecha. Cada cambio está indexado por JSON Path; haz clic en una fila para saltar a la posición correspondiente del editor.
- 04
Si un campo de cadena difiere y ambos lados son largos, la fila despliega un diff a nivel de palabra que localiza el fragmento cambiado.
- 05
Si reordenar las claves hace ruidoso el diff visual, activa «Ignorar el orden de las claves» y pulsa «Formatear ambos»: el diff visual queda limpio de inmediato.
- 06
Usa Anterior / Siguiente para recorrer los cambios bloque a bloque. La contracción de lo no modificado por defecto mantiene corto el contexto alrededor; desactívala cuando quieras ver el documento completo.
- 07
Cuando necesites referenciar un campo en la documentación o en un ticket, pasa el cursor sobre una fila del panel y pulsa el icono de copiar para obtener una ruta precisa como $.data.users[0].email.
Detalles
Estas funciones abordan los problemas más habituales al hacer diff de JSON: el diff por líneas oculta los cambios a nivel de carácter, las cadenas largas ocultan dónde está la diferencia, reordenar las claves parece una reescritura completa, insertar un elemento en un array lo desplaza todo, y los payloads gigantes son difíciles de revisar de principio a fin.
- Vista dividida al estilo de git en paralelo, con resaltado de la línea completa y contornos a nivel de carácter para las ediciones en línea.
- Modo unificado en línea con el texto anterior mostrado como superposición de solo lectura encima de cada bloque de cambio.
- Panel de cambios estructurales indexado por JSON Path, con colores distintos para añadido / eliminado / modificado / movido.
- Los cambios en cadenas largas se despliegan automáticamente en un diff rojo / verde a nivel de palabra dentro del panel.
- El interruptor «Ignorar el orden de las claves» hace que la comparación estructural ignore el orden de las claves y evita un «cambio total» sin sentido.
- «Contraer lo no modificado» contrae automáticamente los grandes tramos idénticos fuera del diff, así el JSON largo va directo a las diferencias.
- Los botones anterior / siguiente saltan bloque a bloque para no perderse nada en una revisión larga.
- Los elementos de array se alinean por la heurística id / key / name / uuid / _id para evitar el ruido por desplazamiento.
- «Formatear ambos» con un clic alinea la indentación entre los dos editores, además de ordenar las claves cuando está configurado.
- «Intercambiar» invierte los dos lados; «Limpiar» reinicia ambos. Las entradas se conservan en localStorage.
- El tema sigue al del sistema, con paletas de rojo / verde calibradas para los modos claro y oscuro.
Casos de uso
Usa esta herramienta siempre que tengas dos documentos JSON y necesites saber exactamente en qué difieren.
-
Revisar cambios en respuestas de API
Pega la respuesta anterior y la actual de un endpoint y ve de inmediato qué campos se añadieron, eliminaron o cambiaron, incluidas las estructuras anidadas y los campos de cadena larga.
-
Diff de archivos de configuración
Revisa los cambios en tsconfig, package.json, configuración de ESLint, reglas de CDN y feature flags. Con «Ignorar el orden de las claves» activado, reordenarlas no contamina el diff semántico real.
-
Regresión de fixtures y datos semilla
Compara las versiones antigua y nueva de un fixture de pruebas para confirmar que tu cambio solo tocó los campos esperados y no afectó por accidente a otros casos.
-
Comparación de payloads de JWT o token
Decodifica dos JWT, pega sus payloads aquí y compara las claims para verificar el issuer, la audience, el scope y otros campos frente a lo esperado.
-
Revisión de argumentos de llamadas a herramientas de IA
Compara los argumentos de dos llamadas a herramientas de una misma sesión o instantáneas sucesivas del estado de un agente para averiguar qué paso introdujo un cambio inesperado.
-
Validación de reproducción de webhooks
Compara un webhook capturado en producción con un payload generado en reproducción para confirmar que todo, salvo la firma, coincide exactamente.
-
Auditoría de configuración entre entornos
Haz diff de la configuración JSON de dev / staging / prod para averiguar qué claves difieren entre entornos y luego alinéalas en torno a una línea base.
-
Comparación de datos antes y después de una migración
Tras una migración de datos, un renombrado masivo o una refactorización, pega muestras de antes / después para confirmar que el cambio estructural es el esperado y que ningún campo de valor se sobrescribió por accidente.
-
Análisis de incidencias
Compara el payload del momento de la incidencia con un payload correcto conocido. El diff a nivel de palabra en cadenas largas facilita encontrar exactamente qué codificación o valor provocó el fallo posterior.
Ver también
¿Quieres ordenar primero cada lado por separado antes de comparar? Empieza por Formateador de JSON para validar la sintaxis, aplicar la reparación inteligente y unificar el formato, y luego vuelve aquí a comparar. Si al terminar quieres convertir la parte que difiere a YAML, CSV u otro formato, entrégala a Conversor de JSON para seguir con la conversión. Si ambos JSON vienen envueltos en prefijos de log u otro texto, primero usa Reemplazo de texto para quitar el envoltorio exterior y vuelve aquí a ver la diferencia real entre los JSON.Si un JSON Path de la lista de cambios señala el campo que te importa, abre el Evaluador de JSONPath y jq para verificar la ruta y usar jq para extraer o resumir los nodos relacionados.
Entender qué significa «diferente» aquí
El diff de JSON parece sencillo, pero el diff de texto y el diff estructural dan respuestas distintas. Estos conceptos aparecen a menudo durante las revisiones.
-
Diff de texto frente a diff semántico
El resaltado rojo / verde de los dos editores es un diff de texto que trata los espacios en blanco, el orden de las claves y la indentación como cambios. El panel estructural de la derecha es un diff semántico que solo tiene en cuenta los cambios reales de campos y valores. Úsalos juntos.
-
El orden de las claves no importa en el JSON estricto
{"a":1,"b":2} y {"b":2,"a":1} son semánticamente idénticos pero distintos como texto. Con «Ignorar el orden de las claves» activado, el diff estructural los trata como iguales. Para que el diff visual coincida, pulsa «Formatear ambos».
-
La «alineación» de los arrays determina el ruido del diff
Insertar un elemento en medio de un array, con una comparación por posición, marcaría como cambiado cada elemento siguiente. Aquí, por defecto, los elementos se emparejan por id / key / name / uuid para evitar este falso positivo.
-
Los valores de cadena larga necesitan un diff a nivel de palabra
Para los campos de cadena larga (descripciones, prompts, URL, fragmentos HTML), marcar todo el campo como cambiado no sirve de mucho. El panel despliega automáticamente un diff rojo / verde a nivel de palabra para que veas exactamente qué fragmento difiere.
-
La diferencia entre mover y modificar
Cuando un elemento de array pasa de una posición a otra, jsondiffpatch lo identifica como «movido» en lugar de «eliminado + añadido». Esa información ayuda a distinguir un reordenamiento de un cambio de contenido real.
-
JSON Path es la forma estándar de referirse a un solo campo
Cada fila del panel muestra una ruta como $.users[2].name. Cópiala en la documentación, los tickets o los comentarios de código: mucho más claro que «ese campo del nombre de usuario».
Buenas prácticas
Los diffs de configuración, las revisiones de cambios de API y las comparaciones de fixtures se benefician de una rutina de revisión constante, sobre todo a medida que crecen los payloads. Estos hábitos reducen las lecturas erróneas.
- Tras pegar, mira primero el resumen de la parte superior del panel («X añadidos · Y eliminados · Z modificados») para calibrar el tamaño del cambio antes de decidir si revisas todo o por muestreo.
- Cuando veas un mar de rojo y verde, comprueba primero si la causa es el orden de las claves o la indentación. Activa «Ignorar el orden de las claves» y pulsa «Formatear ambos» antes de juzgar el cambio semántico real.
- Al insertar o eliminar un elemento en medio de un array, apóyate en la alineación por defecto id / key / name / uuid; si tus elementos no tienen esos campos, puedes añadir temporalmente un campo estable a los datos de muestra antes de comparar.
- Cuando un campo de cadena muestre un «cambio largo», despliega primero el diff a nivel de palabra antes de decidir si pasas a una herramienta de diff de texto para analizarlo más a fondo.
- En revisiones de JSON largo, mantén «Contraer lo no modificado» activado y usa Anterior / Siguiente para saltar bloque a bloque, para no pasar por alto los cambios pequeños.
- Cuando necesites anotar un cambio en un ticket o documento, copia el JSON Path del panel estructural: mucho más preciso que una descripción de palabra.
- Anonimiza los datos de producción antes de compartirlos. La herramienta no sube nada, pero lo que capturas en una imagen o pegas en tickets y chats puede filtrarse.
Limitaciones
Esta herramienta se centra en mostrarte la diferencia entre dos documentos JSON. No sustituye la validación de esquemas, los flujos de gestión de cambios ni un control de versiones adecuado.
- Te dice en qué difieren, no si la diferencia es aceptable. Las reglas de negocio, las restricciones de versión y las comprobaciones de retrocompatibilidad siguen siendo cosa de los esquemas, la revisión de código y las pruebas de regresión.
- No es Git. No hay historial de commits, ramas ni blame; solo una comparación de dos vías entre dos payloads estáticos. Usa un sistema de control de versiones para seguir la evolución a largo plazo.
- El diff a nivel de palabra de cadenas largas divide por límites de palabra, lo que resulta menos efectivo en idiomas sin espacios como el chino o el japonés; en esos casos, úsalo junto con los contornos a nivel de carácter del editor.
- La alineación de arrays usa la heurística id / key / name / uuid. Si tus elementos carecen de identificadores estables y el orden importa, los resultados pueden recurrir a la comparación por posición y mostrar ruido por desplazamiento.
- Los payloads muy grandes, de decenas de megabytes, pueden ralentizar el navegador, sobre todo el diff estructural. Extrae el subárbol relevante o usa herramientas de diff de línea de comandos en su lugar.
- Todo el procesamiento es local, pero la seguridad local sigue dependiendo de tu dispositivo, las extensiones del navegador, la pantalla compartida y adónde copias el contenido.
Preguntas frecuentes
Preguntas frecuentes sobre el diff estructural, el diff de cadenas largas, el orden de las claves, la alineación de arrays, la privacidad y los payloads grandes.
¿Se sube mi JSON a un servidor?
No. El análisis, el diff, el diff a nivel de cadena, la copia y la lectura de archivos ocurren en la pestaña actual del navegador. DevKitLab no envía tu payload a ningún servidor.
¿Por qué el resaltado del editor a veces no coincide con el panel estructural?
El resaltado del editor es un diff de texto y le afectan los espacios en blanco, el orden de las claves y la indentación. El panel estructural es un diff semántico y solo tiene en cuenta los cambios reales de campos y valores. Con «Ignorar el orden de las claves» activado y «Formatear ambos» aplicado, los dos suelen coincidir.
¿Qué hace exactamente «Ignorar el orden de las claves»?
Ordena de forma recursiva las claves de los objetos antes de calcular el diff estructural. Así, {"a":1,"b":2} y {"b":2,"a":1} no se tratan como diferentes. Ten en cuenta que solo afecta al panel estructural, no al editor; pulsa «Formatear ambos» para que el diff visual ignore también el orden de las claves.
¿Por qué al insertar un elemento en un array no se marca como cambiado todo lo que va detrás?
Los elementos de array se emparejan por id / key / name / uuid / _id por defecto, así que la herramienta puede reconocer qué elemento se movió y adónde. Si tus elementos no tienen esos campos, la comparación recurre a la coincidencia por posición y entonces insertar un elemento sí desplaza el resto.
Un campo de cadena larga aparece como cambiado pero no veo dónde está la diferencia.
El panel estructural despliega automáticamente un diff rojo / verde a nivel de palabra bajo los cambios de cadena larga: las palabras eliminadas en rojo y las añadidas en verde. Para cadenas muy largas (más de 20 000 caracteres), la vista recurre al rojo / verde de toda la cadena para seguir siendo fluida.
¿«Contraer lo no modificado» oculta parte del diff?
No. Solo contrae los tramos largos de contenido idéntico y conserva tres líneas de contexto alrededor de cada cambio. Haz clic en la barra contraída para expandir una sección temporalmente, o desactiva la opción para ver el documento completo.
Mis dos lados tienen formatos distintos (uno con indentación y otro sin ella). ¿El diff será un mar de rojo?
Sí, porque el editor hace un diff de texto. Pulsa «Formatear ambos» para unificar primero la indentación. El panel estructural no se ve afectado, ya que compara de forma semántica.
¿Con qué granularidad saltan los botones Anterior / Siguiente?
Saltan entre bloques de diff (bloques de cambio contiguos), no entre las filas del panel estructural. Un bloque puede contener varios cambios estructurales, y un cambio de un campo puede abarcar varios bloques.
¿Por qué veo una entrada «movida»?
Cuando un elemento de array pasa a otra posición con el mismo contenido, la herramienta lo etiqueta como «movido» en lugar de «eliminado + añadido». Esto ayuda a distinguir un reordenamiento de un cambio de contenido real.
¿El contenido de mis editores izquierdo y derecho sobrevive a una recarga?
Sí. Ambas entradas se guardan automáticamente en localStorage y se restauran en la siguiente visita. «Limpiar» borra tanto el contenido de los editores como la caché guardada.
¿Puede procesar archivos JSON muy grandes?
Los payloads de unos pocos megabytes suelen funcionar bien. Decenas de megabytes pueden ralentizar el navegador, sobre todo el diff estructural. Considera extraer el subárbol relevante o usar herramientas de diff de línea de comandos.
¿Admite el diff de tres vías (base / izquierda / derecha)?
De momento solo la comparación de dos vías. Para fusiones de tres vías, usa las herramientas de merge de Git o el visor de diff integrado de un IDE.
Herramientas relacionadas
Continúa tu flujo de trabajo con JSON usando las herramientas de datos: formatea, convierte a otros formatos o quita los envoltorios de texto exteriores.