ทันเอไอ

Conoce Styled Logging, la función para dar formato a mensajes en la Consola que nació del plugin Firebug hace 14 años

El enorme mensaje "Alto" en la Developer Console del sitio web TH AI Passport despertó la curiosidad de muchos; en realidad se trata de la función Styled Logging, que existe desde la época del plugin Firebug en 2012

Últimamente, muchos internautas tailandeses se han llevado una sorpresa al abrir la Developer Console (la herramienta para desarrolladores oculta en el navegador) mientras visitaban el sitio web gubernamental TH AI Passport y encontrarse con un enorme y llamativo mensaje de "Alto". Muchos acaban de descubrir que la consola puede mostrar mensajes con formato elegante como este, pero la realidad es que esta función lleva más de una década disponible para los desarrolladores.

Esta función se llama Styled Logging y consiste en dar formato a los mensajes de la Consola mediante CSS (el lenguaje que define el estilo de las páginas web) a través del comando console.log, usando el identificador %c antes del texto seguido de valores CSS como el color de la letra, el tamaño de fuente o el color de fondo. Por ejemplo: console.log("%cmensaje", "color: red; font-size: 20px;") hará que el mensaje aparezca en la consola en rojo y en tamaño grande al instante.

Remontándonos a 2006, los navegadores aún no incluían una Developer Console integrada como hoy. Joe Hewitt, ex ingeniero de software de Netscape y cofundador del proyecto Firefox, creó Firebug como un plugin adicional que permitía a los desarrolladores depurar (detectar y corregir errores) sitios web directamente desde el navegador. Más tarde, en 2012, la versión 1.11 de Firebug añadió la capacidad de Styled Logging mediante %c, con soporte para múltiples estilos CSS en un mismo log, lo que marcó el punto de partida que hizo popular esta función.

Después, los principales navegadores fueron incorporándola a sus propias herramientas: Firefox incluyó los Styled Console Logs como herramienta básica desde la versión 31 en 2014, mientras que Chrome, Edge y Safari también la soportan. Actualmente, %c ya está definido como estándar internacional en la WHATWG Console Specification.

En el caso del sitio web TH AI Passport, mostrar un mensaje de advertencia de gran tamaño en la consola es una técnica que los sitios web suelen usar para advertir a los usuarios comunes que no peguen código extraño en la consola, ya que podrían ser engañados para ejecutar comandos peligrosos. Por lo tanto, si ves un mensaje de este tipo, no hay que asustarse: basta con no copiar código de ningún lugar para pegarlo siguiendo las instrucciones de desconocidos y estarás a salvo.