ทันเอไอ

รู้จัก Styled Logging ฟีเจอร์แต่งข้อความใน Console ต้นกำเนิดจากปลั๊กอิน Firebug เมื่อ 14 ปีก่อน

ข้อความ “หยุด” ขนาดใหญ่ใน Developer Console ของเว็บ TH AI Passport ทำหลายคนสงสัย แท้จริงคือฟีเจอร์ Styled Logging ที่มีมาตั้งแต่สมัยปลั๊กอิน Firebug ปี 2012

ช่วงนี้ชาวอินเทอร์เน็ตไทยหลายคนอาจตกใจเมื่อเปิด Developer Console (เครื่องมือสำหรับนักพัฒนาที่ซ่อนอยู่ในเบราว์เซอร์) ขณะเข้าเว็บ TH AI Passport ของรัฐบาล แล้วพบข้อความ “หยุด” ตัวใหญ่เด่นชัด หลายคนเพิ่งรู้ว่าคอนโซลแสดงข้อความจัดรูปแบบสวยงามแบบนี้ได้ แต่ความจริงแล้วฟีเจอร์นี้เปิดให้นักพัฒนาใช้กันมานานกว่าทศวรรษ

ฟีเจอร์ดังกล่าวมีชื่อว่า Styled Logging คือการจัดรูปแบบข้อความใน Console ด้วย CSS (ภาษากำหนดรูปแบบหน้าเว็บ) ผ่านคำสั่ง console.log โดยใช้ตัวระบุ %c นำหน้าข้อความ แล้วตามด้วยค่า CSS เช่น สีตัวอักษร ขนาดฟอนต์ หรือสีพื้นหลัง ตัวอย่างเช่น console.log("%cข้อความ", "color: red; font-size: 20px;") ข้อความที่แสดงในคอนโซลก็จะกลายเป็นตัวสีแดงขนาดใหญ่ทันที

ย้อนกลับไปเมื่อปี 2006 เบราว์เซอร์ยังไม่มี Developer Console ในตัวเหมือนทุกวันนี้ Joe Hewitt อดีตวิศวกรซอฟต์แวร์ของ Netscape และผู้ร่วมก่อตั้งโครงการ Firefox จึงสร้าง Firebug ขึ้นมาเป็นปลั๊กอินเสริมให้นักพัฒนาดีบั๊ก (ตรวจหาและแก้ข้อผิดพลาด) เว็บได้โดยตรงจากเบราว์เซอร์ ต่อมาในปี 2012 Firebug เวอร์ชัน 1.11 ได้เพิ่มความสามารถ Styled Logging ผ่าน %c รองรับการกำหนด CSS หลายรูปแบบใน log เดียวกัน ซึ่งเป็นจุดเริ่มต้นที่ทำให้ฟีเจอร์นี้เป็นที่รู้จัก

จากนั้นเบราว์เซอร์หลักทยอยนำไปใส่ในเครื่องมือของตัวเอง Firefox บรรจุ Styled Console Logs เป็นเครื่องมือพื้นฐานตั้งแต่เวอร์ชัน 31 ในปี 2014 ส่วน Chrome, Edge และ Safari ก็รองรับเช่นกัน ปัจจุบัน %c ถูกกำหนดเป็นมาตรฐานสากลใน WHATWG Console Specification เรียบร้อยแล้ว

สำหรับกรณีเว็บ TH AI Passport การแสดงข้อความเตือนขนาดใหญ่ในคอนโซลเป็นเทคนิคที่เว็บไซต์นิยมใช้เตือนผู้ใช้ทั่วไปไม่ให้วางโค้ดแปลกปลอมลงในคอนโซล เพราะอาจถูกหลอกให้รันคำสั่งอันตรายได้ ดังนั้นหากเห็นข้อความลักษณะนี้ ไม่ต้องตกใจ แค่อย่าคัดลอกโค้ดจากที่ไหนมาวางตามคำแนะนำของคนแปลกหน้าก็ปลอดภัย