Photo by Fernando Maté on Unsplash

Web API

Console API

Frontend Developer belkide en sık kullandığı komut console.log, bu yazımda Console API bize sağladığı yeteneklerin ne olduğu üzerinde duracağım.

Bu yazı daha önceden başlamış olduğum Web API yazı serisinin devamı niteliğindedir. JS kodları ile işletim sistemi veya tarayıcının native kısımlarına erişmek için sağlanan API’ler olduğundan bahsetmiştim. Console API’de tarayıcının Developer Console erişmenizi buraya bir takım log veya metinler yazdırarak kodun nasıl işletildiğini anlamanıza olanak sağlar.

window.console veya worker için WorkerGlobalScope.console objeleri üzerinden Console API ulaşabilirsiniz. ConsoleAPI nasıl kullanacağınız dair Spec bu adresten inceleyebilirsiniz.

Chrome Developer Console

JS’de en çok kullandığımız komutlardan bir taneside console.log ile istediğimiz metni yazdırmak olacaktır

console.log(“Merhaba Dunya”)

console.log

Burda bu API’nin biraz daha detaylarını inceleyerek Console API’sini daha etkin nasıl kullanabileceğimize bakacağız. Aşağıda konuları özetlersek;

1. Log Level
2. Log Formatting

• C printf benzeri formatlama
• Console String Yerine Object Yazdır
• Table Formatında Gösterim
• Console Mesajlarını Gruplama
• Console Temizleme

3. Debugging ve Performans

• Stack Trace Yazdır
• Mesajlar ile Birlikte Count Yazdır
• Komut İşletimleri Arasında Geçen Süreyi Yazdır
• CPU Profile Oluştur.

1. Log Level

Farkı seviyelerde log basabiliriz. Bu sayede istediğimiz kanala odaklanıp direk bu kanala bakabiliriz. console.error(), console.warn(), console.info, console.debug() yazdığınız mesajların ilgili kanallara düşmesini sağlarsınız.

Log Levels

2. Log Formatting

2.1 C printf Benzeri Formatlama

Yazdığınız string içerisinde birden fazla parametre geçirmek istiyorsunuz. C dilindeki en temel printf fonksiyonunda olduğu gibi %s string , %d %i integer, %f float %o DOM Element olarak%O object gösterimi gerçekleştirir.

console.log("Merhaba Dunya bugun gunlerden %i %s. Hava sıcaklıgı %f",26,"Temmuz",34.5);
console.log("AA %o, BB %O",document.body,document.body)

log formatting

%c verilen css console string işlemesini sağlayabiliriz. Örneğin aşağıdaki örnekte string içerisinde farklı farklı css vererek string farklı renklerde gösterilmesini sağlayabilirsiniz.

console.log("%c Selam %c Dunya","background:red; font-size:15pt","background:blue; font-size:24pt")

css formating

Birden fazla parametreyi console.log geçtiğimizde log bunları birleştirerek gösterebilir. % parametre geçişi yerine console.log() fonksiyonuna birden fazla parametre geçmeniz yeterli. Array ve Obj görüntüleyecektir.

console.log("Ali","Okula","Git.","Saat",9,"okul","baslayacak",[12,11],{a:2});

2.2 Console String Yerine Obj Olarak Basar

console.dir ile console.log arasında ciddi bir gösterim farkı görmedim. Sadece console.log String çıktı yaparken , console.dir Object çıktı yapmaktadır.

console.log([1,2,3]);
console.dir([1,2,3]);
console.log({a:1,b:2});
console.dir({a:1,b:2});

console.log vs console.dir

2.3 Tablo Formatında Gösterim

Verilen Obj array table şeklinde ekrana çizerek yazdırılan objenin daha net bir şekilde anlaşılması sağlanır

console.table([{adi:"Onur", yas:40, il:'Ankara'},
               {adi:"Deniz", yas:9, il:'Adana'}

console.table

2.4 Console Mesajlarını Gruplama

Log Mesajlarını gruplamak için console.group() veya console.groupEnd() kullanabilirsiniz.

console.group('Log Doc')
   console.log('Log Level')
   console.group('Log Formatting')
     console.log('C printf Benzeri Formatlama')
     console.log('Tablo Formatında Gösterim')
   console.groupEnd()
console.groupEnd()

console.group

Ayrıca console.groupCollapsed metodunu group yerine kullanıp ilk görüntülemede ilgili grubun kapalı gözükmesini sağlatabilirsiniz.

2.5 Console Temizleme

console.clear() Console yazılan tüm log mesajlarını temizler

3. Log Debugging ve Performans

3.1 Stack Trace Yazdır

Kodun çalışırken hangi stack üzerinden çağrıldığını görebilmek için console.trace(“Merhaba Dunya”) yazmanız yeterli. Aşağıda basit bir react app için kodun nerelerden tetiklendiğini görebilirsiniz.

console.trace

3.2. Console Mesajları için Counter Tutma

Console.count( ) yazdırdığımız satır(label) için bir tane count tutar. Her gelen aynı log mesajı için bu sayıyı 1 arttırır. Arkaplanda şu şekilde bir map tutuyor. countMap(label)=0

Console.log arka arkaya aynı mesaj gelmesi durumunda Chrome bunları aynı satır içerisinde yazarak gösterir.

for(let i=0;i<3;i++) console.log("Merhaba");

console.log in for

Console.log ve Console.count aynı for içerisinde kullandığımızda aynı label için yanında count değerinin bulunduğunu görebilirsiniz. countReset ile bu label için countMap(“Dunya”)=0 yapılır.

for(let i=0;i<3;i++) {
    console.log("Merhaba");
    console.count("Dunya")
}
console.countReset("Dunya")
console.count("Dunya")

console.count

3.3 Yapılan Komut Setlerinin Süresini Ölçme

console.time(), console.timeEnd() yapılan işlemler arasındaki süreyi ölçebilirsiniz.

let sum=0;
console.time("toplam")
for(let i=0;i<1000000;i++) sum+=i;
console.timeEnd("toplam")

toplam: 4.698974609375ms sürdüğünü görebilirsiniz.

3.4 CPU Profile Oluştur.

CPU Profile oluşturmak için console.profile() ve console.profileEnd() fonksiyonlarını kullanabilirsiniz. Chrome tarayıcısı JSProfiler Tabını kaldırmışlar.

let sum=0;
console.profile("toplam")
for(let i=0;i<1000000;i++) sum+=i;
console.profileEnd()

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.