Konsolda iletileri biçimlendirme ve biçimlendirme

Jecelyn Yeen

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.

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

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.

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.

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.

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.

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.

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

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

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.