JavaScript Debug: Chrome DevTools ile Hata Ayıklama

html

Web geliştirmenin vazgeçilmez bir parçası olan JavaScript, dinamik ve etkileşimli web siteleri oluşturmamızı sağlar. Ancak, JavaScript kodları yazarken hatalarla karşılaşmak kaçınılmazdır. Neyse ki, modern tarayıcıların sunduğu geliştirici araçları (Developer Tools), bu hataları bulma ve çözme sürecini oldukça kolaylaştırır. Bu makalede, özellikle Chrome DevTools'u kullanarak JavaScript hatalarını nasıl ayıklayacağımızı (debug edeceğimizi) inceleyeceğiz. Console.log ve try-catch gibi temel hata ayıklama yöntemlerine de değineceğiz. Örnek bir hatalı JavaScript kodunu adım adım debug ederek, bu araçların ve yöntemlerin pratikte nasıl kullanıldığını göreceğiz. Bu sayede, JavaScript geliştirme sürecinizi daha verimli ve sorunsuz hale getirebileceksiniz, kod yazma becerilerinizi önemli ölçüde geliştirebileceksiniz. Web geliştirme yolculuğunuzda, hata ayıklama becerileri, sizi bir adım öne taşıyacaktır.

Tarayıcı Geliştirici Araçlarına (Chrome DevTools) Giriş

Chrome DevTools, Google Chrome tarayıcısına entegre edilmiş güçlü bir araç setidir. Web geliştiricilerin, web sayfalarını ve uygulamalarını incelemesine, düzenlemesine ve hatalarını ayıklamasına olanak tanır. DevTools'a erişmek için, tarayıcı penceresinde sağ tıklayıp "İncele" (Inspect) seçeneğini seçebilir veya F12 (Windows) / Cmd + Opt + I (Mac) kısayolunu kullanabilirsiniz.

DevTools'un JavaScript hata ayıklama için en önemli sekmeleri şunlardır:

Elements (Öğeler): Sayfanın HTML ve CSS yapısını incelemenizi ve düzenlemenizi sağlar.
Console (Konsol): JavaScript kodunuzun çıktısını ve hata mesajlarını gösterir. Aynı zamanda, konsol üzerinden doğrudan JavaScript kodu çalıştırabilirsiniz.
Sources (Kaynaklar): Sayfada kullanılan tüm kaynak dosyalarını (JavaScript, CSS, resimler vb.) gösterir. JavaScript dosyalarınızda kesme noktaları (breakpoints) ayarlayarak kodunuzu adım adım çalıştırabilirsiniz.
Network (Ağ): Sayfanın ağ trafiğini (HTTP istekleri ve yanıtları) izlemenizi sağlar.

Console.log ile Hata Ayıklama

console.log(), JavaScript'te en temel ve sık kullanılan hata ayıklama yöntemlerinden biridir. Kodunuzun belirli noktalarındaki değişkenlerin değerlerini veya kodun akışını konsola yazdırmak için kullanılır. Bu sayede, kodunuzun beklediğiniz gibi çalışıp çalışmadığını kontrol edebilirsiniz.

Örnek:


    function topla(a, b) {
      console.log("a değeri:", a);
      console.log("b değeri:", b);
      return a + b;
    }

    let sonuc = topla(5, "10");
    console.log("Sonuç:", sonuc); // Beklenen çıktı: 15, Gerçek çıktı: 510 (string birleştirme)

function topla(a, b) {

console.log("a değeri:", a);

console.log("b değeri:", b);

return a + b;

}

let sonuc = topla(5, "10");

console.log("Sonuç:", sonuc); // Beklenen çıktı: 15, Gerçek çıktı: 510 (string birleştirme)

Yukarıdaki örnekte, console.log() kullanarak a ve b değişkenlerinin değerlerini ve işlemin sonucunu konsola yazdırdık. Bu sayede, JavaScript'in sayıyı ve string'i toplamak yerine string birleştirme işlemi yaptığını fark ettik.

Try-Catch Kullanımı

try-catch blokları, JavaScript'te hata yönetimi için kullanılır. try bloğu içerisine, hata oluşturabilecek kodlar yazılır. Eğer bu blok içerisinde bir hata oluşursa, kodun akışı catch bloğuna yönlendirilir. catch bloğunda ise, hatayı yakalayabilir ve uygun bir şekilde işleyebilirsiniz (örneğin, kullanıcıya bir hata mesajı gösterebilirsiniz).

Örnek:


    try {
      // Hata oluşturabilecek kod
      let sonuc = bolme(10, 0); // Sıfıra bölme hatası
      console.log("Sonuç:", sonuc);
    } catch (error) {
      // Hata yakalandığında çalışacak kod
      console.error("Bir hata oluştu:", error);
       //Kullanıcıya, sayıların sıfıra bölümeyeceğini belirten bir hata mesajı gösterebiliriz.
    }

    function bolme(a, b) {
      if (b === 0) {
        throw new Error("Sıfıra bölme hatası!");
      }
      return a / b;
    }

try {

// Hata oluşturabilecek kod

let sonuc = bolme(10, 0); // Sıfıra bölme hatası

console.log("Sonuç:", sonuc);

} catch (error) {

// Hata yakalandığında çalışacak kod

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

//Kullanıcıya, sayıların sıfıra bölümeyeceğini belirten bir hata mesajı gösterebiliriz.

}

function bolme(a, b) {

if (b === 0) {

throw new Error("Sıfıra bölme hatası!");

}

return a / b;

}

Yukarıdaki örnekte, bolme fonksiyonunda sıfıra bölme hatası oluştuğunda, throw ifadesi ile özel bir hata fırlatılır. Bu hata, try-catch bloğunun catch kısmında yakalanır ve konsola bir hata mesajı yazdırılır.

Hatalı JavaScript Kodunu Adım Adım Debug Etme (Chrome DevTools ile)

Şimdi, Chrome DevTools'u kullanarak hatalı bir JavaScript kodunu adım adım nasıl debug edeceğimizi görelim:

Hatalı Kodu Hazırlama: Aşağıdaki hatalı kodu içeren bir HTML dosyası oluşturun ve tarayıcıda açın.


        &lt;!DOCTYPE html&gt;
        &lt;html&gt;
        &lt;head&gt;
            &lt;title&gt;JavaScript Debug Örneği&lt;/title&gt;
        &lt;/head&gt;
        &lt;body&gt;
            &lt;button onclick="hesapla()"&gt;Hesapla&lt;/button&gt;
            &lt;p id="sonuc"&gt;&lt;/p&gt;

            &lt;script&gt;
                function carpma(sayi) {
                  
                    return sayi * sayi;
                }

                function hesapla() {
                    let sayilar = [1, 2, 3, 4, 5];
                    let toplam = 0;
                    for (let i = 0; i <= sayilar.length; i++) { // Hata burada: Döngü, dizinin sınırlarını aşıyor
                        toplam += carpma(a[i]);
                    }
                    document.getElementById("sonuc").innerText = "Toplam: " + toplam;
                }
            &lt;/script&gt;
        &lt;/body&gt;
        &lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>JavaScript Debug Örneği</title>

</head>

<body>

<button onclick="hesapla()">Hesapla</button>

function carpma(sayi) {

return sayi * sayi;

}

function hesapla() {

let sayilar = [1, 2, 3, 4, 5];

let toplam = 0;

for (let i = 0; i <= sayilar.length; i++) { // Hata burada: Döngü, dizinin sınırlarını aşıyor

toplam += carpma(a[i]);

}

document.getElementById("sonuc").innerText = "Toplam: " + toplam;

}

</script>

</body>

</html>

DevTools'u Açma ve Sources Sekmesi: Tarayıcıda sayfayı açtıktan sonra F12 (veya sağ tıklayıp "İncele") ile DevTools'u açın ve "Sources" (Kaynaklar) sekmesine geçin.
Kesme Noktası (Breakpoint) Ekleme: Sources sekmesinde, JavaScript kodunuzun bulunduğu dosyayı açın. Hatanın kaynağını düşündüğünüz satırın sol tarafındaki satır numarasına tıklayarak bir kesme noktası ekleyin (örneğin, for döngüsünün olduğu satır).
Kodu Çalıştırma ve Adım Adım İlerleme: Sayfadaki "Hesapla" butonuna tıklayın. Kodunuz, kesme noktasında duracaktır. Artık, DevTools'un sağ tarafındaki kontrol panelini kullanarak kodu adım adım çalıştırabilirsiniz.

Step over (F10): Geçerli satırı çalıştırır ve bir sonraki satıra geçer.
Step into (F11): Eğer geçerli satır bir fonksiyon çağrısı ise, fonksiyonun içine girer ve orada adım adım ilerlemeye devam eder.
Step out (Shift + F11): Eğer bir fonksiyonun içindeyseniz, fonksiyondan çıkar ve fonksiyonu çağıran satıra geri döner.

Değişkenleri İnceleme: Kodunuz adım adım çalışırken, DevTools'un sağ tarafındaki "Scope" (Kapsam) bölümünde değişkenlerin o anki değerlerini görebilirsiniz. Bu, hatanın nedenini anlamanıza yardımcı olacaktır.
Hatayı Bulma ve Düzeltme: Yukarıdaki örnekte, döngü değişkeni i'nin sayilar.length değerine eşit olduğunda, sayilar[i] tanımsız (undefined) olacaktır ve carpma fonksiyonuna undefined değeri geçirilmeye çalışılacaktır. Bu da hataya neden olacaktır. Hatayı düzeltmek için, döngü koşulunu i < sayilar.length olarak değiştirmemiz gerekir.

Sonuç

JavaScript geliştirme sürecinde hata ayıklama, kaçınılmaz bir gerekliliktir. Bu makalede, Chrome DevTools başta olmak üzere, console.log ve try-catch gibi temel hata ayıklama yöntemlerini ve araçlarını ele aldık. Chrome DevTools'un "Sources" sekmesindeki kesme noktaları, adım adım kod çalıştırma ve değişkenleri inceleme gibi özellikler, hataları hızlı ve etkili bir şekilde bulmamızı sağlar. Console.log, kodun belirli noktalarındaki değişkenlerin değerlerini ve akışı gözlemlemek için basit ama güçlü bir yöntemdir. Try-catch blokları ise, potansiyel hataları yakalamak ve programın beklenmedik şekilde sonlanmasını önlemek için kritik öneme sahiptir. Örnek bir hatalı kodu adım adım debug ederek, bu araçların ve yöntemlerin pratikte nasıl kullanıldığını gördük. Bu bilgiler ışığında, JavaScript kodlarınızdaki hataları daha kolay bulabilir, daha hızlı çözebilir ve daha temiz, daha sağlam kodlar yazabilirsiniz. Unutmayın, hata ayıklama becerisi, JavaScript'te ustalaşmanın önemli bir parçasıdır.

Bir yanıt yazın Yanıtı iptal et