ทันเอไอ

Découverte de Styled Logging, la fonctionnalité qui met en forme les messages de la Console, née du plugin Firebug il y a 14 ans

Le grand message « STOP » affiché dans la Developer Console du site TH AI Passport a intrigué de nombreux internautes. Il s'agit en réalité de la fonctionnalité Styled Logging, apparue à l'époque du plugin Firebug en 2012

Ces derniers temps, de nombreux internautes thaïlandais ont été surpris en ouvrant la Developer Console (l'outil destiné aux développeurs, dissimulé dans le navigateur) sur le site gouvernemental TH AI Passport, pour y découvrir un immense message « STOP » bien visible. Beaucoup ont découvert à cette occasion que la console pouvait afficher des messages joliment mis en forme. Pourtant, cette fonctionnalité est à la disposition des développeurs depuis plus de dix ans.

Cette fonctionnalité s'appelle Styled Logging : il s'agit de mettre en forme les messages de la Console à l'aide de CSS (le langage de définition des styles des pages web), via la commande console.log, en plaçant l'indicateur %c devant le message, suivi des valeurs CSS comme la couleur du texte, la taille de la police ou la couleur de fond. Par exemple, console.log("%cMessage", "color: red; font-size: 20px;") affichera immédiatement dans la console un grand texte rouge.

Retour en 2006 : les navigateurs n'intégraient pas encore de Developer Console comme aujourd'hui. Joe Hewitt, ancien ingénieur logiciel de Netscape et cofondateur du projet Firefox, crée alors Firebug, un plugin permettant aux développeurs de déboguer (repérer et corriger les erreurs) leurs sites directement depuis le navigateur. En 2012, la version 1.11 de Firebug ajoute la fonctionnalité Styled Logging via %c, prenant en charge plusieurs définitions CSS dans un même log — le point de départ de la popularisation de cette fonctionnalité.

Par la suite, les principaux navigateurs l'ont intégrée à leurs propres outils. Firefox a inclus les Styled Console Logs dans ses outils de base dès la version 31 en 2014, tandis que Chrome, Edge et Safari les prennent également en charge. Aujourd'hui, %c est officiellement standardisé dans la WHATWG Console Specification.

Dans le cas du site TH AI Passport, l'affichage d'un grand message d'avertissement dans la console est une technique couramment utilisée par les sites web pour dissuader les utilisateurs ordinaires de coller du code inconnu dans la console, car ils pourraient être piégés et exécuter des commandes dangereuses. Si vous voyez ce type de message, pas de panique : il suffit de ne jamais copier-coller de code à la demande d'inconnus pour rester en sécurité.