Podczas naszej codziennej pracy, zdarza się często, że chcemy coś przetestować lub poprawić.
Nanoszenie poprawek w kodzie i każdorazowe odświeżanie jest mało efektywne. W jaki sposób sprawdzić dane wysyłane do innej strony? Czy w łatwy sposób mogę powtórzyć wysyłane żądanie?
Z pomocą przychodzi nam narzędzie deweloperskie.

Czym jest narzędzie deweloperskie ?

Jest to wbudowane narzędzie w większości przeglądarek, które pozwala nam na debugowanie oraz edytowanie niektórych plików, dzięki czemu możemy wprowadzać dowolne poprawki, które później możemy w łatwy sposób przenieść do kodu.

Dostęp do narzędzia deweloperskiego

Za pomocą naciśnięcia przycisku F12
Za pomocą naciśnięcia Ctrl + Shift + I
Po naciśnięciu Chrome menu   a następnie wybraniu Więcej narzędzi > Narzędzia dla programistów

Po kliknięciu prawym przyciskiem myszki i wybraniu Zbadaj na danym elemencie.

Narzędzie deweloperskie:
Składa się ono z podstawowych zakładek:

Elements – miejsce, w którym możemy sprawdzać/dodawać/usuwać/edytować elementy html oraz css. Mamy również podgląd podpiętych eventów.

Console – tutaj możemy wykonywać kod oraz w łatwy sposób go debugować, poprzez umieszczenie w naszym kodzie console.logów

Sources – możliwość debugowania przy pomocy breakpointów oraz podglądu kodu

Network – miejsce, w którym sprawdzimy wysyłane żądania, prędkość ładowania czy też otrzymywane zwrotki.

Perfomance – miejsce do analizowania ładowanych elementów

Memory – możliwość sprawdzenia zużywanej pamięci i wykrywania wycieków

Application – możliwość inspekcji zasobów ładowanych przez stronę

Security – sekcja związana z bezpieczeństwem, możliwość sprawdzenia certyfikatu oraz problemów z nim związanych

Po za tymi zakładkami, widzimy następujące opcje:

  – zbadaj element
Pozwala nam na zaznaczenie dowolnie wybranego elementu, w celu późniejszych modyfikacji:

– możliwość zmiany urządzenia
Pozwala nam na sprawdzenie, jak nasza strona będzie wyglądać oraz zachowywać się na wybranym urządzeniu.

Responsywność natomiast, możemy sprawdzić poprzez zwiększanie/zmniejszanie szerokości ekranu:

 – więcej ustawień, gdzie możemy sobie wybrać sposób „przypinania” paska deweloperskiego, bądź całkowite odłączenie do nowego okna.

Ten post miał Was wprowadzić w podstawy narzędzia deweloperskiego.
Kolejne części będą szczegółowo opisywać najważniejsze funkcjonalności, które przydadzą się w codziennej pracy.
Czy podobało się Wam prezentowanie w postaci filmów, czy wolicie więcej treści? Dajcie znać w komentarzu :).