Bagaimana untuk menyahpepijat aplikasi AngularJS menggunakan pelayar Chrome_AngularJS

Apabila kami membina aplikasi AngularJS, ia sentiasa agak sukar untuk mengakses data dan perkhidmatan tersembunyi dalam aplikasi melalui konsol JavaScript pelayar seperti Chrome, Firefox dan IE. Berikut ialah beberapa teknik mudah yang boleh membantu kami melihat atau mengawal menjalankan aplikasi Angular melalui konsol Javascript, menjadikannya lebih mudah untuk menguji, mengubah suai dan juga mengubah suai aplikasi Angular kami dalam masa nyata:
1: Skop akses

Akses mana-mana skop dalam halaman (walaupun skop terpencil!) dengan baris mudah JS:

> angular.element(targetNode).scope()
-> ChildScope {$id: "005", this: ChildScope, $$listeners: Object, $$listenerCount: Object, $parent: Scope…}

Untuk skop pengasingan:

> angular.element(targetNode).isolateScope()
-> Scope {$id: "009", $$childTail: ChildScope, $$childHead: ChildScope, $$prevSibling: ChildScope, $$nextSibling: Scope…}

Gunakan `targetNode` di sini sebagai rujukan kepada nod HTML. Anda boleh membuat `targetNode` dengan mudah melalui `document.querySelector()`

2: Lihat pokok skop

Kadangkala, kami perlu melihat hierarki skop dalam halaman untuk menyahpepijat aplikasi kami dengan berkesan. AngularJS Batarang adalah apa yang kami perlukan, sambungan penyemak imbas Chrome yang boleh memaparkan hierarki skop semasa dan mempunyai ciri lain yang sangat berguna.

3: Dapatkan sebarang perkhidmatan

Tidak kira di mana ngApp ditakrifkan, kami boleh menggunakan fungsi penyuntik untuk mendapatkan rujukan kepada mana-mana perkhidmatan (jika anda menggunakan kaedah bootstrap sudut, anda boleh merebut $rootElement secara manual):

> angular.element('html').injector().get('MyService')
-> Object {undo: function, redo: function, _pushAction: function, newDocument: function, init: function…}

Kami kemudiannya boleh membuat panggilan ke perkhidmatan, sama seperti kami boleh menyuntik perkhidmatan.

4: Akses arahan penggunaan pengawal

Sesetengah arahan mentakrifkan pengawal dengan beberapa fungsi tambahan (biasanya berkongsi). Untuk mengakses contoh pengawal bagi arahan yang diberikan daripada konsol, hanya gunakan kaedah pengawal():

> angular.element('my-pages').controller()
-> Constructor {}

Pendekatan terakhir adalah lebih maju dan kurang biasa digunakan.
5: Ciri konsol Chrome

Konsol Chrome mempunyai banyak pintasan hebat untuk menyahpepijat apl penyemak imbas. Berikut ialah beberapa amalan terbaik dalam pembangunan Sudut:

• $0-$4: Akses 5 elemen DOM yang dipilih baru-baru ini dalam tetingkap paparan. Ia sangat mudah untuk memilih skop merangkak.
• $(selector) dan $$(selector): Alternatif pantas kepada querySelector() dan querySelectorAll masing-masing

Terima kasih @zgohr kerana menyediakan kaedah ini!

Kesimpulan

Dengan beberapa helah mudah, kami boleh mengakses data dalam mana-mana skop halaman, melihat hierarki skop, menyuntik perkhidmatan dan arahan kawalan.

Jadi lain kali, jika anda ingin mengubah sedikit, periksa kerja anda sendiri atau kawal aplikasi AngularJS melalui konsol, saya harap anda boleh mengingati arahan ini dan mendapati ia berguna seperti yang saya lakukan!