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?)

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.


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


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


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");
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.