ทันเอไอ

Mengenal Styled Logging, Fitur Mempercantik Teks di Console yang Berawal dari Plugin Firebug 14 Tahun Lalu

Teks "STOP" berukuran besar di Developer Console situs TH AI Passport membuat banyak orang penasaran. Sebenarnya ini adalah fitur Styled Logging yang sudah ada sejak era plugin Firebug tahun 2012

Belakangan ini banyak warganet Thailand mungkin terkejut saat membuka Developer Console (alat untuk pengembang yang tersembunyi di browser) ketika mengakses situs TH AI Passport milik pemerintah, lalu menemukan teks "STOP" berukuran besar dan mencolok. Banyak orang baru tahu bahwa console bisa menampilkan teks berformat menarik seperti ini, padahal sebenarnya fitur ini sudah tersedia bagi para pengembang selama lebih dari satu dekade.

Fitur tersebut bernama Styled Logging, yaitu pemformatan teks di Console menggunakan CSS (bahasa untuk mengatur tampilan halaman web) melalui perintah console.log dengan penanda %c di awal teks, diikuti nilai CSS seperti warna huruf, ukuran font, atau warna latar belakang. Contohnya console.log("%cteks", "color: red; font-size: 20px;") — teks yang muncul di console akan langsung berubah menjadi huruf merah berukuran besar.

Mundur ke tahun 2006, saat browser belum memiliki Developer Console bawaan seperti sekarang, Joe Hewitt — mantan insinyur perangkat lunak Netscape sekaligus salah satu pendiri proyek Firefox — menciptakan Firebug sebagai plugin tambahan agar pengembang bisa melakukan debugging (mencari dan memperbaiki kesalahan) situs web langsung dari browser. Kemudian pada tahun 2012, Firebug versi 1.11 menambahkan kemampuan Styled Logging melalui %c yang mendukung penentuan beberapa gaya CSS dalam satu log, dan inilah titik awal yang membuat fitur ini dikenal luas.

Setelah itu, browser-browser utama mulai mengadopsinya ke dalam alat bawaan masing-masing. Firefox menyertakan Styled Console Logs sebagai fitur standar sejak versi 31 pada tahun 2014, sementara Chrome, Edge, dan Safari juga mendukungnya. Kini %c telah ditetapkan sebagai standar internasional dalam WHATWG Console Specification.

Untuk kasus situs TH AI Passport, menampilkan teks peringatan berukuran besar di console adalah teknik yang umum digunakan situs web untuk memperingatkan pengguna awam agar tidak menempelkan kode asing ke dalam console, karena mereka bisa tertipu untuk menjalankan perintah berbahaya. Jadi jika melihat teks semacam ini, tidak perlu panik — cukup jangan menyalin kode dari mana pun dan menempelkannya atas anjuran orang tak dikenal, maka Anda akan aman.