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/

Debug Node as a server

Sebagai programmer tentu kita tidak asing dengan yang namanya debug process , sebuah proses yang dilakukan oleh para programmer untuk mencari dan mengurangi bug, atau kerusakan di dalam sebuah program komputer agar program tersebut bekerja sesuai dengan harapan. Untuk javascript sendiri , jika dia adalah client-side , maka kita bisa melakukan debug dengan menggunakan fitur dari web browser ataupun plugin seperti Firebase. Lalu bagaiamana jika javascript ( node js ) tersebut berjalan as a server ?.

Ada beberapa cara untuk melakukan debug node as a server . Node dengan versi baru mempunyai sebuah fitur yang memudahkan programmer untuk melakukan debug node as a server yaitu V8 Inspector Integration dengan menggunakan chromeDevTools

Caranya cukup mudah , cukup dengan syntaks --inspect , maka anda bisa menggunakan fitur tersebut. Berikut contoh penggunaannya :

node --inspect server.js

Lalu di console anda akan muncul hasil sebagai berikut :

Anda tinggal membuka URL tersebut di chrome anda.

Lalu bagaimana jika versi node anda tidak support dengan syntaks tersebut ?. Ada cara lain, contohnya sebagai berikut :
Saya menggunakan node versi v4.4.2 . Versi tersebut belum support dengan V8 Inspector Integration . Maka anda dapat melakukan debug process dengan cara sebagai berikut :

#install node-inspector
npm install -g node-inspector

#start node-inspector, listen on port 8080 (default)
node-inspector --web-port=8080

#buka terminal lain terminal session/window:
#sementara node-inspector berjalan , start file js anda dalam debug mode 
node --debug server.js

sekarang masukkan link berikut ke web browser anda:

 http://your_server:8080 

dan anda bisa melakukan debug process.
Demikian artikel dari saya, semoga bermanfaat cheers :D

sumber :
http://stackoverflow.com/questions/12440169/how-to-debug-node-js-with-remote-debugger-in-chrome-or-webkit
https://nodejs.org/api/debugger.html