Memformat dan menyesuaikan gaya pesan di Konsol

Jecelyn Yeen

Panduan ini menunjukkan cara memformat dan menata gaya pesan di Konsol Chrome DevTools. Lihat Mulai Menggunakan Logging Pesan untuk mempelajari cara mencatat pesan ke Konsol Play.

Panduan ini mengasumsikan bahwa Anda memahami dasar-dasar pengembangan web, seperti cara menggunakan JavaScript untuk menambahkan interaktivitas ke halaman.

Memformat pesan konsol

Anda dapat menggunakan penentu format untuk memformat pesan konsol.

Penentu format dimulai dengan karakter persen (%) dan diakhiri dengan "karakter jenis" yang menunjukkan jenis data (bilangan bulat, float, dll.).

Misalnya,

1. Buka Konsol

2. Masukkan perintah konsol berikut.

   const tools = 'Chrome DevTools';
   console.warn('%s is awesome.', tools);
   

3. Perintah di atas menghasilkan pesan Chrome DevTools is awesome..

Berikut adalah daftar penentu format yang didukung Chrome DevTools saat ini.

Menerapkan beberapa penentu format

Anda dapat menggunakan lebih dari satu penentu format dalam sebuah pesan.

1. Masukkan perintah konsol berikut.

   console.info('The total weight of %i %s and %d %s is %f grams.', 3, 'apples', 2, 'oranges', 432.4);
   

2. Perintah di atas menghasilkan pesan The total weight of 3 apples and 2 oranges is 432.4 grams..

Memahami konversi jenis

Pesan output akan dikonversi sesuai dengan penentu format.

1. Masukkan perintah konsol berikut.

   console.log('I have %i apples and %d oranges.', 2, 3.5); 
   

2. Perintah di atas menghasilkan pesan I have 2 apples and 3 oranges..

3. Sebagai ganti logging 3.5 oranges, outputnya adalah 3 oranges. %d menunjukkan bahwa nilai harus/akan dikonversi menjadi bilangan bulat.

Berikut adalah contoh apa yang terjadi jika konversi jenis tidak valid.

1. Masukkan perintah konsol berikut.

   console.log('Jane has %i kiwis.', 'two');
   

2. Perintah di atas menghasilkan pesan Jane has NaN kiwis..

3. %i menunjukkan bahwa nilai harus/akan dikonversi menjadi bilangan bulat, tetapi argumennya adalah string. Dengan demikian, fungsi ini akan menampilkan NaN (Not-A-Number).

Menyesuaikan gaya pesan konsol

Ada dua cara untuk menata gaya pesan konsol di DevTools.

Menata gaya dengan penentu format

Anda dapat menggunakan specifier format %c untuk menata gaya pesan konsol dengan CSS.

1. Masukkan perintah konsol berikut.

   const style = 'background-color: darkblue; color: white; font-style: italic; border: 5px solid hotpink; font-size: 2em;'
   console.log("%cHooray", style);
   

2. Perintah di atas menghasilkan Hooray dengan gaya CSS yang diterapkan.

Gaya dengan urutan escape ANSI

Anda dapat menggunakan urutan escape ANSI untuk menata gaya pesan konsol.

Sudah umum bagi developer Node.js untuk mewarnai pesan log melalui urutan escape ANSI, sering kali dengan bantuan beberapa library gaya visual seperti chalk, colors, ansi-colors, kleur.

Namun, Anda dapat menata gaya pesan dengan urutan escape ANSI tanpa menggunakan library apa pun. Berikut sintaksnya:

\x1B[𝘗1;…;𝘗nm

Di mana,

• 𝘗1 hingga 𝘗n adalah suburutan yang valid dari parameter SGR (Select Graphic Rendition).
• Setiap parameter 𝘗1 hingga 𝘗n dapat dihilangkan, dan dalam hal ini nilainya dianggap nol.
• \x1B[m adalah singkatan untuk \x1B[0m, saat atribut tampilan akan direset.

Misalnya,

1. Masukkan perintah konsol berikut.

   console.log('\x1B[41;93;4mHello\x1B[m');
   

2. Perintah di atas menghasilkan pesan Hello dengan latar belakang merah, teks kuning, dan digarisbawahi.

Berikut adalah daftar kode warna yang didukung di DevTools.

Berikut adalah daftar kode gaya yang didukung di DevTools.

Berikut adalah contoh lain yang lebih kompleks dengan beberapa gaya visual.

1. Masukkan perintah konsol berikut.

   const hello = '\x1B[41;93;4mHello';
   const space = '\x1B[m ';
   const world = '\x1B[34;102;9mWorld';
   
   console.log(hello + space + world);
   

2. Perintah di atas menghasilkan pesan Hello World dengan 3 gaya yang berbeda.