ฉันจะสร้างข้อความบันทึกคอนโซลจาวาสคริปต์ที่จัดรูปแบบได้อย่างไร

วันนี้ฉัน 'เดินเตาะแตะ' โดยคอนโซลใน Chrome บน Facebook
น่าแปลกใจที่ฉันได้รับข้อความนี้ในคอนโซล

ตอนนี้คำถามของฉันคือ:
เป็นไปได้อย่างไร?
ฉันรู้ว่ามีวิธี 'ใช้ประโยชน์' บางอย่างสำหรับคอนโซล แต่คุณจะจัดรูปแบบแบบอักษรในคอนโซลได้อย่างไร (และเป็น console.log หรือไม่)

ใช่คุณสามารถจัดรูปแบบconsole.log()ด้วยสิ่งนี้:

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

สังเกตข้อความที่นำ%cหน้าในอาร์กิวเมนต์แรกและข้อกำหนดลักษณะในอาร์กิวเมนต์ที่สอง ข้อความจะมีลักษณะเหมือนตัวอย่างของคุณ

ดู"เอาท์พุทจัดแต่งทรงผมคอนโซลด้วย CSS" ของ GoogleหรือFireBug ของเอกสารคอนโซลสำหรับรายละเอียดเพิ่มเติม

ลิงก์เอกสารประกอบยังมีลูกเล่นอื่น ๆ เช่นการรวมลิงก์ออบเจ็กต์ในบันทึกของคอนโซลด้วย

ลองสิ่งนี้:

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

อ้างถึงเอกสาร

คุณใช้ตัวระบุรูปแบบ% c เพื่อใช้กฎ CSS ที่กำหนดเองกับสตริงใด ๆ ที่คุณเขียนลงคอนโซลด้วย console.log () หรือวิธีการที่เกี่ยวข้อง

ที่มา: https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css

คุณยังสามารถจัดรูปแบบสตริงย่อย

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

จากเว็บไซต์ของ Google: ไซต์

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