Javascript İle Etkili Hata Ayıklama Teknikleri: Console Komutları

JavaScript ile geliştirme yaparken, hata ayıklama için konsol komutlarını kullanmak vazgeçilmez bir ihtiyaçtır. console.log komutunu hepimiz biliyoruz, ancak JavaScript’in daha birçok konsol komutu sunduğunu biliyor muydunuz? Bu blog yazısında, console komutlarının tamamına göz atacağız ve nasıl daha etkili hata ayıklama yapabileceğinizden bahsedeceğim.

1. console.log(): En Temel Çıktı

Konsola bilgi yazdırmanın en klasik yolu console.log() komutudur. İster metin, ister sayı, isterse nesne veya dizi olsun, console.log ile her şeyi hızlıca yazdırabilirsiniz.

const user = { name: "Ali", age: 30 };
console.log("Kullanıcı Bilgisi:", user);

Çıktı: Konsolda Kullanıcı Bilgisi: { name: "Ali", age: 30 } görünür.

2. console.dir(): Nesnenin İç Yapısını İnceleyin

Bir nesnenin özelliklerini daha detaylı görmek istiyorsanız, console.dir() kullanabilirsiniz.
Bu komut özellikle DOM elemanlarını incelemek için idealdir.

const element = document.body;
console.dir(element);

Çıktı: Konsolda body elementinin tüm özelliklerini içeren bir ağaç yapısı görünür.

3. console.error(): Hata Mesajları Yazdırma

Hata durumlarını belirtmek için console.error() komutunu kullanabilirsiniz. Bu komut, çıktıyı genellikle kırmızı renkle göstererek, hatanın dikkat çekici olmasını sağlar.

console.error("Bir hata oluştu!");

4. console.warn(): Uyarı Mesajları Yazdırma

Ciddi olmayan uyarılar için console.warn() komutunu kullanabilirsiniz. Bu komut, uyarı mesajını genellikle sarı renkte gösterir.

console.warn("Bu özellik yakında kaldırılacak.");

Çıktı: Sarı renkte “Bu özellik yakında kaldırılacak.” uyarısı gösterilir.

5. console.info(): Bilgi Mesajları Yazdırma

Bilgilendirme mesajları için console.info() kullanılır. Bazı tarayıcılarda console.log ile aynı şekilde çalışır, ancak belirgin bir bilgilendirme olarak konsolda gösterilir.

console.info("Bilgilendirme mesajı.");

6. console.table(): Veriyi Tablo Olarak Görüntüleyin

Dizi veya nesne verilerini daha okunabilir hale getirmek için console.table() kullanabilirsiniz. Bu komut, verileri tablo formatında yansıtarak daha düzenli bir görünüm sağlar.

const users = [
  { id: 1, name: "Ali", age: 30 },
  { id: 2, name: "Ahmet", age: 25 },
];
console.table(users);

Çıktı: Konsolda her kullanıcı için satır ve sütunlardan oluşan bir tablo görünür.

7. console.time() ve console.timeEnd(): Kod Süresini Ölçme

Bir işlemin veya fonksiyonun ne kadar sürede çalıştığını ölçmek için console.time() ve console.timeEnd() komutlarını kullanabilirsiniz.

console.time("işlem süresi");
for (let i = 0; i < 1000000; i++) { /* uzun süren bir işlem */ }
console.timeEnd("işlem süresi");

Çıktı: Konsolda işlemin süresi milisaniye cinsinden gösterilir.

8. console.assert(): Koşula Göre Hata Yazdırma

Bir koşul yanlış olduğunda hata mesajı yazdırmak için console.assert() kullanılır. Bu komut, koşul sağlanmadığında bir hata mesajı gösterir.

const x = 5;
console.assert(x > 10, "x, 10'dan büyük olmalı.");

Çıktı: Koşul sağlanmadığı için konsolda “x, 10’dan büyük olmalı.” hatası görünür.

9. console.group() ve console.groupEnd(): Çıktıları Gruplandırma

Birden fazla bilgiyi gruplayarak göstermek için console.group() ve console.groupEnd() komutlarını kullanabilirsiniz. Bu, özellikle çok sayıda ilgili bilgi yazdırırken çıktıyı daha düzenli hale getirir.

console.group("Kullanıcı Bilgisi");
console.log("Ad: Ali");
console.log("Yaş: 30");
console.groupEnd();

Çıktı: Konsolda “Kullanıcı Bilgisi” başlığı altında iç içe yazdırılmış çıktı görünür.

10. console.groupCollapsed(): Başlangıçta Kapalı Grup

console.groupCollapsed(), console.group() ile aynı işlemi yapar, ancak grup varsayılan olarak kapalı gösterilir.

console.groupCollapsed("Detaylar");
console.log("Açıklama 1");
console.log("Açıklama 2");
console.groupEnd();

Çıktı: Konsolda “Detaylar” başlığı altında bir grup görünür, ancak bu grup varsayılan olarak kapalıdır.

11. console.trace(): Fonksiyon İzleme

Fonksiyonların çağrılma sırasını görmek için console.trace() komutunu kullanabilirsiniz. Bu komut, fonksiyonun nereden çağrıldığını ve çağrı sırasını gösterir.

function func1() {
  func2();
}
function func2() {
  console.trace("İzleme başlatıldı.");
}
func1();

Çıktı: Konsolda func1 ve func2 çağrı sırasını gösteren bir yığın izi görünür.

12. console.clear(): Konsolu Temizleme

Konsol ekranını temizlemek istiyorsanız console.clear() komutunu kullanabilirsiniz. Bu, özellikle çok fazla çıktı olduğunda hızlıca konsolu temizlemek için faydalıdır.

Bu yazıda Javascript’te console komutlarını ve nasıl kullanabileceğimizi inceledik. Herhangi bir Javascript projesinde bu komutları kullanarak çıktılarınızı düzenli ve anlaşılır hale getirebilir, hataları hızlı bir şekilde tespit edebilirsiniz.

İyi kodlamalar 🙂

Örnek konsol komutları için ve deneme yapmak için W3Scholls adresinden inceleyebilir ve uygulama yapabilirsiniz.