Wróć do strony głównej

ANGULAR 2 Augury – debugging aplikacji

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:

AUGURY KITCHEN SINK DEMP APP

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.

Angular Augury - component tree

 

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.

Angular Augury - router tree

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.

Injector

 

Możemy również manipulować wartościami Input oraz Output komponentu, a kliknięcie (View Source), przeniesie nas do klasy danego komponentu.

Input oraz Output 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.

O autorze

Tomasz Nastały

JavaScript Developer, entuzjasta frameworka Angular oraz TypeScripta. Na co dzień lubię dzielić się wiedzą poprzez prowadzenie zajęć w jednym z trójmiejskich bootcampów i nagrywaniem kursów z Angulara.

Zapisz się do naszego newslettera. Bądź na bieżąco z najnowszymi trendami, poradami, meetupami i stań się częścią społeczności Angulara w Polsce. Rynek pracy docenia członków społeczności.

Jeden komentarz

  1. Pingback: ANGULAR 2 INJECTOR TREE - jak działają serwisy - Angular.love

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *