Wie erstelle ich formatierte Javascript-Konsolenprotokollnachrichten?

90

Ich habe heute auf Facebook von der Konsole in Chrome "watschelt".
Überraschenderweise habe ich diese Nachricht in der Konsole erhalten.

Meine Frage ist nun:
Wie ist das möglich?
Ich weiß, dass es einige Exploit-Methoden für die Konsole gibt, aber wie können Sie eine solche Schriftformatierung in der Konsole vornehmen? (und ist es console.log?)

Anders Kjeldsen
quelle

Antworten:

130

Ja, Sie können das console.log()mit so etwas formatieren :

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

Beachten Sie den %cvorhergehenden Text im ersten Argument und die Stilspezifikationen im zweiten Argument. Der Text sieht aus wie Ihr Beispiel.

Weitere Informationen finden Sie in Googles "Styling Console Output with CSS" oder in der FireBug Console-Dokumentation .

Die Dokumentationslinks enthalten auch einige andere nette Tricks, wie das Einfügen von Objektlinks in ein Konsolenprotokoll.

Dallas
quelle
Möglicherweise möchten Sie überprüfen, ob ein kompatibler Browser verwendet wird, bevor Sie versuchen, Formatzeichenfolgen zu verwenden console.log, da ältere Browser Ihr Skript möglicherweise mit einer Ausnahme stoppen. caniuse sagt, dass es in Firefox 9 und Edge 79 eingeführt wurde; Chrome hat offensichtlich einige Zeit vor Chrome 83 damit begonnen, es zu unterstützen, aber wir wissen nicht genau, wann.
Silas S. Brown
38

Versuche dies:

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

Zitieren der Dokumente,

Sie verwenden den Formatbezeichner% c, um benutzerdefinierte CSS-Regeln auf alle Zeichenfolgen anzuwenden, die Sie mit console.log () oder verwandten Methoden in die Konsole schreiben.

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

Blurfus
quelle
7
Hallo Downvoter, irgendwelche Kommentare hinzuzufügen? - Es ist schwierig, eine Antwort zu verbessern (die Sie für nicht gut halten), wenn Sie keine Kommentare hinterlassen, die sich selbst erklären. :)
Blurfus
29

Sie können auch Teilzeichenfolgen formatieren.

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

Geben Sie hier die Bildbeschreibung ein

Krzysztof Boduch
quelle
4
Beachten Sie, dass es nur möglich ist, innerhalb des ersten Arguments von zu stylen, console.logund die Stile müssen sofort folgen.
Qwerty
9

Von der Google-Website: Website

console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");
Jonathan
quelle