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.

Injector graph

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

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

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

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).