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 Pesan Logging untuk mempelajari cara mencatat pesan ke dalam log ke Konsol.

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 Console
  2. Masukkan perintah konsol berikut. js const tools = 'Chrome DevTools'; console.warn('%s is awesome.', tools);
  3. Perintah di atas menghasilkan pesan Chrome DevTools is awesome.. nilai string format

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

Penentu Output
%s Memformat nilai sebagai string
%i atau %d Memformat nilai sebagai bilangan bulat
%f Memformat nilai sebagai nilai floating point
%o Memformat nilai sebagai elemen DOM yang dapat diperluas
%O Memformat nilai sebagai objek JavaScript yang dapat diperluas
%c Menerapkan aturan gaya CSS ke string output seperti yang ditetapkan oleh parameter kedua

Menerapkan beberapa penentu format

Anda dapat menggunakan lebih dari satu penentu format dalam pesan.

  1. Masukkan perintah konsol berikut. js 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.. beberapa penentu format

Memahami konversi jenis

Pesan output akan dikonversi sesuai dengan penentu format.

  1. Masukkan perintah konsol berikut. js 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.. memformat nilai bilangan bulat
  3. Bukannya mencatat 3.5 oranges ke dalam log, output-nya adalah 3 oranges. %d menunjukkan bahwa nilai harus/akan dikonversi menjadi bilangan bulat.

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

  1. Masukkan perintah konsol berikut. js console.log('Jane has %i kiwis.', 'two');
  2. Perintah di atas menghasilkan pesan Jane has NaN kiwis.. NaN dalam pesan konsol
  3. %i menunjukkan bahwa nilai harus/akan dikonversi menjadi bilangan bulat, tetapi argumennya adalah string. Dengan demikian, metode ini menampilkan NaN (Not-A-Number).

Pesan konsol gaya

Ada dua cara untuk menata gaya pesan konsol di DevTools.

Gaya dengan penentu format

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

  1. Masukkan perintah konsol berikut. js 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 diterapkan. gaya output dengan CSS

Gaya dengan urutan escape ANSI

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

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

Meskipun demikian, 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 dari parameter SGR (Select Graphic Rendition) yang valid.
  • Setiap parameter 𝘗1 hingga 𝘗n dapat dihilangkan, dalam hal ini nilainya diasumsikan nol.
  • \x1B[m adalah singkatan untuk \x1B[0m, yang mana atribut tampilan akan direset.

Misalnya,

  1. Masukkan perintah konsol berikut. js console.log('\x1B[41;93;4mHello\x1B[m');
  2. Perintah di atas menghasilkan pesan Hello dengan latar belakang merah, teks kuning, dan digarisbawahi. Halo

Berikut adalah daftar kode warna yang didukung di DevTools.

Latar depan Latar belakang Tema terang Tema gelap
30 40
#00000
#00000
31 41
#AA0000
#ed4e4c
32 42
#00AA00
#01c800
33 43
#AA5500
#d2c057
34 44
#0000AA
#2774f0
35 45
#AA00AA
#a142f4
36 46
#00AAAA
#12b5cb
37 47
#AAAAAA
#cfd0d0
90 100
#555555
#898989
91 101
#FF5555
#f28b82
92 102
#55FF55
#01c801
93 103
#FFFF55
#ddfb55
94 104
#5555FF
#669df6
95 105
#FF55FF
#d670d6
96 106
#55FFFF
#84f0ff
97 107
#FFFFFF
#FFFFFF

Berikut adalah daftar kode penataan gaya yang didukung di DevTools.

Parameter Arti
0 Mereset semua atribut tampilan
1 font-weight: bold
2 font-weight: lighter
3 font-style: italic
4 Tambahkan underline ke properti text-decoration
9 Tambahkan line-through ke properti text-decoration
22 Reset properti font-weight
23 Reset properti font-style
24 Hapus underline dari properti text-decoration
29 Hapus line-through dari properti text-decoration
38;2;R;G;B color: rgb(𝑅,𝐺,𝐵)
39 Reset color property
48;2;R;G;B background: rgb(𝑅,𝐺,𝐵)
49 Reset background property
53 Tambahkan overline ke properti text-decoration
55 Hapus overline dari properti text-decoration

Berikut adalah contoh lain yang lebih kompleks dengan beberapa gaya.

  1. Masukkan perintah konsol berikut. ```js 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. Halo Dunia