Styled Logging: Die Funktion zum Gestalten von Text in der Console – vor 14 Jahren mit dem Firebug-Plug-in geboren
Der riesige Text „Stopp“ in der Developer Console der Website TH AI Passport sorgte bei vielen für Verwunderung – tatsächlich handelt es sich um Styled Logging, eine Funktion, die es seit dem Firebug-Plug-in aus dem Jahr 2012 gibt
In diesen Tagen dürften viele thailändische Internetnutzer überrascht gewesen sein, als sie beim Besuch der Regierungswebsite TH AI Passport die Developer Console (das im Browser versteckte Werkzeug für Entwickler) öffneten und dort ein großes, auffälliges „Stopp“ vorfanden. Viele erfuhren so zum ersten Mal, dass die Console so schön formatierten Text anzeigen kann – tatsächlich steht diese Funktion Entwicklern jedoch schon seit über einem Jahrzehnt zur Verfügung.
Die Funktion heißt Styled Logging: Dabei wird Text in der Console per CSS (die Sprache zur Gestaltung von Webseiten) über den Befehl console.log formatiert, indem dem Text der Platzhalter %c vorangestellt wird, gefolgt von CSS-Werten wie Schriftfarbe, Schriftgröße oder Hintergrundfarbe. Ein Beispiel: console.log("%cText", "color: red; font-size: 20px;") – der Text erscheint in der Console sofort groß und rot.
Zurück im Jahr 2006: Browser hatten damals noch keine eingebaute Developer Console wie heute. Joe Hewitt, ehemaliger Softwareentwickler bei Netscape und Mitgründer des Firefox-Projekts, erschuf daher Firebug als Erweiterung, mit der Entwickler Websites direkt im Browser debuggen (Fehler finden und beheben) konnten. 2012 führte Firebug in Version 1.11 das Styled Logging über %c ein – mit Unterstützung mehrerer CSS-Definitionen in einem einzigen Log-Eintrag. Das war der Ausgangspunkt für die Bekanntheit dieser Funktion.
Anschließend integrierten die großen Browser die Funktion nach und nach in ihre eigenen Werkzeuge: Firefox bot Styled Console Logs ab Version 31 im Jahr 2014 als Standardwerkzeug, auch Chrome, Edge und Safari unterstützen sie. Mittlerweile ist %c offiziell als internationaler Standard in der WHATWG Console Specification festgelegt.
Im Fall der Website TH AI Passport ist die große Warnmeldung in der Console eine gängige Technik, mit der Websites normale Nutzer davor warnen, fremden Code in die Console einzufügen – denn sie könnten dazu verleitet werden, gefährliche Befehle auszuführen. Wer also eine solche Meldung sieht, braucht sich nicht zu erschrecken: Einfach keinen Code von irgendwoher auf Anweisung Fremder kopieren und einfügen – dann ist alles sicher.
Viele Menschen in Thailand haben diese Technik zum ersten Mal auf einer Regierungswebsite gesehen. Wer Styled Logging kennt, versteht, dass Warnmeldungen in der Console eine Schutzmaßnahme gegen Betrüger sind, die zum Einfügen gefährlichen Codes verleiten wollen – und kein Anzeichen für ein Problem der Website.