Comment créer des messages de journal de console javascript formatés


91

Je me suis «dandiné» devant la console dans Chrome sur Facebook aujourd'hui.
Étonnamment, j'ai reçu ce message dans la console.

Maintenant ma question est:
comment est-ce possible?
Je sais qu'il existe quelques méthodes «d'exploitation» pour la console, mais comment pouvez-vous faire un tel formatage de police dans la console? (et est-ce console.log?)

Réponses:


131

Oui, vous pouvez formater le console.log()avec quelque chose comme ceci:

console.log("%cExtra Large Yellow Text with Red Background", "background: red; color: yellow; font-size: x-large");

Notez ce qui %cprécède le texte dans le premier argument et les spécifications de style dans le deuxième argument. Le texte ressemblera à votre exemple.

Consultez la section "Styling Console Output with CSS" de Google ou la documentation de la console FireBug pour plus de détails.

Les liens de documentation incluent également d'autres astuces intéressantes telles que l'inclusion de liens d'objet dans un journal de console.


Vous voudrez peut-être vérifier qu'un navigateur compatible est utilisé avant d'essayer d'utiliser des chaînes de format dans console.log, car les navigateurs plus anciens peuvent arrêter votre script avec une exception. caniuse dit qu'il a été introduit dans Firefox 9 et Edge 79; Chrome a commencé à le supporter évidemment quelque temps avant Chrome 83, mais nous ne savons pas exactement quand.
Silas

38

Essaye ça:

console.log("%cThis will be formatted with blue text", "color: blue");

Citant les documents,

Vous utilisez le spécificateur de format% c pour appliquer des règles CSS personnalisées à toute chaîne que vous écrivez dans la console avec console.log () ou des méthodes associées.

Source: https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css


7
Salut downvoter, des commentaires à ajouter? - il est difficile d'améliorer une réponse (que vous pensez être mauvaise) lorsque vous ne laissez pas de commentaires vous expliquant. :)
blurfus

30

Vous pouvez également formater des sous-chaînes.

var red = 'color:red';
var blue = 'color:blue';
console.log('%cHello %cWorld %cfoo %cbar', red, blue, red, blue);

entrez la description de l'image ici


4
Notez qu'il n'est possible de styliser que dans le premier argument de console.loget que les styles doivent suivre immédiatement.
Qwerty

9

Depuis le site Web de Google: site

console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.