Cómo funciona el embellecimiento de JavaScript
El embellecedor lee tu código carácter a carácter, realiza un seguimiento del nivel de anidación de cada sentencia y lo reemite con espaciado consistente. Nunca cambia lo que hace el código, solo cómo se ve.
- Tokenizar. La biblioteca analiza tu entrada en una secuencia de tokens: palabras clave, identificadores, cadenas, operadores y puntuación. Las cadenas, los literales de plantilla y los literales de expresión regular se reconocen como unidades individuales, por lo que una llave dentro de una cadena nunca se confunde con un delimitador de bloque.
- Seguir el anidamiento. Al recorrer la secuencia de tokens, el embellecedor mantiene un nivel de sangría en ejecución. Cada llave de apertura, corchete o paréntesis aumenta el nivel; cada cierre lo disminuye. Esa profundidad determina cuántas unidades de sangría preceden a cada línea del resultado.
- Aplicar tus opciones. Tu elección de sangría (2 espacios, 4 espacios o un tabulador) establece el ancho de un nivel. El estilo de llaves decide si una llave de apertura se adhiere a la sentencia que la precede o cae en su propia línea. El límite de líneas en blanco colapsa las largas series de líneas vacías al máximo que elijas.
- Reemitir. Finalmente, el formateador imprime los tokens con la sangría y los saltos de línea calculados, añadiendo opcionalmente los puntos y coma que la inserción automática habría proporcionado en tiempo de ejecución. El resultado es el mismo programa, presentado de manera que un ser humano pueda leerlo.
Por qué embellecer JavaScript
- Leer código minificado. Los bundles de producción se envían en una línea con nombres de variables de una sola letra. Embellecer restaura los saltos de línea y la sangría para que puedas rastrear un error hasta la sentencia que lo causó, incluso sin un source map.
- Ordenar archivos inconsistentes. El código que varias personas han tocado deriva hacia sangrías y estilos de llaves mezclados. Una pasada por el embellecedor normaliza todo el archivo a un solo diseño, lo que hace que el siguiente diff muestre cambios de lógica reales en lugar de ruido de espacios en blanco.
- Esta herramienta no penaliza tu página. La mayoría de los formateadores en línea cargan toda su biblioteca en el momento en que abres la página. Este carga js-beautify de forma diferida solo cuando haces clic en Embellecer o activas el modo en vivo, por lo que abrir la página cuesta unos pocos kilobytes en lugar de cientos, y la renderización inicial se mantiene rápida.
- Nada sale de tu navegador. El embellecedor se ejecuta completamente en tu dispositivo. Tu código nunca se carga en un servidor, lo cual importa cuando el script que inspeccionas pertenece a un cliente, contiene rutas de API internas o está sujeto a un acuerdo de confidencialidad.
Aplicaciones comunes
Embellecer JavaScript surge siempre que alguien necesita leer código que no fue escrito para ser leído.
- Depuración en producción: pega un bundle minificado extraído de la pestaña Red para encontrar la función detrás de un error de stack que no puedes descifrar de otro modo.
- Preparación de revisión de código: reformatea el archivo con sangría inconsistente de un colaborador antes de abrir el pull request para que los revisores vean la lógica, no el desorden de diseño.
- Auditorías de seguridad y cumplimiento: expande un snippet de analítica o publicidad de un tercero para confirmar exactamente lo que hace antes de que entre en producción.
Un ejemplo práctico
Toma un one-liner minificado: function f(a){if(a){return a*2}else{return 0}}. Pégalo arriba con sangría de 2 espacios y estilo de llaves Contraer, luego haz clic en Embellecer. Obtienes de vuelta un bloque legible: function f(a) {, luego un if (a) { con sangría, la sentencia return a * 2; anidada un nivel más profundo y las llaves correspondientes alineadas debajo. Cambia el estilo de llaves a Expandir y cada llave de apertura cae en su propia línea. Cambia la sangría a Tabuladores y cada nivel se desplaza de dos espacios a un carácter de tabulación. La estructura es idéntica; solo cambia el diseño.
FAQ
¿Esto se ejecuta en mi navegador?
Sí. La biblioteca js-beautify se carga de forma diferida la primera vez que haces clic en Embellecer o activas el modo en vivo, y luego se almacena en caché. Tu código nunca abandona la página — no hay llamada al servidor ni carga.
¿Es embellecer lo mismo que desminificar?
Restaura el formato legible —sangría, saltos de línea y espaciado— pero no puede recuperar los nombres de variables originales ni los comentarios que la minificación eliminó. Si existe un source map, las DevTools de tu navegador pueden recuperar los nombres originales; un embellecedor solo funciona con lo que hay en el archivo.
¿Embellecer cambiará el comportamiento de mi código?
No. El embellecimiento solo añade y elimina espacios en blanco y saltos de línea; el programa se ejecuta de forma idéntica. La única opción que toca los tokens es "Añadir punto y coma faltantes", que inserta los terminadores de sentencia que la inserción automática de punto y coma habría añadido en tiempo de ejecución de todos modos, haciendo que el código sea seguro de minificar después.
¿Qué significan las opciones de estilo de llaves?
Contraer mantiene una llave de apertura en la misma línea que la sentencia (if (x) {), que es la convención habitual de JavaScript. Expandir coloca cada llave de apertura en su propia línea (el estilo Allman). Expandir al final mantiene la llave de apertura adjunta pero coloca else y catch en una nueva línea después de la llave de cierre.
El embellecimiento de JavaScript en el navegador te da código legible sin un paso de compilación ni una carga. Pega un script minificado o desordenado, elige tu sangría y estilo de llaves, luego copia o descarga el resultado. Nada sale de tu dispositivo, no hay cuenta y la biblioteca solo se carga cuando la pides — así que abrir esta página te cuesta unos pocos kilobytes, no un megabyte.