Konsolda iletileri biçimlendirme ve biçimlendirme

Bu kılavuzda, Chrome Geliştirici Araçları Konsolu'nda mesajları nasıl biçimlendireceğiniz ve biçimlendireceğiniz gösterilmektedir. Mesajları konsola nasıl kaydedeceğinizi öğrenmek için Günlük Kaydı Mesajlarını Kullanmaya Başlama bölümüne bakın.

Bu kılavuzda, bir sayfaya etkileşim eklemek için JavaScript'in nasıl kullanılacağı gibi web geliştirmenin temellerini bildiğiniz varsayılmaktadır.

Konsol mesajlarını biçimlendirme

Konsol mesajlarını biçimlendirmek için biçim tanımlayıcıları kullanabilirsiniz.

Biçim tanımlayıcı, yüzde karakteri (%) ile başlar ve "tür karakteri" ile sonlandırılır Bu değer, veri türünü gösterir (tam sayı, kayan noktalı vb.).

Örneğin,

  1. Konsolu aç
  2. Aşağıdaki konsol komutunu girin.

    const tools = 'Chrome DevTools';
    console.warn('%s is awesome.', tools);
    
  3. Yukarıdaki komut Chrome DevTools is awesome. mesajı oluşturur. biçim dize değeri

Şu anda Chrome Geliştirici Araçları tarafından desteklenen biçim belirteçlerin listesini burada bulabilirsiniz.

Belirtici Çıkış
%s Değeri bir dize olarak biçimlendirir
%i veya %d Değeri tam sayı olarak biçimlendirir
%f Değeri, kayan nokta değeri olarak biçimlendirir
%o Değeri bir genişletilebilir DOM öğesi olarak biçimlendirir
%O Değeri, genişletilebilir bir JavaScript nesnesi olarak biçimlendirir
%c CSS stili kurallarını, ikinci parametre tarafından belirtilen çıkış dizesine uygular

Birden çok biçim tanımlayıcısı uygulama

Bir iletide birden fazla biçim tanımlayıcısı kullanabilirsiniz.

  1. Aşağıdaki konsol komutunu girin.

    console.info('The total weight of %i %s and %d %s is %f grams.', 3, 'apples', 2, 'oranges', 432.4);
    
  2. Yukarıdaki komut The total weight of 3 apples and 2 oranges is 432.4 grams. mesajı oluşturur. birden çok biçim tanımlayıcı

Tür dönüşümleri hakkında

Çıkış mesajı, biçim tanımlayıcısına göre dönüştürülür.

  1. Aşağıdaki konsol komutunu girin.

    console.log('I have %i apples and %d oranges.', 2, 3.5); 
    
  2. Yukarıdaki komut I have 2 apples and 3 oranges. mesajı oluşturur. tam sayı değerlerini biçimlendir

  3. 3.5 oranges günlük kaydı yerine 3 oranges çıkışı alınır. %d, değerin tam sayıya dönüştürülmesi gerektiğini/dönüştürüleceğini belirtir.

Dönüşüm türü geçersizse ne olacağına dair bir örneği burada bulabilirsiniz.

  1. Aşağıdaki konsol komutunu girin.

    console.log('Jane has %i kiwis.', 'two');
    
  2. Yukarıdaki komut Jane has NaN kiwis. mesajı oluşturur. Konsol mesajında "NN"

  3. %i, değerin tam sayıya dönüştürülmesi/dönüşmesi gerektiğini ancak bağımsız değişkenin dize olduğunu belirtir. Dolayısıyla, NaN (Not-A-Number) değerini döndürür.

Konsol mesajları için stil

Geliştirici Araçları'nda konsol mesajlarını biçimlendirmenin iki yolu vardır.

Biçim tanımlayıcıyla stil

Konsol mesajlarının stilini CSS ile belirlemek için %c biçim tanımlayıcısını kullanabilirsiniz.

  1. Aşağıdaki konsol komutunu girin.

    const style = 'background-color: darkblue; color: white; font-style: italic; border: 5px solid hotpink; font-size: 2em;'
    console.log("%cHooray", style);
    
  2. Yukarıdaki komut, CSS stilleri uygulanmış halde Hooray oluşturur. CSS ile stil çıktısı

ziyaret edin.

ANSI kaçış dizileriyle stil

Konsol mesajlarının stilini belirlemek için ANSI çıkış sıralarını kullanabilirsiniz.

Node.js geliştiricilerinin günlük mesajlarını, genellikle tebeşir, renkler, ansi-colors ve kleur gibi bazı stil kitaplıklarının yardımıyla ANSI kod dışına alma sıraları aracılığıyla renklendirmesi yaygın bir uygulamadır.

Bununla birlikte, herhangi bir kitaplık kullanmadan mesajı ANSI kaçış dizileriyle biçimlendirebilirsiniz. Söz dizimi şöyledir:

\x1B[𝘗1;…;𝘗nm

Nerede,

  • 𝘗1-𝘗n, SGR (Grafik Oluşturmayı Seçin) parametrelerinin geçerli alt sürümleridir.
  • 𝘗1 - 𝘗n parametrelerinden herhangi biri atlanabilir. Bu durumda, değerinin sıfır olduğu varsayılır.
  • \x1B[m, ekran özelliğinin sıfırlanacağı \x1B[0m ifadesinin kısaltmasıdır.

Örneğin,

  1. Aşağıdaki konsol komutunu girin.

    console.log('\x1B[41;93;4mHello\x1B[m');
    
  2. Yukarıdaki komut; kırmızı arka plan, sarı metin ve altı çizili bir Hello mesajı oluşturur. Merhaba

Geliştirici Araçları'nda desteklenen renk kodlarının listesini aşağıda bulabilirsiniz.

Ön plan Arka plan Açık tema Koyu tema
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

Geliştirici Araçları'nda desteklenen stil kodlarının listesini burada bulabilirsiniz.

Parametreler Anlamı
0 Tüm ekran özelliklerini sıfırla
1 font-weight: bold
2 font-weight: lighter
3 font-style: italic
4 underline öğesini text-decoration mülküne ekle
9 line-through öğesini text-decoration mülküne ekle
22 font-weight mülkünü sıfırla
23 font-style mülkünü sıfırla
24 underline öğesini text-decoration mülkünden kaldır
29 line-through öğesini text-decoration mülkünden kaldır
38;2;R;G;B color: rgb(𝑅,𝐺,𝐵)
39 Sıfırla: color property
48;2;R;G;B background: rgb(𝑅,𝐺,𝐵)
49 Sıfırla: background property
53 overline öğesini text-decoration mülküne ekle
55 overline öğesini text-decoration mülkünden kaldır

Aşağıda, birden çok stil içeren daha karmaşık bir örnek daha verilmiştir.

  1. Aşağıdaki konsol komutunu girin.

    const hello = '\x1B[41;93;4mHello';
    const space = '\x1B[m ';
    const world = '\x1B[34;102;9mWorld';
    
    console.log(hello + space + world);
    
  2. Yukarıdaki komut, 3 farklı stile sahip bir Hello World mesajı oluşturur. Merhaba Dünya