2014-03-03 5 views
60

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

Jetzt ist meine Frage:
Wie ist das möglich?
Ich weiß, dass es ein paar "Exploit" -Methoden für die Konsole gibt, aber wie können Sie solche Schriftformatierung in der Konsole machen? (Und ist es console.log?)Wie erstelle ich formatierte JavaScript-Konsolen-Log-Nachrichten

Antwort

19

Try this:

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

die Dokumentation Zitiert,

Sie verwenden das% c Formatspezifizierer benutzerdefinierte CSS-Regeln auf jede Zeichenfolge Sie anwenden Schreiben Sie in die Konsole mit console.log() oder verwandten Methoden .

Quelle:

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

Notiere die %c vor dem Text in dem ersten Argument und die Stil-Spezifikationen in der zweiten: https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css

6

Von der Google-Website: site

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

Sie können auch Teil Format.

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

enter image description here