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

3. 3.5 oranges yerine 3 oranges günlük kaydına alınır. %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

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

Konsolda mesajları biçimlendirmek için ANSI kaçış dizilerini 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 ANSI kaçış dizeleriyle mesaja stil uygulayabilirsiniz. Söz dizimi şöyledir:

\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.

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.