Bagaimana cara membuat pesan log konsol javascript yang diformat

94

Saya 'terhuyung-huyung' oleh Konsol di Chrome di Facebook hari ini.
Anehnya saya mendapat pesan ini di konsol.

Sekarang pertanyaan saya adalah:
Bagaimana ini mungkin?
Saya tahu bahwa ada beberapa metode 'exploit' untuk konsol, tetapi bagaimana Anda bisa membuat format font seperti itu di konsol? (dan apakah itu console.log?)

Anders Kjeldsen
sumber

Jawaban:

133

Ya, Anda dapat memformatnya console.log()dengan sesuatu seperti ini:

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

Perhatikan %cteks sebelumnya dalam argumen pertama dan spesifikasi gaya dalam argumen kedua. Teks akan terlihat seperti contoh Anda.

Lihat "Menggayai Output Konsol dengan CSS" atau Dokumentasi Konsol FireBug untuk lebih jelasnya.

Tautan dokumentasi juga menyertakan beberapa trik rapi lainnya seperti menyertakan tautan objek di log konsol juga.

Dallas
sumber
Anda mungkin ingin memeriksa apakah browser yang kompatibel sedang digunakan sebelum mencoba menggunakan format string di console.log, karena browser lama mungkin menghentikan skrip Anda dengan pengecualian. caniuse mengatakan itu diperkenalkan di Firefox 9 dan Edge 79; Jelas Chrome mulai mendukungnya beberapa waktu sebelum Chrome 83 tetapi kami tidak tahu persis kapan.
Silas S. Brown
38

Coba ini:

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

Mengutip dokumen,

Anda menggunakan penentu format% c untuk menerapkan aturan CSS khusus ke string apa pun yang Anda tulis ke Konsol dengan console.log () atau metode terkait.

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

blurfus
sumber
7
Hai downvoter, ada komentar untuk ditambahkan? - Sulit untuk memperbaiki jawaban (yang menurut Anda tidak baik) bila Anda tidak meninggalkan komentar yang menjelaskan diri Anda sendiri. :)
blurfus
31

Anda juga dapat memformat substring.

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

masukkan deskripsi gambar di sini

Krzysztof Boduch
sumber
4
Perhatikan bahwa hanya mungkin untuk menata gaya dalam argumen pertama dari console.logdan gaya harus segera diikuti.
Qwerty
9

Dari situs web Google: situs

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