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. Służą do tego aby ułatwić pracę programiście z projektem. Sprawne opanowanie narzędzi dla programistów bardzo przydaje się przy debugowaniu. Zachęcamy eksperymentować z narzędziami dla programistów i posprawdzać, co można w nich znaleźć i jak zmiany w narzędziach wpływają na wygląd i zachowanie strony.

Pierwszą zakładką, którą omówimy jest Elements lub Inspector widoczna na zrzutach powyżej. 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). Ta zakładka przydaje się do podglądu czy struktura dokumentu HTML jest poprawna, nie posiada błędów i sprawdzeniu jak reguły CSS wpływają na poszczególne elementy dokumentu.

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. Wiele snippetów kodu z rozdziałów poświęconym JavaScriptowi wystarczy wkleić w tym miejscu aby przetestować ich zachowanie.

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. Ta zakładka zawiera nieco bardziej ukierunkowane na pracę z serwerami dane. Z perspektywy webdevelopera istotne jest, że można tu odnaleźć informacje o żądaniach po zasoby (np. pliki) wykorzystywane w projekcie.

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. Zakładka wykorzystywana jest głównie po dogłębnym poznaniu JavaScriptu, bardzo przydatna przy optymalizacji działania kodu.

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 i optymalizację działania.

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. Są to głównie informacje przydatne dla osób pracujących z backendem przydatne w weryfikacji certyfikatów bezpieczeństwa.

Screenshot (495)

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

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 przydatna w celu sprawdzenia strony pod kątem osób z niepełnosprawnościami lub trudnościami. Dzięki tej zakładce strona lub aplikacja może być bardziej przystępna i łatwiejsza w użyciu.

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.

Koniecznie przetestuj narzędzia dla programistów. Wracaj do nich często i badaj zachowanie strony podczas przerabiania lekcji z kursu. Wielu błędów możesz uniknąć czytając komunikaty dostarczane w zakładkach Inspector/Elements, Console or Network. Odpowiednie użycie narzędzi dla programistów bardzo przyspiesza pracę nad projektem.

school Mentoring

Masz pytania lub wątpliwości? Coś jest niejasne? Kliknij tutaj i skontaktuj się z mentorem.


Nasza strona internetowa używa plików cookies (tzw. ciasteczka) w celach statystycznych, reklamowych oraz funkcjonalnych. Dowiedz się więcej jak je wyłączyć. Ta strona jest chroniona przez reCAPTCHA i Google polityka prywatności Google i regulamin Google.

logo

Copyright © 2021 CodeHub.pl