Javascript Konsol Fonksiyonları

Javascript Konsol Fonksiyonları

Javascript Konsol Fonksiyonları

  8 dakika Okuma Süresi
Merhabalar, bu yazımızda Javascript'teki konsol fonksiyonlarından bahsedeceğim. Kategori olarak Node.JS Dersleri kategorisinde olsa da sonuçta NodeJS'te de Javascript kullanılıyor ve tabiki orada da konsol fonksiyonları vardır. Neyse konumuza geçelim.

Konsol fonksiyonlarını Javascript kullanan herkes biliyordur. Tarayıcı üzerinden çalışan projeler için tarayıcıda, harici uygulamalar üzerinde çalışan projeler için de entegre terminaller üzerinde çıktılar vermek için kullanılan bu fonksiyonların birbirinden farklı varyasyonları var. Şimdi sırasıyla bu fonksiyonları ve ne işe yaradıklarını yazalım;
console.log() Bu fonksiyon ile konsol ekranına loglama yapabiliyoruz. Yani konsol ekranına çıktı yazabiliyoruz. Parametre olarakta herşeyi alabilir. Yani sayı, metin, obje, class, dizi, .... herşey olabilir. Ayrıca tek seferde birden fazla parametre göndererek her birinin yan yana yazılmasını da sağlayabiliriz. Örnek kodumuz şöyle olsun;

class NewClass { }
console.log('EgitimSetiAl.Com');
console.log(23);
console.log({a: 1, b: 2, c: 3});
console.log(['deneme', 1, 3.45, {key1: 'value1', key2: 'value2'}]);
console.log(true);
console.log(undefined);
console.log('EgitimSetiAl.Com', 1, true, new NewClass());
console.log(new NewClass());
Bu kod satırının çıktısı şöyle olmalıdır;
Javascript Console Fonksiyonları

console.error(): Her konsol fonksiyonu olduğu gibi bu da konsol ekranına çıktı veriyor fakat fonksiyonun adından da anlaşılacağı üzere error yani hata mesajları için kullanılıyor. Yani ekrana bastırdığınız ifade kırmızı bir tema ile görünecektir. Elbette console.log() fonksiyonu gibi her türlü parametre alabilir ve isterseniz birden fazla parametre göndererek yan yana yazdırabilirsiniz. Örnek kodumuz şöyle olsun;

console.error('Bu Bir Hata Mesajıdır');
console.error('Bu İkinci Hata', ['dizi', 'şeklinde', 'hata'], true, 5);
Bu kodun çıktısı da şöyle olacaktır;
Javascript console.error()

console.warn(): Bu fonksiyonda warning yani uyarı mesajları için kullanılmakta ve mesajın arka plan rengi sarı, yazı rengi beyaz olacaktır. Elbette her türlü veriyi kabul edebilir çoklu parametre gönderebilirsiniz. Bunun için de örneğimiz şöyle olsun;

console.warn('Uyarı Mesajı 1');
console.warn('Uyarı Mesajı 2', 'Mesaj 3', {mesaj: 'bu da 4'}, 5);
console.warn(['dizi', 'elemanları', 3, false, ['başka', 'dizi']]);
Ve kod çıktımız;
Javascript console.warn()

console.clear(): Adından da anlaşılacağı üzere konsol ekranını temizler, size tertemiz bir konsol ekranı sunar :)
Tabiki konsolu silmesi için herhangi bir parametre almasına gerek yok ve sildikten sonra da ekrana Console was cleared (konsol ekranında da eğik) yazar.

console.time() ve console.timeEnd(): Bu fonksiyonları tek bir maddede belirtmemin sebebi, her ikisi de bağlantılı bir şekilde kullanılmakta. Kod bloğunun çalışması için geçen süreyi öğrenmek istediğimizde kullanacağız.
console.time() ile kod bloğunu başlatıp, console.timeEnd() ile de kod bloğunu tamamlayarak, arada geçen zamanı ölçer ve ekrana bastırabiliriz.
Parametre olarak her ikisi de string bir ifade alıyor ve gönderdiğiniz parametrelerin aynı olması gerekiyor. Çünkü sizin console.time() fonksiyonuna gönderdiğiniz parametre ile saat başlatılıyor ve arada geçen süre sizin parametreniz ile eşleniyor. Ardından console.timeEnd() fonksiyonuna gönderdiğiniz parametre ile eşlenmiş bir saat varsa onu ekrana basıyor. Farklı parametreler gönderirseniz, eşlenmiş bir saat olmayacağı için ekrana hata basacaktır.
Örnek kodumuzu şöyle yazalım;

const Fonksiyon1 = () => {
    console.log('Birinci Fonksiyon Çalıştı');
}
const Fonksiyon2 = () => {
    console.log('İkinci Fonksiyon Çalıştı');
}
console.time('saat');
Fonksiyon1();
Fonksiyon2();
console.timeEnd('saat');
Bu kodu yazıp çalıştırdığımızda şöyle bir ekran çıktısı görmemiz gerekiyor;
Javascript console.time()

console.table(): Konsol ekranında daha iyi okunabilirlik için parametre olarak gönderdiğiniz dizi veya object nesnelerini tablo ile gösterir. Dizi yada objectin index numarası için ayrı, değerleri için de ayrı sütun oluşturur ve eleman sırasına göre tabloya yerleştirir. Ayrıca tablonun ardından console.log() ile aynı şekilde ekrana basar. Yani 2 kere ekrana basmış oluyor.
Parametre olarak dizi yada object dışında bir şey gönderirseniz (integer, string, boolean, class vs) console.log() ile aynı görevi görür, yani sadece ekrana basar tablo yapmaz.

console.table([1, 2, 3, 4, 'dizi', true, 5]);
console.table({key1: 'value1', key2: 'value2'});
console.log('Bu sadece bir string');
Bu kodumuzun çıktısı da şöyle olacaktır;
Javascript console.table()

console.count(): Bu fonksiyon ile parametre olarak gönderilen bir değişkenin kaç kez kullanıldığını öğrenebiliyoruz. Aslında bi nevi işlemci saatinin kaç kere vurduğunu ve kodumuzun o değişken üzerinden kaç kere geçtiğini görebiliyoruz.
Örneğimiz de şöyle olsun;

for(var i = 0; i < 10; i ++)
    console.count(i);
Bu kodun ekran çıktısı da şöyle olacaktır;
Javascript console.count()
İki noktanın solundakiler i değişkeninin değerleri, sağındakiler ise i değişkeninin kaç kere kullanıldığını göstermekte. Soldakiler için sorun yok, i 0'dan başlayıp 10'dan küçük olana kadar döngü devam etsin dedik, haliyle 9'da bitecek fakat neden sağdakilerin hepsi 1 ? Çünkü kod akışına bakarsanız, yukarıdan aşağı işlediği ve her döngü adımında i değişkeninin değeri değiştiği için döngünün her adımında i'nin tekrar sayısı sıfırlanıyor ve döngünün şartından dolayı 1 arttırıldığı için sürekli 1 yazıyor.

console.group() ve console.groupEnd() Bu iki fonksiyonda birlikte kullanıldığı için aynı başlık altında vereceğim. Bu fonksiyonlarda adlarından da anlaşılacağı üzere gruplandırma yapıyor. console.group() ile gruba bi isim verip grubu başlatıyor ve console.groupEnd() ile de grubu sonlandırabiliyorsunuz.
Tabi her ikisinde de parametre olarak gönderdiğiniz grup ismi aynı olmalı. Buna bir örnek şöyle verelim;

console.group('grup');
console.log('Grup Elemanı 1');
console.log('Grup Elemanı 2');
console.log('Grup Elemanı 3');
console.log('Grup Elemanı 4');
console.groupEnd('grup');
console.log('Bir Başka Log');
Bu kodları yazdığınızda da şöyle bir çıktı verecektir;
Javascript console.group()
Gördüğünüz üzere console.group('grup') ile console.groupEnd('grup') arasına yazdığımız kodlar gruplanmış halde iken, son satırda yazdığımız ayrıca görünmekte.

Konsolu Renklendirme Konsol ekranında siyah arka plan, beyaz renk görmekten sıkıldıysanız o zaman çıktı vereceğiniz şeyi biraz özelleştirmek hoşunuza gidecektir. Bunu da konsol ekranına CSS vererek yapacağız.
Bunun için CSS vereceğiniz ifadenin başına %c yazmanız ve loglama fonksiyonunuza (console.log(), console.error(), console.warn()) ikinci parametre olarak CSS kodlarınızı vermeniz gerekiyor. Yani örneğin şöyle bir örnek yapalım;

var css="padding: 10px; background-color: white; color: red; font-style: italic; border: 1px solid black; font-size: 2em;";
console.log('%c Bu Özel Bir Yazı', css);
Bu kod ile 10px iç boşluklu, arkaplan rengi beyaz, yazı rengi kırmızı, italik tipte, 1px siyah bi border ve 2em boyutunda Bu Özel Bir Yazı yazdıracaktır. Hadi çıktısını da görelim;
Javascript Konsol Renklendirme
Gördüğünüz üzere tamda belirttiğim şekilde bir çıktı vermiş olduk.

Eveett Javascript konsol fonksiyonlarımız bu kadar, bu fonksiyonlar sayesinde konsol ekranını daha efektif bir şekilde kullanabilirsiniz.
Bu yazımızda bu kadardı, tüm NodeJS yazılarımıza buradan ulaşabilirsiniz. Herkese hayırlı günler.


  • İçeriği Paylaş:

İÇERİĞİ DEĞERLENDİR

Toplam Değerlendirme Sayısı: 0
Toplam Değerlendirme: 0 / 5

Cevap Yaz