Konsolda iletileri biçimlendirme ve biçimlendirme

Ceren Yeen
Jecelyn Yeen
Twitter GitHub Ana Sayfa

Bu kılavuzda, Chrome Geliştirici Araçları Konsolu'ndaki mesajların nasıl biçimlendirileceği ve biçimlendirileceği gösterilmektedir. Mesajları Console'a nasıl günlüğe kaydedeceğinizi öğrenmek için Günlük Mesajlarını Kullanmaya Başlayın bölümüne bakın.

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

Konsol mesajlarını biçimlendirme

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

Biçim belirleyiciler, yüzde karakteri (%) ile başlar ve veri türünü (tam sayı, kayan nokta vb.) belirten bir "tür karakteri" ile sona erer.

Örneğin,

  1. Console'u aç
  2. Aşağıdaki konsol komutunu girin. js 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

Chrome Geliştirici Araçları'nın şu anda desteklediği biçim tanımlayıcılarının 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, genişletilebilir bir DOM öğesi olarak biçimlendirir
%O Değeri, genişletilebilir bir JavaScript nesnesi olarak biçimlendirir
%c CSS stil kurallarını, ikinci parametrede belirtilen çıkış dizesine uygular

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

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

  1. Aşağıdaki konsol komutunu girin. js 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üşümlerini anlama

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

  1. Aşağıdaki konsol komutunu girin. js 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, çıkış 3 oranges olur. %d, değerin tam sayıya dönüştürülmesi gerektiğini/dönüştürüleceğini belirtir.

Aşağıda, dönüşüm türü geçersizse ne olacağına dair bir örnek verilmiştir.

  1. Aşağıdaki konsol komutunu girin. js console.log('Jane has %i kiwis.', 'two');
  2. Yukarıdaki komut Jane has NaN kiwis. mesajı oluşturur. Konsol mesajındaki NaN
  3. %i, değerin tam sayıya dönüştürülmesi gerektiğini/dönüştürüleceğini belirtir, ancak bağımsız değişken bir dizedir. Bu nedenle NaN (Not-A-Number) değerini döndürür.

Konsol mesajlarının stilini ayarlama

Geliştirici Araçları'nda konsol mesajlarının stilini iki şekilde belirleyebilirsiniz.

Biçim tanımlayıcıyla stil

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

  1. Aşağıdaki konsol komutunu girin. js 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ış şekilde Hooray sonucunu verir. CSS ile stil çıkışı

ANSI kod dışına alma dizileriyle stil oluşturma

Konsol mesajlarının stilini belirlemek için ANSI kod dışına alma adım sıralarını kullanabilirsiniz.

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

Bununla birlikte, herhangi bir kitaplık kullanmadan ANSI kod dışına alma sıralarıyla mesajın stilini belirleyebilirsiniz. Söz dizimi şöyledir:

\x1B[𝘗1;…;𝘗nm

Burada,

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

Örneğin,

  1. Aşağıdaki konsol komutunu girin. js 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
#aaa
#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 aşağıda bulabilirsiniz.

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

Burada, birden çok stil içeren daha karmaşık başka bir örnek verilmiştir.

  1. Aşağıdaki konsol komutunu girin. ```js const hello = '\x1B[41;93;4mHello'; const Space = '\x1B[m '; const world = '\x1B[34;102;9mWorld';

    console.log(merhaba + boşluk + world); ```

  2. Yukarıdaki komut, 3 farklı stilde bir Hello World mesajı oluşturur. Hello World