← Volver a las funciones
Free

Herramienta de Diferencias

La Herramienta de Diferencias compara dos bloques de texto y resalta las líneas añadidas, eliminadas y sin cambios con una salida codificada por colores. Vistas unificadas (estilo Git) y de lado a lado, con opciones para ignorar espacios en blanco y mayúsculas. Útil para verificar ediciones, comparar archivos de configuración o revisar respuestas de API.

Comparar dos versiones de texto es una de esas tareas que surgen constantemente: revisar qué cambió en un archivo de configuración, verificar dos respuestas de API, asegurar que una migración de cadenas no rompió nada. La Herramienta de Diferencias hace esto de forma limpia. Pega el Texto A (original) y el Texto B (cambiado) y haz clic en Comparar. La salida muestra cada línea categorizada como añadida (verde, marcada con +), eliminada (rojo, marcada con −) o sin cambios. Cambia entre la vista unificada (estilo Git, todo apilado) y la vista de lado a lado (dos columnas con emparejamiento de líneas). La diferencia utiliza un algoritmo de la subsecuencia común más larga para que la alineación sea óptima, no simplemente línea por línea. Las opciones para ignorar espacios en blanco y mayúsculas ayudan cuando los cambios reales están ocultos bajo ruido de formato. Las estadísticas en la parte superior muestran los recuentos totales de añadidos/eliminados/sin cambios para un resumen de un vistazo.

Vista previa en vivo
example.com
Diff Tool +3 added −2 removed 5 unchanged
Unified Side-by-side
1 1 function greet(name) {
2 console.log("Hi " + name);
2 + console.log(`Hello, ${name}!`);
3 + console.log(`Welcome back.`);
3 4 }
4 5  
5 greet("world");
6 + greet("Alice");
6 7 greet("Bob");
Características clave

Diferencia a Nivel de Línea

Categoriza cada línea como añadida, eliminada o sin cambios utilizando un algoritmo de subsecuencia común más larga para una alineación óptima.

Vistas Unificada y de Lado a Lado

Cambia entre los diseños unificado de estilo Git (todo apilado) y de lado a lado (dos columnas) dependiendo de lo que sea más fácil de leer.

Salida Codificada por Colores

Las líneas añadidas se resaltan en verde con el marcador +; las líneas eliminadas se resaltan en rojo con el marcador −; las líneas sin cambios son neutrales. Escaneo visual rápido.

Ignorar Espacios en Blanco / Mayúsculas

Los selectores te permiten ignorar diferencias triviales de formato para que puedas concentrarte en los cambios significativos.

Estadísticas de Diferencias

La barra superior muestra recuentos de "+N añadidos −N eliminados N sin cambios" — resumen rápido sin escanear cada línea.

Rápido para Entradas Realistas

Maneja miles de líneas en milisegundos. Las entradas grandes están limitadas para mantener la interfaz receptiva.

Casos de uso comunes

Revisar Ediciones Antes de Guardar

Antes de sobrescribir un archivo, pega las versiones antigua y nueva para confirmar que solo los cambios previstos están en la nueva — sin eliminaciones accidentales.

Comparar Respuestas de API

Captura una respuesta antes y después de una corrección, obtén la diferencia de las dos cargas útiles y verifica que tu cambio solo afectó lo que debía.

Diferencia de Archivos de Configuración

Compara dos configuraciones de entorno (dev vs prod, antigua vs nueva) para detectar desviaciones que podrían causar errores sutiles.

Verificar Salida Formateada

Ejecuta un formateador en un archivo y compara entrada vs salida para confirmar que solo cambiaron los espacios en blanco/formato — sin desviación semántica.

Revisar Migraciones de Texto

Al actualizar el texto en una página o documento, compara lo antiguo y lo nuevo para verificar que cada traducción se aplicó correctamente.

Cómo usarlo
1

Abrir Herramienta de Diferencias

Haz clic en el ícono de Diferencias en el dock de DevSuite Pro. Se abre un panel con dos áreas de texto de lado a lado.

2

Pegar Texto A y Texto B

Pega la versión original en el Texto A y la versión cambiada en el Texto B. Cualquier texto funciona: código, JSON, logs, prosa.

3

Alternar Opciones

Activa Ignorar espacios en blanco o Ignorar mayúsculas si los cambios de formato/capitalización son ruido que quieres omitir.

4

Haz Clic en Comparar

Presiona Comparar. La diferencia se renderiza abajo con líneas codificadas por colores y estadísticas en la parte superior.

5

Cambiar Vistas (opcional)

Cambia entre las vistas Unificada y De lado a lado. La unificada es más compacta, la de lado a lado hace obvia la alineación de pares.

¿Listo para probarlo? Herramienta de Diferencias?

Instala DevSuite Pro gratis y desbloquea más de 39 herramientas de desarrollador para tu navegador.

Añadir a Chrome Añadir a Edge Añadir a FireFox