AngularJS - Hata Ayıklama Modu

Angular

AngularJS kullanılan bir projenin derlenmiş HTML kodlarını incelediğinizde hata ayıklama (debug) için eklenmiş bilgileri görürsünüz. Bu bilgiler elemanlara class olarak eklenir.

Mesela normalde kodunuz aşağıdaki gibiyken;

<p>Merhaba {{ name }}!</p>

derlenmiş hali aşağıdaki gibi olacaktır.

<p class="ng-binding">Merhaba Sercan!</p>

Benzer şekilde ng-bind ya da ng-bind-html directive’leri de bilgilendirme ekleyecek. Ayrıca AngularJS kodu derlendiğinde yeni bir scope yaratılır ve yaratılan scope’un tipine göre view’a / HTML’e “ng-scope” ya da “ng-isolated-scope” class’ı eklenir.

AngularJS 1.3 versiyonu ile birlikte $compileProvider‘a debugInfoEnabled() metodu eklendi. Bu metoda false parametresi geçerek bilgilendirmeleri kapatabilir ve aşağıdaki bir satır kod ile canlı ortama aldığınız kodlarınızın daha hızlı çalışmasını sağlayabilirsiniz. Yani hata ayıklama modunu kapatmak size performans kazandırır.

$compileProvider.debugInfoEnabled(false);

Aşağıda hata ayıklama modunun kapalı ve açık olduğu durumlara ait 2 örnek bulunmaktadır. Tarayıcı üzerinden teftiş (inspect) ederek normalde hangi bilgilendirmeler yapılıyor ve hata ayıklama modu kapatıldığında hangi bilgilendirmeler yapılmıyor inceleyebilirsiniz.

Hata Ayıklama Modu Açık (Varsayılan)

See the Pen XJGmVN by Sercan Eraslan (@sercaneraslan) on CodePen.

Hata Ayıklama Modu Kapalı (Önerilir)

See the Pen JozYZr by Sercan Eraslan (@sercaneraslan) on CodePen.

Peki, Canlı Ortamda Hata Ayıklamak İstersek?

Telaşlanmayın, bunun güzel ve kolay bir yolu var. angular objesine reloadWithDebugInfo() adında bir metod eklendi. Canlı ortamda sayfa açıkken tarayıcının console bölümüne aşağıdaki kodu yazarsanız sayfanız hata ayıklama modu açık olarak derlenecektir. Havalı değil mi?

angular.reloadWithDebugInfo();