Embellecedor y Minificador de HTML / CSS / JS
Embellece o minifica HTML, CSS y JavaScript localmente en tu navegador.
Cargando Embellecedor y Minificador de HTML / CSS / JS… Si no ocurre nada, activa JavaScript.
El código front-end llega en dos estados: el código fuente con una sangría hermosa que escriben las personas, y las líneas únicas minificadas que producen las herramientas de compilación para el navegador. Moverse entre esos estados es una tarea rutinaria, y esta herramienta gestiona ambas direcciones para HTML, CSS y JavaScript. Embellecer reordena el código comprimido o desordenado en un fuente limpio y con una sangría coherente para que puedas leerlo, depurarlo o aprender de él. Minificar elimina de nuevo los espacios en blanco para reducir la carga útil cuando quieres una forma rápida y sin dependencias de compactar un fragmento.
Preguntas frecuentes
¿Se envía mi código a un servidor?
¿Qué lenguajes puede manejar?
¿Cuál es la diferencia entre Embellecer y Minificar?
¿Es el minificador tan bueno como una herramienta de compilación de producción?
¿Minificar mi JavaScript podría llegar a romperlo?
¿Embellecer cambia el comportamiento de mi página?
¿Puede formatear un archivo entero de una vez?
¿Funciona sin conexión?
Acerca de Embellecedor y Minificador de HTML / CSS / JS
Elige el lenguaje que coincida con tu entrada (HTML, CSS o JavaScript), pega el código y haz clic en Embellecer para formatearlo con sangría de dos espacios y saltos de línea sensatos, o en Minificar para colapsar los espacios en blanco en una forma compacta. Para HTML, el minificador también elimina los espacios en blanco entre etiquetas, que es la parte segura y de alto impacto de la compresión de HTML. El resultado formateado o compactado aparece en un cuadro de solo lectura con un botón de copiar para que puedas pegarlo directamente de vuelta en tu proyecto.
Todo el formateo se ejecuta en tu navegador usando una biblioteca de embellecimiento incluida y un pequeño colapsador de espacios en blanco integrado, sin llamadas a ningún servidor. Tu código, incluidos los datos en línea, los comentarios o la lógica propietaria que contenga, nunca sale de tu máquina y nunca se registra. Eso hace que la herramienta sea segura para fuente inédito o confidencial, y sigue funcionando sin conexión a internet una vez cargada la página.
El arte de hacer el código más pequeño
La minificación se volvió esencial a medida que las páginas web pasaron de simples documentos a aplicaciones completas. Cada byte de HTML, CSS y JavaScript tiene que viajar por la red y ser analizado por el navegador, así que recortar espacios en blanco y acortar nombres acelera directamente la carga de las páginas. En sitios grandes, el ahorro de la minificación, combinado con la compresión gzip o Brotli, puede recortar las cargas útiles de los scripts en mucho más de la mitad.
Embellecer es la imagen especular y es igual de valioso. Cuando abres las herramientas de desarrollo en un sitio en vivo casi siempre estás mirando código minificado, un muro ilegible de variables de una sola letra y saltos de línea ausentes. Un embellecedor revierte el daño cosmético, restaurando la sangría y la estructura para que puedas seguir realmente la lógica, que es por lo que la impresión legible está integrada en el depurador de todos los navegadores.
No obstante, hay un límite importante a lo que un formateador simple puede recuperar. Los minificadores de producción renombran variables y funciones con nombres cortos y sin significado para ahorrar espacio, y ese renombrado es irreversible. Embellecer puede restaurar el diseño y hacer el código legible de nuevo, pero no puede traer de vuelta los nombres descriptivos originales ni los comentarios que se eliminaron. Esa asimetría es por lo que los equipos conservan su fuente original y sus source maps en lugar de confiar en desminificar sus paquetes publicados.