Angular · BoardGamesNook · Programowanie

Debuggowanie aplikacji Angular – rozszerzenie Augury

Przy okazji robienia kursu dotyczącego Angulara dowiedziałam się, że istnieje ciekawe rozszerzenie do przeglądarki Chrome. Nazywa się ono Augury i jest przeznaczone do debuggowania aplikacji napisanych właśnie w Angularze.

Uruchomienie

  1. Wejdź na stronę rozszerzenia https://augury.angular.io/.
  2. Dodaj rozszerzenie do przeglądarki.
  3. Uruchom swoją aplikację w przeglądarce.
  4. Otwórz narzędzia developerskie (F12).
  5. Otwórz zakładkę Augury.

Component Tree

Główne okno programu. Funkcje, które spodobały mi się najbardziej:

  • możliwość podejrzenia drzewa załadowanej strony,
  • bezpośredni link do pliku komponentu (link View Source),
  • możliwość uruchomienia eventEmittera,
  • edycja wartości Input oraz Output,
  • edycja propercji modelu.

screen.JPG

Injector graph

W tym oknie można podejrzeć hierarchię komponentów i ścieżkę wywołania danego serwisu.

hierarchy

Router Tree

W sekcji Router Tree można zobaczyć zwizualizowane drzewo komponentów. Co ciekawe, po najechaniu myszką na dany komponent, można zobaczyć jego szczegóły (m.in. zdefiniowany route).

ngmodules

NgModules

W tej sekcji są wymienione wszystkie importy/eksporty/providery/deklaracje dla każdego modułu aplikacji.

routertree.JPG

Błąd „This application is not an Angular application”

Po uruchomieniu aplikacji z otwartym rozszerzeniem Augury, wszystko działa jak należy. Jeśli jednak zaloguję się do aplikacji (np. przez facebooka), pojawia mi się powyższy błąd i po przekierowaniu z powrotem do aplikacji, rozszerzenie już nie działa (wyświetla się nadal błąd). Najprawdopodobniej dzieje się tak z powodu przekierowania do zewnętrznego serwisu fb, który nie jest aplikacją angularową. Rozwiązaniem jest otwieranie rozszrzenia dopiero po zalogowaniu lub otworzenie aplikacji w nowym oknie (skopiowanie linka).

Jedna myśl na temat “Debuggowanie aplikacji Angular – rozszerzenie Augury

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Wyloguj /  Zmień )

Zdjęcie na Google+

Komentujesz korzystając z konta Google+. Wyloguj /  Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Wyloguj /  Zmień )

Zdjęcie na Facebooku

Komentujesz korzystając z konta Facebook. Wyloguj /  Zmień )

Connecting to %s