Narzędzia dla programistów

Narzędzia dla programistów

W tym materiale przyjrzymy się wbudowanym w Chrome i Firefox narzędziom dla programistów.

Narzędzia są dostępne z menu programu, pod prawym przyciskiem myszy w menu kontekstowym jako Zbadaj lub Zbadaj element. Dostępne są także pod skrótem F12 na klawiaturze.

Zobaczysz wówczas ekran podobny do następującego:

Screenshot (495)

Screenshot (495)

Narzędzia dla programistów (z ang. developer tools, devtools) składają się z wielu zakładek. Pierwszą zakładką, którą omówimy jest Elements lub Inspector. Widoczna po lewej stronie jest tutaj struktura dokumentu HTML (struktury strony) w formie rozwijanego drzewa. Po prawej znajduje się podgląd zaaplikowanych w danym miejscu reguły CSS (reguły nadające wygląd stronie).

Screenshot (495)

Screenshot (495)

Następna zakładka Console wyświetla informacje i dodatkowe komunikaty z programu napisanego w JavaScript. Można tutaj uruchamiać kod. Firefox udostępnia w tym miejscu wygodną opcję pisania wieloliniowych programów, która będzie przydatna w rozdziale dotyczącym JavaScript.

Screenshot (495)

Screenshot (495)

Screenshot (495)

Zakładka Sources wyświetla materiały wykorzystywane na stronie. Zarówno te lokalne jak i te pochodzące z zewnętrznych źródeł. W Firefox są to dwie zakładki Style Editor i Debugger, które pozwalają poza podglądem edytować kod.

Screenshot (495)

Screenshot (495)

Zakładka Network wyświetla żądania i odpowiedzi od serwerów. W tym miejscu zobaczysz, które żądania zakończyły się pomyślnie a które błędem. Widać tutaj jakiego typu są żądane zasoby, jakie nagłówki protokołu HTTP były wysłane i jakie otrzymano.

Screenshot (495)

Screenshot (495)

Zakładka Performance służy do analizy działania strony lub aplikacji. W tym miejscu można sprawdzić, które fragmenty kodu wymagają poprawy, sprawdzić w jakiej kolejności był wykonywany kod i ile czasu zajęło jego wykonanie.

Screenshot (495)

Screenshot (495)

Zakładka Memory pozwala na sprawdzenie w jaki sposób alokowana jest pamięć aplikacji. Razem z wcześniej wspomnianą zakładką Performance pozwala na debugowanie (usuwanie błędów) z aplikacji/strony.

Screenshot (495)

Screenshot (495)

Zakładka Application w Chrome lub Storage w Firefox wyświetla zapisane w przeglądarce dane, w obrębie strony lub aplikacji. Wyświetlane są tutaj informacje o ciasteczkach, pamięci lokalnej, pamięci sesyjnej i dostępnej z innych Web API.

Screenshot (495)

Screenshot (495)

Zakładka Security w Chrome lub podstrona Network -> Security przy wybranym żądaniu wyświetla informacje o certyfikacie TLS lub jego braku.

Screenshot (495)

Zakładka Audits wyświetla informacje na temat dobrych praktyk zastosowanych na stronie lub w aplikacji.

Screenshot (495)

Inne zakładki mogą pochodzić z zainstalowanych rozszerzeń przeglądarki lub być charakterystyczne dla niej samej. Na przykład w Firefox jest zakładka Accessbility pomaga osobom z niepełnosprawnością lub trudnościami w sprawniejszym korzystaniu ze strony.

Screenshot (495)

Screenshot (495)

Screenshot (495)

Screenshot (495)

Na końcu zarówno w Chrome jak i Firefox znajdują się dodatkowe opcje. W tym opcja otworzenia ekranu ustawień narzędzi programistycznych. W tym miejscu możesz dopasować narzędzia programistyczne do swoich potrzeb, uruchomić dodatkowe opcje jak np. podświetlenie zmian, testowanie sensorów normalnie niedostępnych (żyroskop, akcelerometr), symulowanie pozycji GPS.

school Mentoring

Masz pytania lub wątpliwości? Coś jest niejasne? Napisz na: codehubpl@gmail.com


© 2020 CodeHub.pl