console.log()
Daha önce bir web uygulaması geliştirdiyseniz yada geliştirenlerin yanında bulunduysanız, verileri geliştirici konsoluna (Console Mode) yazdıran bir yöntem olan console.log()‘a aşinasınızdır. console.log(); hata ayıklama, günlüğe kaydetme ve test etme için kullanışlı bir fonksiyondur ve kodunuz içerisinde sürekli geliştirme yapıp sayfayı yenilemeden ekranda sonuçları görmenizi sağlar.
Geliştirici ekranı Windows’ta (CTRL + Shift + C), MacOs’da (Command + Option + i) yada F12 kısayolları ile açılabilir. Buradan Console menüsüne gelip console.log(console) yazarak console.log() methodu ile neler yapabileceğimizi gösteren kısayolları görebiliriz.
Tablolar (Tables)
console.table() ile console ekranında bir tablo oluşturabiliriz. console.table() yöntemi, nesneleri/dizileri özenle biçimlendirilmiş tablolar olarak yazdırır.
console.table({
'Zaman': new Date().getTime(),
'İşletim Sistemi': navigator['platform'],
'Tarayıcı': navigator['appCodeName'],
'Dil': navigator['language'],
});
Gruplar (Groups)
console.group() kullanarak ilgili konsol deyimlerini daraltılabilir bölümlerle birlikte gruplandırın.
İsteğe bağlı olarak, parametre olarak bir dize ileterek bir bölüme bir başlık verebilirsiniz. Bölümler konsolda daraltılabilir ve genişletilebilir, ancak grup yerine groupCollapsed seçeneğini kullanarak bir bölümün varsayılan olarak daraltılmasını da sağlayabilirsiniz. Alt bölümleri bölümler içinde de iç içe yerleştirebilirsiniz, ancak her grubu groupEnd ile kapatmayı unutmayın.
Aşağıdaki örnek, bazı bilgileri içeren açık bir bölümün çıktısını verecektir.
console.group('URL Info');
console.log('Protocol', window.location.protocol);
console.log('Host', window.origin);
console.log('Path', window.location.pathname);
console.groupCollapsed('Meta Info');
console.log('Date Fetched', new Date().getTime());
console.log('OS', navigator['platform']);
console.log('Browser', navigator['appCodeName']);
console.log('Language', navigator['language']);
console.groupEnd();
console.groupEnd();
Console Stilleri (Console Styles)
console.log ile bir çıktı alacağımız zaman bu çıktılara stil vererek daha güzel ve ilgi çekici bir görünüm kazandırabilir.
console.log('%cTeknolojinin %cGelişen %cAdı %cTeknokodi', 'color:red;', 'color:blue;', 'color:orange', 'color:blue;background-color:yellow;font-size:25px;text-decoration:underline');
Zaman (Time)
Diğer bir yaygın hata ayıklama tekniği, bir işlemin ne kadar sürdüğünü izlemek için yürütme süresini ölçmektir. Bu, console.time() kullanılarak bir etiket verilerek zamanlayıcının başlatılıp ve ardından aynı etiket ile console.timeEnd() kullanılarak zamanlayıcı sonlandırılarak elde edilebilir. Ayrıca, console.timeLog() kullanarak uzun süredir devam eden bir işlemde işaretçiler ekleyebilirsiniz.
console.time("timer");
let output = "";
for (var i = 1; i <= 1e1; i++) {
output += i;
}
console.timeEnd("timer");
Assert
Yalnızca bir hata oluştuğunda veya belirli bir koşul doğru veya yanlış olduğunda konsola başvurmak isteyebilirsiniz. Bu, ilk parametre yanlış olmadığı sürece konsola hiçbir şey kaydetmeyecek ancak koşul sağlandığında console a uyarıyı verecek olan console.assert() kullanılarak yapılabilir.
İlk parametre, kontrol edilecek bir mantıksal koşuldur, ardından yazdırmak istediğiniz 0 veya daha fazla veri noktası gelir ve son parametre, çıktısı alınacak bir mesajdır. Bu nedenle, ilk parametre yanlış olduğu için console.assert(false, ‘Değer yanlış) mesajının çıktısını verecektir.
const errorMsg = '# çift değil';
for (let num = 1; num <= 10; num++) {
console.log(`# => ${num}`);
console.assert(num % 2 === 0, { num }, errorMsg);
}
Sayma (Count)
Bir işlemin kaç kez yürütüldüğünü, kaç kez döngü içinde çalıştığını bilmek isteyebiliriz. console.count() bu işi bizim yerimize yapmaktadır.
İsteğe bağlı olarak sayacınıza, birden fazla sayacı yönetmenize ve çıktıyı daha net hale getirmenize olanak tanıyan bir etiket verebilirsiniz.
Sayaçlar her zaman 1’den başlar. İsteğe bağlı bir etiket parametresi de alan console.countReset() ile bir sayacı istediğiniz zaman sıfırlayabilirsiniz.
const numbers = [1, 2, 3, 30, 69, 120, 240, 420];
numbers.forEach((name) => {
console.count();
});
const nums = [3, 23, 30, 30, 6, 120, 5, 4];
const smallNumber = () => {
console.count('Sayı 5 den küçük');
}
nums.forEach((num) => {
console.count('Sayı kontrol edildi');
if(num <= 5) {
smallNumber();
}
});
Bir etiket vermek yerine, bir değer kullanırsanız, her koşul değeri için ayrı bir sayacınız olur. Örneğin:
console.count(NaN); // NaN: 1
console.count(NaN+3); // NaN: 2
console.count(1/0); // Infinity: 1
console.count(String(1/0)); // Infinity: 2
İzleme (Trace)
JavaScript’te, genellikle derinlemesine iç içe geçmiş yöntemler ve nesnelerle çalışıyoruz. Yığın izlemede gezinmek için console.trace()‘i kullanabilir ve belirli bir noktaya ulaşmak için hangi yöntemlerin çağrıldığını çıkarabilirsiniz.
function foo() {
function bar() {
console.trace();
}
bar();
}
foo();
İsteğe bağlı olarak, yığın izleme ile birlikte çıktı alınacak verileri de iletebilirsiniz.
Dir
Konsola büyük bir nesne kaydediyorsanız, okunması zorlaşabilir. console.dir() yöntemi, onu genişletilebilir bir ağaç yapısında biçimlendirir.
Aşağıda, dizin stili konsol çıktısına bir örnek verilmiştir:
console.dir(document.location);
console.dirxml() kullanarak XML veya HTML tabanlı ağaçları da benzer şekilde yazdırabilirsiniz.
Debug
Uygulamanızda, geliştirme sırasında güvendiğiniz ancak kullanıcının görmesini istemediğiniz bazı günlük kaydı ayarlarınız olabilir. Log deyimlerini console.debug() ile değiştirmek tam olarak bunu yapacaktır, console.log ile tam olarak aynı şekilde çalışır, ancak çoğu derleme sistemi tarafından çıkarılır veya üretim modunda çalışırken devre dışı bırakılır.
Log Düzeyleri (Log Levels)
Tarayıcı konsolunda (bilgi, uyarılar ve hata) birkaç filtre olduğunu fark etmiş olabilirsiniz, bunlar günlüğe kaydedilen verilerin ayrıntılarını değiştirmenize olanak tanır. Bu filtrelerden yararlanmak için, günlük ifadelerini aşağıdakilerden biriyle değiştirmeniz yeterlidir:
- console.info() – Günlüğe kaydetme amaçlı bilgi mesajları, genellikle küçük bir “i” ve / veya mavi bir arka plan içerir.
- console.warn() – Uyarılar / kritik olmayan hatalar, genellikle üçgen bir ünlem işareti ve / veya sarı arka plan içerir.
- console.error() – İşlevselliği etkileyebilecek hatalar, genellikle dairesel bir ünlem işareti ve/veya kırmızı arka plan içerir.
Node.js’de üretimde çalışırken farklı akışlara farklı günlük seviyeleri yazılır, örneğin error() stderr’e yazarken log çıktıları stdout’a yazar, ancak geliştirme sırasında bunların tümü konsolda normal olarak görünür.
Log Metin Formatları (Log String Formats)
Çıktı almak için biçimlendirilmiş dizeler oluşturmanız gerekiyorsa, bunu biçim belirticileri kullanarak C-stili printf ile yapabilirsiniz.
Aşağıdaki belirleyiciler desteklenir:
- %s – Dize veya dizeye dönüştürülen herhangi bir başka tür
- %d / %i – Tamsayı
- %f – Float sayılar
- %o – Optimum biçimlendirmeyi kullan
- %O – Varsayılan biçimlendirmeyi kullan
- %c – Özel biçimlendirme kullan
Temizleme (Clear)
Son olarak, bir olaydan bir çıktı ararken, sayfa ilk yüklendiğinde konsola kaydedilen her şeyden kurtulmak isteyebilirsiniz. Bu, tüm içeriği temizleyecek ancak herhangi bir veriyi sıfırlamayacak olan console.clear() ile yapılabilir.
Genellikle Bin simgesine tıklayarak konsolu temizlemek ve Filtre metin girişini kullanarak içinde arama yapmak da mümkündür.
Özel Tarayıcı Methodları (Special Browser Methods)
Kodu doğrudan tarayıcının konsolunda çalıştırırken, hata ayıklama, otomasyon ve test için son derece yararlı olan birkaç kestirme yönteme erişebileceksiniz.
- $() – Document.querySelector() için kısaltma (DOM öğelerini seçmek için, jQuery stili!)
- $$() – Yukarıdakiyle aynı, ancak bir dizideki birden çok öğeyi döndürürken selectAll için
- $_ – Son değerlendirilen ifadenin değerini döndürür.
- $0 – En son seçilen DOM öğesini döndürür (denetçide).
- $1…$4, önceden seçilen UI öğelerini almak için de kullanılabilir
- $x() – Bir Xpath sorgusu kullanarak DOM öğelerini seçmenizi sağlar.
- keys() ve values() – Object.getKeys() için kısaltma, obj anahtarlarından veya değerlerinden oluşan bir dizi döndürür.
- copy() – Öğeleri panoya kopyalar.
- monitorEvents() – Belirli bir olay her tetiklendiğinde komutu çalıştır.
- Bazı yaygın konsol komutları için (console.table() gibi), önceki konsolu yazmanız gerekmez, sadece table() komutunu çalıştırın.
Konsolda oturum açarak yapabileceğiniz daha çok şey var! Daha fazla bilgi için MDN console Documentation veya Chrome Dev Console Docs bakın.
Paylaş
Eğitimin, Eğlencenin ve Haberin Sitesi TEKNOKODİ
