17 Şubat 2014 Pazartesi

AngularJS - Debugging


Uygulama geliştirme sırasında hata ayıklama çok önemli bir yere sahiptir. Örneğin; uygulama beklenmedik şekilde çalıştığında, performans problemi yaşadığınızda veya sayfa üzerindeki bir element'in çalışma anında nasıl ifade edildiğini öğrenmek istediğinizde hata ayıklama aracına başvurursunuz. Her web uygulamasında olduğu gibi; Angular uygulaması geliştirirken de hata ayıklama aracını etkin bir şekilde kullanabiliyor olmanız gerekir. Firefox ile birlikte gelen, kullanabileceğiniz öntanımlı bir hata ayıklama aracı yoktur. Eklenti olarak Firebug'ı önerebilirim. Chrome'da ise öntanımlı olarak "Geliştirici Araçları" gelmektedir ve pek çok ihtiyacınıza cevap verir. Ancak mevcut sorununuz Angular'ın çalışması ile alakalı ise, bu araç da işinizi görmez. Bunun için; Chrome üzerinde hata ayıklamada kullanılabilecek oldukça işe yarar bir eklenti geliştirilmiştir: Batarang [1].
Eklentiyi kurduktan sonra, mevcut geliştirici araçları ekranına "AngularJS" isminde bir sekme daha eklenir ve kullanabilmeniz için checkbox işaretleyerek etkinleştirmeniz yeterlidir. Ayrıca "Elements" sekmesi altına da "AngularJS Properties" isminde bir sekme eklenir. "AngularJS" altındaki "Help" sekmesinde ise eklentinin ne işe yaradığını güzel bir şekilde anlatmışlar.

Not: İçerisinde büyük boyutta veri tutan nesneler üzerinde çalışıyorsanız, ng-repeat directive'i kullanımında performans problemleri ile karşılaşmanız muhtemeldir [3]. Özellikle bu tür performans problemlerinde Batarang çok işinize yarayacaktır.

Referanslar:
  1. Introducing the AngularJS Batarang
  2. AngularJS Batarang (video)
  3. Debugging performance problems in AngularJS with Batarang and Chrome DevTools

Hiç yorum yok: