lifelong learner — urip iku urup, currently working on accenture.

Angular augury – debugging tools untuk angular js

0
Degananda.com -

Angular Augury

Debugging adalah proses yang dilakukan oleh pengembang software (developer/programmer) untuk mencari bug pada suatu sistem. Mencari bug sama halnya mencari jarum dalam jerami. Hal itu dapat terjadi apabila kita menggunakan tools yang salah. Misalkan untuk mendebug javascript kita hanya melihat melalui source code. Hal ini tentu tidak benar padahal sudah terdapat beberapa tools yang memudahkan untuk mendebug javascript seperti firebug.

Pada angular terdapat extension yang tersedia di browser chrome yang benama angular augury. Yakni extension yang didevelop oleh rangle.io dan tim angular.io khusus untuk melakukan debugging pada aplikasi yang dibangun dengan angular. Meski fungsi utamannya adalah melakukan debugging namun angular augury juga dapat melakukan profiling terhadap aplikasi angular. Misalkan menvisualisasikan komponen-komponen yang ada pada aplikasi.

Keunggulan angular augury

Berikut ini adalah fitur-fitur yang dimiliki oleh extension chrome angular augury

  • Memvisualisasikan komponen dalam bentuk pohon (tree)
  • Visual debugging tools
  • Melihat change detection
  • Performance statistics
  • Open source!

itulah beberapa fitur yang akan sangat membantu bagi kita developer angular. Sehingga tidak ada salahnya untuk mencoba extension angular augury ini.

Installasi

Untuk dapat menggunakan angular augury kita harus menggunakan browser google chrome. Karena memang angular augury berbentuk extension dari chrome. Sehingga tidak dapat digunakan pada browser selain google chrome. Anda dapat mengunduh dan menginstall extension ini pada link dibawah ini atau dapat anda search langsung pada chrome store “angualr augury”

https://chrome.google.com/webstore/detail/augury/elgalmkoelokbchhkhacckoklkejnhcd

setelah terinstall pada pojok kanan atas browser chrome anda secara otomatis akan terdapat logo angular augury berwarna kuning dengan icon bulan sabit ditengahnya. Inilah shortcut untuk membuat angular augury

Implemenetasi

untuk mencoba angular augury kita harus berada pada halaman website yang dibangun dengan menggunakan angular js. Anda dapat menggunakan project-project anda yang telah anda buat dengan angular. Setelah itu masuk pada devtools. yang paling mudah anda dapat devtools pada chrome ini melalui klik kanan lalu pilih inspect element

setelah anda memilih inspect element maka akan muncul window dengan banyak sekali tab. Pada pojok kanan sendiri akan ada tab baru bernama augury. Melalui tab itulah kita akan mengakses angular augury.

pada tab augury ini terdapat tiga menu utama yakni :

  1. Component tree
  2. Router tree
  3. NgModules

ketiga fitur tersebut akan coba kita breakdown dan kupas masing-masing pada penjelasan dibawah ini.

1.Component tree

Sesuai dengan namannya component tree atau pohon komponen. Augury akan menvisualisasikan komponen-komponen yang terdapat pada project kita dalam bentuk tree atau pohon. Berikut ini adalah contohnya

Dapat kita lihat bahwa root component bernama AppComponent. Kemudian dibawahnya terdapat komponen ComListNoteComponent dimana komponen ini memiliki empat buah komponen lain yang digunakan didalamnya.

Component tree ini sangat berguna untuk melihat komponen-komponen apa saja yang kita gunakan pada suatu halaman. Bayangkan jika scope dari project sangat besar dan jumlah komponen yang digunakan juga banyak maka akan sangat rumit untuk mencari komponen yang hendak didebug. Augury adalah jawaban dari permasalahan tersebut.

1.1 Breakdown

kita dapat membreakdown komponen hingga paling terkecil. Contohnya seperti dibawah ini.

dari gambar tersebut kita tahu bahwa ComSearchComponent menggunakan Mdcard dan MdInputContainer. keduannya adalah bagian dari material design untuk angular (2+).

2. Router tree

memang kita dapat melihat daftar router pada file app.route.ts(atau apapun penamaan file anda untuk membuat router).  Namun dengan augury ini kalau kita hanya ingin melihat router pathnya kita dapat memanfaatkan fitur router tree ini. Contohnya adalah seperti berikut ini

sangat menarik bukan bagaimana augury menvisualisasikan router yang ada pada project angular. Kita tahu dari gambar diatas bahwa app component tersebut hanya memiliki dua router. Yaitu pertama mengarah ke ComListNoteComponent dan yang kedua mengarah ke FormNoteComponent. Kita juga dapat melihat endpoint beserta parameter yang mengarah ke komponen tersebut

3. NgModules

terahir kita dapat melihat modul-modul yang digunakan pada NgModule secara detail. Data tersebut akan ditampilkan dalam bentuk tabel sehingga modul-modul tersebut akan dipisahkan berdasarkan kategorinnya.

Kesimpulan

Itulah beberapa fitur yang disediakan oleh angular augury. Tentunnya sangat menarik untuk digunakan dan pastinnya membantu kita dalam melakukan debugging. Terkadang melihat kode melelahkan maka dengan data yang divisualisasikan dalam bentuk tree ataupun tabel akan lebih dapat membantu kita melakukan debugging. Sehingga tidak ada alasan untuk menginstall angular augury ini bagi kita developer angular.