Firefox ile temel seviyede javascript debugging

Mozilla, Firefox Developer Edition için harika bir rehber hazırlamış. İçerisinde barındırdığı javascript vs css araçlarını nasıl işlevsel kullanabileceğinizi anlatıyor.

Bir uygulamanın front-end kısmında çalışırken sıklıkla yazdığınız kodun çıktısını görmek istiyorsunuz. Array, object işlemleri, form’dan dönen veriler, yaratılan yeni string’ler gibi gibi birçok işlevi uygulamanın akışı dahilinde analiz etmek ve varsa hataları ayıklamak işin olmazsa olmaz bir parçası. Bunun için çoğu zaman console.log yeterli olabiliyor. Özellikle ‘client-side’ çalışırken, console.log çok daha çevik ilerlemenize yardımcı olabiliyor.

Kimi zamansa daha detaylı bir analize ve hata ayıklama sürecine ihtiyacınız olabilir. Bu aşamada tercih ettiğiniz editor/ide’nin varsa kendi içerisindeki ‘debug tool’unu da kullanabilir ya da tarayıcınızın içerisinde gelen ‘debugger’i tercih edebilirsiniz. Bu konuda Firefox, tıpkı Chrome’da da olduğu gibi, güzel bir arayüz ve hata ayıklama süreci sunuyor.


Firefox debugger üzerine bir şeyler anlatmaya başlamadan önce, debug esnasında kullanacağımız, baz alacağımız basit bir todo-app oluşturdum. Görmek için şurayı, kaynak kodu içinse burayı kullanabilirsiniz. Bağımlılık olarak live-server paketi mevcut sadece, o da yerelinizde bir port üzerinden uygulamayı görebilmeniz için eklendi. Projeyi yerelinize çekip ‘npm i’ dedikten sonra ‘live-server’ komutuyla uygulamayı ayağa kaldırabilirsiniz ya da surge.sh üzerinden verdiğim link ile de pratik yapabilirsiniz.


firefox developer tool — debugger

Uygulamayı Firefox ile açtıktan sonra developer tools üzerinden debugger semkesine geldiğimizde, karşımıza yukarıdaki gibi bir ekran gelecektir. Bu ekran üzerinden kaynak kodunuzu görebilir ve istediğiniz noktalarda uygulamanızın çalışmasını durdurup, o ana kadar taşıdığı ve yarattığı değerleri inceleyebilirsiniz.

Görsel üzerinde numaralandırdığımız alanları açıklayarak başlayalım.

  1. Debugger’ın Source kısmı. Geçerli olan sayfa ya da uygulamanın barındırdığı tüm Javascript dosyalarına bu panel üzerinden erişebilirsiniz. Örnek uygulamada tek bir adet index.js dosyası olduğu için debug işlemini onun üzerinden yapacağız.
  2. Bu bölümde de ‘Source’ kısmından eriştiğimiz dosyaların içeriğini görürüz.
  3. Debug esnasında kullanacağımız işlevlerin toplandığı bölüm.
  4. 1.maddede de değindiğimiz gibi uygulamamız ile ilişkili dosyaların listelendiği dizin.
  5. Debug akışını yönetmemizi sağlayan araçlar burada toplanmıştır. Soldan sırasıyla açıklamak gerekirse:

En baştaki ‘pause’ simgesine sahip olan buton; ‘debug’ işinin yürütülmesini veya durdurulmasını sağlar. Debug işlemi başladıktan sonra ‘pause’ gösteren ikon ‘play’ durumuna geliyorsa, bu debug esnasında bir ‘breakpoint’e denk geldiğimizi ve analiz etmemiz için sürecin durduğu anlamına gelir.

İkinci buton ise, süreç içerisinde kodun bir sonraki döngüye ya da işleve geçmesini sağlar. Kodun döngüsü boyunca değineceği noktalar arasında hareket etmemize olanak tanır.

Üçüncü buton, içinde bulunduğumuz fonksiyon ya da metodun kendi içerisinde döndürdüğü diğer metodları görmemizi sağlar.

Dördüncü buton ise, o anki fonksiyon akışı ya da hata noktasından ayrılmamıza yardımcı olur.

100. satırdaki, saveItem metodu içerisindeki value üzerine bir breakpoint ekliyorum. Burada amacım form’dan dönecek olan verinin doğru bir şekilde uygulamaya ulaşıp ulaşmadığını ve array işlemlerinin yürütülüp yürütülmediğini kontrol etmek.

100. satırın üzerine gelip sağ tuş yaptığımızda ya da doğrudan üzerine sol ile bastığımızda, o satıra bir ‘breakpoint’ eklemiş oluruz. Bir nevi hata ayıklama esnasında durulacak nokta gibi düşenebilirsiniz. Breakpoint eklendikten sonra ‘100’ üzerinde mavi bir ‘highlight’ olacaktır. Sonrasında yapmamız gereken, app üzerinde kullanıcı işlemlerini başlatmak. Yani, input’a bir değer girip, save butonuna basmak!

Sonrasında sağ taraftaki panelde şöyle bir görüntü elde edeceğiz. Burada breakpoint’leri ve uygulamanın çalıştığı scope’ları görmeniz mümkün. Todo class’ının barındırdığı tüm contructor ve metodları listeleyebiliyorsunuz. Ancak, burada dikkat çeken nokta şu: Debug süreci başlamış ve hata noktasına gelmiş olmasına rağmen todoArr’in içerisine henüz input’tan gelen verinin eklenmediğini görüyoruz. Oysa ki, orta panelden ‘breakpoint’ koyduğumuz satırda this.value üzerine geldiğimizde ‘Test title’ değerini bize gösteriyor. Ancak, henüz Array’a push’lanmış değil. Çünkü hata ayıklama başlamış olsa da varolan scope’tan çıkmış değiliz. Yukarıda açıkladığımız gibi ‘play’ ikonunu görebiliyoruz. Süreç bizim belirlediğimiz noktada durdu, ancak bir sonraki scope’a geçebilmek için ‘play’ ikonunun hemen yanındaki ‘step over’ ikonuna tıklıyoruz. Ve süreç bir sonraki metoda geçiyor.

Şimdi baktığımızda, todoArr içerisinin dolduğunu ve input’tan gelen verinin buraya işlendiğini görüyoruz. Dolayısıyla, en temel düzeyde hata ayıklama sürecini başlattık ve çıktısıyla birlikte, uygulamamızın başarılı bir şekilde çalıştığını görmüş bulunuyoruz.


Bu aşamada ‘breakpoint’ üzerine çeşitli kontroller de ekleyebilirsiniz.

100. satır üzerinde ‘breakpoint’e sağ tıkladığınızda, ufak bir menü açılıyor. Oradan ‘Add condition’ dediğinizde ise size o noktada çeşitli kontrollerden geçtikten sonra debug sürecini başlatma imkanı veriyor. Çok basit olarak ‘this.value.length > 3’ diyerek, input’a girilen metnin uzunlugunun 3 karekterden fazla olması halinde debug protokolünün çalışması gerektiğini belirtiyoruz. Eğer input’tan gelen metin 3 karakterden daha az ise, debug hata noktasında hiç durmayacaktır, tam tersi durumda ise yukarıdaki süreç başlayacaktır.