Bu eğiticide, örnekler yardımıyla JavaScript'te hata ayıklamayı öğreneceksiniz.
Program yazarken hatalarla karşılaşabilirsiniz ve karşılaşacaksınız. Hatalar mutlaka kötü değildir. Aslında, çoğu zaman kodumuzla ilgili sorunları belirlememize yardımcı olurlar. Kodunuzda nasıl hata ayıklayacağınızı ve hataları nasıl düzelteceğinizi bilmeniz önemlidir.
Hata ayıklama , programı inceleme, hatayı bulma ve düzeltme işlemidir.
JavaScript programınızda hata ayıklamanın farklı yolları vardır.
1. console.log () kullanarak
console.log()Kodda hata ayıklamak için yöntemi kullanabilirsiniz . Kontrol etmek istediğiniz değeri console.log()yönteme iletebilir ve verilerin doğru olup olmadığını kontrol edebilirsiniz.
Sözdizimi şöyledir:
console.log(object/message);
Nesneyi console.log()veya sadece bir mesaj dizesini iletebilirsiniz .
Önceki eğitimde, console.log()çıktıyı yazdırmak için yöntemi kullandık . Ancak, bu yöntemi hata ayıklamak için de kullanabilirsiniz. Örneğin,
let a = 5; let b = 'asdf'; let c = a + b; // if you want to see the value of c console.log(c); // then do other operations if(c) ( // do something )
console.log()Tarayıcıda yöntemi kullanmak hata ayıklayıcı penceresindeki değeri açar.
Tarayıcıda console.log () yönteminin çalışması
console.log()Tarayıcılara özgü değildir. Diğer JavaScript motorlarında da mevcuttur.
2. Hata ayıklayıcıyı kullanma
debuggerKelime kodunun çalışmasını durdurur ve hata giderme işlevini çağırır.
debuggerNeredeyse tüm JavaScript motorlarında kullanılabilir.
Bir örnek görelim,
let a = 6; let b = 9; let c = a * b; // stops the execution debugger; console.log(c);
Bir Chrome tarayıcısında hata ayıklayıcıyı nasıl kullanabileceğinizi görelim.
Tarayıcıda hata ayıklayıcının çalışması
Yukarıdaki program, programın debugger.
Programı inceledikten sonra akış kontrolünü devam ettirebilirsiniz.
Konsolda oynat düğmesine basarak komut dosyasını devam ettirdiğinizde kodun geri kalanı yürütülür.
Tarayıcıda hata ayıklayıcının çalışması
3. Kesme Noktalarını Ayarlama
Hata ayıklayıcı penceresinde JavaScript kodu için kesme noktaları ayarlayabilirsiniz.
JavaScript her kesme noktasında çalışmayı durdurur ve değerleri incelemenizi sağlar. Ardından, kodun yürütülmesine devam edebilirsiniz.
Chrome tarayıcısında bir kesme noktası belirleyerek bir örnek görelim.
Tarayıcıda kesme noktalarının çalışması
Kesme noktaları, kodun herhangi bir yerinde Geliştiriciler aracıyla belirleyebilirsiniz.
Kesme noktaları ayarlamak, koda bir hata ayıklayıcı koymaya benzer. Burada, hata ayıklayıcı işlevini manuel olarak çağırmak yerine kaynak kodun satır numarasına tıklayarak kesme noktalarını ayarlarsınız.
Yukarıdaki yöntemlerde, basitlik için hata ayıklama işlemlerini göstermek için Chrome tarayıcısını kullandık. Ancak, bu sizin tek seçeneğiniz değil.
Tüm iyi IDE'ler, kodda hata ayıklamanız için bir yol sağlar. Hata ayıklama süreci biraz farklı olabilir ancak hata ayıklamanın arkasındaki kavram aynıdır.
