AngularJS Debugging Tools: Ng-Inspector

Dalam mengembangkan aplikasi dibutuhkan proses debugging untuk mencari dan mengurangi bug, atau kerusakan di dalam aplikasi yang kita buat. Namun bagaimana kita melakukan debugging pada AngularJS? So, let start the journey  :D

Ng-inspector adalah sebuah browser extension . Digunakan untuk inspect Angular applications pada scopes, model, function dan performances aplikasi.

Browser Plugin atau Extension ini tersedia pada browser Chrome, Firefox dan Safari

Fitur yang tersedia pada Ng-Inspector adalah sebagai berikut:

• Scopes, Melihat keseluruhan hierarki scope aplikasi AngularJS yang dibuat pada console.
• DOM highlighting, Saat cursor diarahkan pada suatu DOM dapat terlihat scope atau function yang terlihat dalam console.
• Controllers, directives…, ng-inspector mengidentifikasi dan menampilkan sepanjang controller dan directive yang ada pada aplikasi AngularJS
• Models, melihat models pada variable scope beserta tipe dan nilainya ditampilkan pada console
• Real time, Saat melakukan interaksi terhadap aplikasi pada waktu yang bersamaan dapat dilihat action apa yang dilakukan pada function atau perubahan value dari suato variable scope pada ng-inspector

Install ng-inspector terlebih dahulu extension pada browser yang anda gunakan, seperti gambar dibawah ini:

Screenshot tampilan implementasi ng-inspector:

Tampilan pada console ketika menginspect suatu function yang ada pada page tersebut:

Nah sekian penjelasan dan sedikit tentang cara debugging aplikasi AngularJS menggunakan ng-inspector, sampai bertemu pada tulisan saya selanjutnya :D

References:

http://cubettech.com/blog/angularjs-must-have-tools-pack-for-developers/

http://ng-inspector.org/