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 açıklanmaktadır. Mesajları Console'a nasıl kaydedeceğinizi öğrenmek için Mesaj Günlüğe Kaydetme Özelliğini Kullanmaya Başlama başlıklı makaleyi inceleyin.

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

Konsol mesajlarını biçimlendirme

Konsolu mesajlarını biçimlendirmek için biçim belirteçlerini kullanabilirsiniz.

Biçim belirteci yüzde karakteriyle ("%) başlar ve veri türünü (tamsayı, kayan nokta vb.) belirten bir "tür karakteriyle" biter.

Örneğin,

1. Konsolu açma

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. iletisi oluşturur.

Chrome DevTools'un şu anda desteklediği biçim belirteçlerinin listesi aşağıda verilmiştir.

Birden fazla biçim belirteci uygulama

Bir mesajda birden fazla biçim belirteci 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. iletisi oluşturur.

Tür dönüştürmelerini anlama

Çıkış mesajı, biçim belirtme öğesine 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. iletisi oluşturur.

3. 3.5 oranges yerine 3 oranges kaydedilir. %d, değerin bir tam sayıya dönüştürülmesi gerektiğini/dönüştürüleceğini belirtir.

Tür dönüştürme işlemi geçersizse ne olacağını gösteren bir örnek aşağıda verilmiştir.

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

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

2. Yukarıdaki komut, Jane has NaN kiwis. iletisi oluşturur.

3. %i, değerin bir tam sayıya dönüştürülmesi gerektiğini/dönüştürüleceğini gösterir ancak bağımsız değişken bir dizedir. Bu nedenle NaN (Sayı Değil) döndürür.

Konsol mesajlarının stilini ayarlama

DevTools'ta konsol mesajlarına stil uygulamanın iki yolu vardır.

Biçim belirteci içeren stil

Konsolda gösterilen mesajların stilini CSS ile belirlemek için %c biçim belirteci 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 stillerinin uygulandığı Hooray öğesini oluşturur.

ANSI kaçış dizileriyle stil

Konsolda mesajları biçimlendirmek için ANSI kaçış dizilerini kullanabilirsiniz.

Node.js geliştiricilerinin, genellikle chalk, colors, ansi-colors, kleur gibi bazı stil kitaplıklarının yardımıyla ANSI kaçış dizileri aracılığıyla günlük mesajlarını renklendirmesi yaygın bir durumdur.

Bununla birlikte, herhangi bir kitaplık kullanmadan ANSI kaçış dizeleriyle mesaja stil uygulayabilirsiniz. Söz dizimi şu şekildedir:

\x1B[𝘗1;…;𝘗nm

Where,

• 𝘗1 ile 𝘗n, SGR (Seçilen Grafik Oluşturma) parametrelerinin geçerli alt dizileridir.
• 𝘗1 ile 𝘗n arasındaki parametrelerden herhangi biri atlanabilir. Bu durumda, parametrenin değerinin sıfır olduğu varsayılır.
• \x1B[m, görünen özelliğin sıfırlanacağı \x1B[0m kısayoludur.

Ö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 planlı, sarı renkli metinli ve altı çizili bir Hello mesajı oluşturur.

Geliştirici Araçları'nda desteklenen renk kodlarının listesi aşağıda verilmiştir.

Geliştirici Araçları'nda desteklenen stil kodlarının listesi aşağıda verilmiştir.

Birden fazla stilin kullanıldığı daha karmaşık bir örnek aşağıda 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ı stil içeren bir Hello World mesajı oluşturur.