Comparador de código (diff)
Pega o abre dos versiones de un archivo para ver exactamente qué cambió. Las líneas se emparejan con el algoritmo de diff de Myers, las palabras cambiadas dentro de cada línea se resaltan y el código se colorea según la sintaxis de JavaScript, Python, HTML, CSS, SQL y más.
Última actualización:
Cómo usar Comparador de código (diff)
- Pega el código original a la izquierda y la versión modificada a la derecha, o pulsa Abrir archivo encima de cada cuadro.
- Elige el lenguaje o deja activada la detección automática, y marca Ignorar espacios en blanco o Ignorar mayúsculas/minúsculas si los cambios de formato no deben contar.
- Pulsa Comparar código. Las líneas eliminadas aparecen en rojo, las añadidas en verde y las palabras exactas que cambiaron se resaltan en un tono más oscuro.
- Cambia de vista entre Lado a lado y Unificada, y usa Anterior / Siguiente para saltar entre los cambios. Haz clic en una barra gris para mostrar las líneas sin cambios ocultas.
- Descarga el .diff o copia el diff unificado para compartir el cambio o aplicarlo con git apply o patch.
Cómo leer el diff
| Lo que ves | Significado |
|---|---|
| Línea roja con − | La línea solo existe en el original (eliminada) |
| Línea verde con + | La línea solo existe en la versión modificada (añadida) |
| Línea roja y verde lado a lado | La línea se modificó; los resaltados más oscuros marcan las palabras exactas que cambiaron |
| Celda vacía con rayas | No hay nada en ese lado: una inserción o eliminación pura |
| Barra gris "⋯ 12 líneas sin cambios" | Líneas idénticas ocultas para centrarse en los cambios; haz clic para desplegarlas |
Un ejemplo práctico
Al comparar este original:
const TAX = 0.2; const total = price * (1 + TAX);
con esta versión modificada:
const TAX = 0.21; const total = price * (1 + TAX); console.log(total);
se obtiene 1 línea modificada (0.2 → 0.21 aparece resaltado dentro de ella), 1 línea añadida y ninguna eliminación pura: +2 −1. La similitud se calcula como 2 × líneas sin cambios ÷ (líneas del original + líneas de la versión modificada) × 100 = 2 × 1 ÷ (2 + 3) × 100 = 40%. El diff unificado es:
--- original +++ changed @@ -1,2 +1,3 @@ -const TAX = 0.2; +const TAX = 0.21; const total = price * (1 + TAX); +console.log(total);
Consejos para comparar código de forma más limpia
- Formatea primero ambos lados de la misma manera. Pasa cada versión por un formateador (Prettier, Black, gofmt o las herramientas de embellecimiento de este sitio) para que los cambios de estilo no oculten los cambios reales.
- Activa Ignorar espacios en blanco cuando haya cambiado la sangría, por ejemplo después de envolver código en un bloque nuevo.
- Compara los archivos minificados después de embellecerlos. Un archivo minificado suele ser una sola línea, así que cualquier cambio marca todo el archivo como diferente.
- Usa el archivo .diff con
git apply changes.diffopatch -p0 < changes.diffpara aplicar el mismo cambio en otro lugar (edita los nombres de archivo de las líneas --- y +++ para que coincidan con tus rutas).
Preguntas frecuentes
¿Cómo encuentra los cambios el comparador de código?
Divide ambos textos en líneas y ejecuta el algoritmo de diferencias O(ND) de Myers, el mismo enfoque que usan git y GNU diff, para encontrar la subsecuencia común más larga de líneas. Las líneas eliminadas y añadidas en el mismo lugar se emparejan, y una segunda comparación a nivel de palabra resalta exactamente qué cambió dentro de ellas.
¿Se sube mi código a algún sitio?
No. La comparación y el resaltado de sintaxis se ejecutan completamente en tu navegador con JavaScript. Los archivos que abres se leen localmente y nunca se envían a un servidor, por lo que es seguro para código privado o propietario.
¿Qué hace Ignorar espacios en blanco?
Reduce las secuencias de espacios y tabulaciones e ignora los espacios al principio y al final al emparejar líneas, de modo que el código reindentado o los espacios finales no aparecen como cambios. La vista sigue mostrando tu texto original.
¿Qué es un diff unificado?
Es el formato de texto estándar para cambios que usan git, patch y las herramientas de revisión de código. Las líneas que empiezan por - se eliminaron, las que empiezan por + se añadieron, y los encabezados @@ -10,7 +10,8 @@ indican dónde empieza cada bloque de cambios y cuántas líneas abarca en el archivo antiguo y en el nuevo.
¿Qué lenguajes se resaltan?
JavaScript y TypeScript, Python, Java y Kotlin, C y C++, C#, Go, Rust, PHP, Ruby, HTML y XML, CSS y SCSS, JSON, SQL, Shell y YAML. Se colorean las palabras clave, las cadenas, los comentarios y los números. La detección automática elige un lenguaje a partir del código, o de la extensión del archivo cuando abres un archivo.
¿Qué tamaño pueden tener los archivos?
Hasta 20,000 líneas por lado. Los archivos muy diferentes también se comparan, pero si el número de cambios es extremadamente grande, la región modificada se muestra como un reemplazo completo para que la página siga respondiendo.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.