Desminifica y formatea tu código en línea

Desminificar un formato concreto

Cada formato tiene su propia página, con los detalles relevantes para ese lenguaje:

• Desminificar JavaScriptJavaScript
• Desminificar CSSCSS
• Desminificar HTMLHTML
• Desminificar XMLXML
• Desminificar JSONJSON

¿Qué es la minificación de código?

La minificación reduce el tamaño de un archivo de código eliminando texto innecesario para su ejecución, como algunos espacios, saltos de línea y comentarios. Los minificadores de JavaScript también pueden acortar nombres locales y reescribir expresiones. Los desarrolladores conservan archivos fuente legibles mientras las herramientas de compilación generan versiones compactas para su distribución. Estas transformaciones buscan preservar el comportamiento, aunque sus efectos concretos dependen del lenguaje, del minificador y de su configuración. Por eso, un archivo de producción suele tener un aspecto muy distinto del código fuente que editó su autor.

Los archivos más pequeños pueden reducir el volumen de transferencia, especialmente junto con la compresión de red y la caché. El ahorro depende del archivo original y de la configuración de compilación; no existe un porcentaje fijo ni una mejora garantizada de la velocidad de carga. La contrapartida es la legibilidad. Cuando un script o una hoja de estilos ocupa una línea densa, cuesta seguir una condición o encontrar un selector. Formatear una copia facilita su inspección y permite conservar la compilación original y sus ajustes de distribución para compararlos.

¿Qué hace esta herramienta de desminificación?

LFUnminify toma código compacto y le da una presentación más legible. Añade sangría, separa bloques y operadores e introduce saltos de línea según el formateador utilizado. El resultado permite seguir estructuras anidadas, buscar un valor e inspeccionar una función sin leer una única línea densa. El grado de reorganización depende de la entrada y del lenguaje detectado, en lugar de obedecer a una regla fija que coloque cada instrucción en su propia línea.

Por dentro, la herramienta ejecuta Prettier, el formateador que la mayoría de los equipos de JavaScript ya utiliza, directamente en tu navegador. El resultado coincide por tanto con lo que tu propio editor produciría en un archivo fuente normal: resulta familiar en lugar de parecer generado por una máquina. La detección es automática: pega cualquier cosa y la herramienta determinará si se trata de JavaScript, CSS, HTML, XML o JSON antes de formatearlo en consecuencia.

Formatear no reconstruye el proyecto original. Los nombres, comentarios y archivos fuente eliminados durante la compilación no pueden recuperarse solo cambiando la presentación. Los mapas de código fuente o el repositorio original pueden aportar ese contexto, pero esta herramienta no los carga ni reasigna las posiciones de las trazas de pila. El resultado es una copia legible para inspeccionar los nombres y la estructura del programa que siguen presentes en el archivo proporcionado.

Formatos de código compatibles

Un único editor, cinco lenguajes. LFUnminify lee el contenido que pegas, determina de qué lenguaje se trata y lo entrega al analizador diseñado para esa sintaxis. Nunca tienes que elegir un formato en un menú, y un archivo con la extensión equivocada se procesa correctamente de todos modos:

• JavaScript, incluida la sintaxis de ES6 y versiones posteriores, módulos, código asíncrono y JSX. Un caso habitual: un paquete generado por webpack, Vite, esbuild o Terser.
• CSS, incluida la sintaxis moderna, propiedades personalizadas, consultas de medios y reglas anidadas. Ideal para una hoja de estilos compilada con Tailwind, Sass o PostCSS.
• HTML, incluidos los bloques script y style incrustados, que se formatean junto con el marcado en lugar de quedarse en una sola línea larga.
• XML, incluidos mapas del sitio, fuentes RSS, archivos SVG, sobres SOAP y archivos de configuración que llegaron sin un solo salto de línea.
• JSON, incluidas respuestas de API con muchos niveles de anidación, manifiestos de paquetes, archivos de configuración y datos de registros.

Cuándo necesitas un desminificador de código

Desminificar rara vez responde solo a la curiosidad. Suele ser la forma más rápida de resolver una pregunta concreta sobre código ajeno o código propio que ya no puedes leer:

• Investigar un fallo en producción. Formatear un paquete permite ver funciones y bifurcaciones difíciles de leer en una sola línea. Las posiciones originales de una traza de pila no se adaptan automáticamente a la nueva distribución; utiliza las herramientas de depuración del navegador y los mapas de código fuente cuando estén disponibles.
• Auditar un script de terceros. Antes de incorporar una etiqueta de analítica, un widget de chat o un script de afiliación a tu sitio, desminifícalo para comprobar qué recoge, a qué dominios se conecta y qué guarda en el almacenamiento.
• Leer una hoja de estilos compilada. Los sistemas de clases utilitarias generan enormes archivos CSS de una sola línea. Formatearlos permite ver la cascada, encontrar la regla que prevalece y entender por qué se ignora tu modificación.
• Inspeccionar una respuesta de API. Los datos JSON copiados de la pestaña de red resultan difíciles de leer sin formato. Con sangría, la estructura, los niveles de anidación y el campo ausente se identifican en segundos.
• Aprender de código real. Leer cómo una biblioteca bien diseñada resuelve un problema es una forma rápida de mejorar, y un archivo formateado permite hacerlo cómodamente.

Cómo usar LFUnminify

Hay tres formas de introducir código en el editor. Pégalo directamente en el panel izquierdo, pulsa Examinar para importar un archivo de tu equipo o arrástralo hasta la zona de entrada. Para inspeccionar un recurso de un sitio publicado, ábrelo desde el código fuente de la página o las herramientas de desarrollo del navegador, cópialo y pégalo aquí. También puedes guardar el archivo .js, .css, .html, .xml o .json y abrirlo con Examinar.

El formato se aplica automáticamente, sin tener que buscar un botón. La herramienta espera a que dejes de escribir, detecta el lenguaje y muestra el resultado formateado en el panel derecho con resaltado de sintaxis. Desde ahí puedes copiar toda la salida al portapapeles con un clic o descargarla como un archivo con el nombre adecuado para abrirlo en tu editor.

Dos pequeños detalles que ayudan con los archivos largos. Activa los números de línea cuando necesites citar una posición precisa o comparar dos versiones una junto a otra, la preferencia se recuerda para tu próxima visita. Y si el formato detectado no es el que esperabas, eso suele ser una pista en sí mismo: un archivo reconocido como JavaScript cuando creías tener JSON resulta ser a menudo una respuesta JSONP o una configuración envuelta en una asignación.

Tu código nunca sale de tu equipo

El formato se aplica localmente en tu navegador mediante el código cargado con la página. LFUnminify no envía el contenido del editor a un servidor de procesamiento, no lo guarda en una base de datos ni exige una cuenta para tratarlo. Los archivos abiertos con Examinar o arrastrados al editor también se leen localmente. Una vez cargados los recursos necesarios de la página, no hace falta una petición de red para procesar cada entrada.

El procesamiento local resulta útil para inspeccionar un paquete interno, un proyecto de un cliente o un archivo de configuración sin subir su contenido a este servicio. Tú controlas los archivos que abres y las copias que descargas. La herramienta no obtiene archivos remotos por ti: guárdalos o cópialos primero. No necesitas una cuenta para usar el editor y el formato no depende de una cola de procesamiento remota.

¿Por qué LFUnminify es gratuito?

LFUnminify forma parte de una familia de herramientas gratuitas creadas por Ludovic Frank, junto a un generador de contraseñas, un generador de favicons, un creador de paletas de colores y otras utilidades. La idea es sencilla: las pequeñas herramientas que los desarrolladores utilizan varias veces por semana no deberían exigir un registro, anuncios obligatorios ni un límite de créditos. Esta no tiene cuentas, cuotas ni ofertas de pago dentro del producto.

También es una demostración práctica. Cada herramienta de la familia es una aplicación real, desarrollada y mantenida como un proyecto para clientes, algo que explica nuestra forma de trabajar mejor que cualquier página de presentación. Si necesitas desarrollo web a medida, una aplicación completa en lugar de una plantilla o asesoramiento técnico, puedes encontrarnos a través del enlace del pie de página.

Preguntas frecuentes