Plan kursu
Wiedza teoretyczna
Naszą przygodę z tym narzędziem zaczniemy standardowo od części teoretycznej, z której dowiemy się co to jest chrome devtools, jakie posiada dostępne funkcjonalności, jakie ma praktyczne zastosowanie w codziennej pracy programisty i testera oraz jak się je uruchamia w przeglądarce internetowej.
Następnie omówimy funkcjonalność taką jak tryb responsywności oraz przejdziemy do szczegółowych ustawień preferencji Devtoolsów.
Zakładka elementy
Dalej zaczniemy omawianie zakładki Elementy. Jest to pierwsza zakładka z jaką będziemy mieli styczność w DevToolsach. Na tym etapie nauczymy się korzystać z funkcji inspektora, przeanalizujemy sobie DOM czyli nasz ulubiony Document Object Model, będziemy go edytowali oraz usuwali niektóre elementy. A na koniec przejdziemy do weryfikacji i edytowania stylów CSS.
Zakładka konsola
W trzecim module będzie na nas czekała zakładka Konsola oraz jej niesamowite i przydatne funkcję. Pierwszą z nich jest bez wątpienia odczytywanie logów z konsoli. To właśnie tam będziemy mogli znaleźć przeróżne informację o błędach, które są potrzebne deweloperom i testerom w procesie tworzenia oprogramowania. Poza tym zakładka konsola pozwala nam na filtrowanie logów oraz wysyłanie dowolnych skryptów napisanych w języku JavaScript. Takie przykładowe skrypty sobie właśnie stworzymy i zobaczymy jak to działa w praktyce.
Zakładka sieć
Gdy konsola stanie się dla nas w pełni zrozumiała to przejdziemy dalej czyli do nauki zakładki sieć. Jest to bardzo ważna zakładka, ponieważ w niej będą znajdowały się informację o wszystkich pobranych plikach z serwera oraz przeróżnych zapytaniach jakie będziemy wykonywali. W ramach tej zakładki nauczymy się korzystać z funkcji throtlingu czyli emulacji spowalniania sieci w celach testowych, wyszukiwać i odczytywać różne zapytania płynące z serwera oraz konfigurować dodatkowe ustawienia.
Zakładka wydajność
Następną zakładką jest zakładka Wydajność. To tutaj w ramach tego kursu będziemy nagrywać różne zdarzenia na stronie internetowej, które będziemy chcieli poddać analizie pod względem wydajności. Dokładnie omówimy wszystkie funkcje jakie ta zakładka posiada, tak abyśmy bez problemu mogli z niej korzystać w przyszłości.
Zakładka pamięć
W module siódmym przejdziemy do omawiania zakładki Pamięć. Jest to nieoceniona zakładka, gdyż to właśnie w niej będziemy tworzyć różne profile, które będą monitorować dane w aplikacji internetowej związane z pamięcią. Znajdziemy w tej zakładce kluczowe informacje, które posłużą nam np. do monitorowania wycieków pamięci.
Zakładka aplikacja
Dalej będzie czekała na nas zakładka Aplikacja. Omówimy sobie dokładnie interfejs tej zakładki, nauczymy się modyfikować zapisane dane w pamięci lokalnej i w pamięci związanej z sesją, edytować pliki cookies oraz czyścić pamięć podręczną przeglądarki. Dodatkowo powiemy sobie dlaczego jest to tak istotne w codziennej pracy przy tworzeniu nowych wersji oprogramowania.
Zakładka zabezpieczenia
Zakładka zabezpieczenia, będzie stosunkowo łatwą do omówienia zakładką, ale niezwykle istotną. W niej znajdziemy informacje o bezpieczeństwie witryny, czyli o certyfikacie SSL, które dodatkowo w ramach tej zakładki będziemy mogli sobie przejrzeć i sprawdzić szczegóły takie jak data rejestracji i wygaśnięcia certyfikatu czy firma hostująca.
Zakładka lighthouse
Przed ostatnią zakładką jest zakładka Lighthouse. To ona pozwala programistom i testerom na przeprowadzanie audytów strony, które są kluczowe w momencie publikacji oprogramowania na produkcję. Tą zakładkę omówimy szczegółowo. Powiemy sobie jakie audyty możemy przeprowadzać na stronie oraz taki audyt sobie właśnie przeprowadzimy. Więc w tej zakładce będzie się działo!
Zakładka rejestrator
I na zakończenie omówimy zakładkę Rejestrator, która pojawiła się w devtoolsach stosunkowo niedawno. Pozwala ona na nagyrwanie przeróżnych zdarzeń na stronie internetowej i ponowne je odtworzenie za pomocą jednego kliknięcia. Jest to przydatna opcja szczególnie przy tworzeniu skryptów testów automatycznych.
Test teoretyczny
Moduł 12 to ostatni moduł tego kursu i jest on dedykowany właśnie dla Ciebie. To w nim kryje się test teoretyczny, który sprawdzi Twoją wiedzę z tego kursu. Zachęcam Cię abyś go przerobił i sprawdził w jakim stopniu opanowałeś narzędzie Chrome DevTools.
Jeśli agenda kursu brzmi ciekawie, to serdecznie zapraszam Cię na wspólną przygodę w której nauczymy się w praktyce korzystać z narzędzia Chrome DevTools.
