Debugging i profiling stworzonej przez nas aplikacji jest bardzo istotny. Brzmi to dobrze w teorii, ale jak się za to faktycznie zabrać? Z pomocą przychodzi nam Augury – narzędzie, dzięki któremu możemy zrobić przegląd naszej aplikacji, z poziomu narzędzi deweloperskich.
ANGULAR AUGURY
Angular Augury jest dodatkiem do przeglądarki Chrome, stworzonym przez firmę Rangle oraz Google. Co ciekawsze, cała aplikacja została wykonana w Angularze 2. Pozwala nam min. na przejrzenie drzewa komponentów w wizualnej formie. Świetna sprawa, zwłaszcza jeśli chcemy komuś zaprezentować strukturę naszej aplikacji. Co jeszcze daje nam Augury?
- relacje między komponentami
- detale komponentu
- hierarchię zależności komponentu
- strategię change detection
- uruchamianie eventEmitter lub RxJS Subject events
- możliwość edytowania właściwości komponentu
- przegląd struktury routingu w postaci drzewa
- view source kodu wybranego komponentu
JAK ZACZĄĆ?
Aby rozpocząć przygodę z Augury, musimy go zainstalować jako dodatek do Chrome, link poniżej:
ANGULAR AUGURY CHROME EXTENSION
Jeśli już pobrałeś wtyczkę, skorzystamy z próbnej aplikacji Augury:
Po przejściu na stronę aplikacji, przechodzimy do narzędzi deweloperskich (F12), na końcu zakładek, powinna nam się pojawić nowa zakładka -Augury, oczywiście klikamy. W prawym górnym rogu widzimy 3 kropki, jedna nad drugą, są to ustawienia. Możemy wybrać np ciemno tło, oraz wybrać component rendering mode.
Widzimy również 2 dostępne zakładki – Component tree oraz Router tree. Router tree wygląda bardzo interesująco, widzimy wygenerowane drzewo. Kliknięcie na dany Route, wywołuje pokazanie się zakładki z detalami.
Istnieje również możliwość wyszukiwania konkretnego routa (input search na dole).
Warty uwagi jest injector-tree danego komponentu, widzimy skąd został dostarczony dany serwis, czy z roota aplikacji, czy być może z providers danego komponentu.
Możemy również manipulować wartościami Input oraz Output komponentu, a kliknięcie (View Source), przeniesie nas do klasy danego komponentu.
Istnieje również możliwość sprawdzenia walidacji formularzy, oraz wiele innych funkcjonalności. Polecam przeklikać po kolei każdą zakładkę w demonstracyjnej aplikacji i sprawdzić co się pojawia w Augury.
PODSUMOWANIE
Z pewnością jest to interesujące narzędzie i warto śledzić jego dalszy rozwój. Na zakończenie dodam, że na dzień dzisiejszy ma wsparcie do wersji Angulara 2.2.0. Spróbowałem go odpalić na wersji 2.2.3, poprawnie renderował drzewa komponentów oraz pozostałe funkcjonalności, niestety posypał się na drzewie routingu.
Pingback: ANGULAR 2 INJECTOR TREE - jak działają serwisy - Angular.love