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.. format nilai string

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 ditentukan oleh parameter kedua

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.. beberapa penentu format

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.. memformat nilai bilangan bulat

  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.. NaN dalam pesan konsol

  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. menata gaya output dengan CSS

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. 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 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 Menambahkan underline ke properti text-decoration
9 Menambahkan line-through ke properti text-decoration
22 Mereset properti font-weight
23 Mereset properti font-style
24 Hapus underline dari properti text-decoration
29 Menghapus 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 Menambahkan overline ke properti text-decoration
55 Hapus overline dari properti text-decoration

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. Halo Dunia