DevTools oraz praca z przeglądarką podczas tworzenia stron internetowych

1. Czym są DevTools?

DevTools (Developer Tools) to zestaw narzędzi wbudowanych w przeglądarki internetowe (np. Chrome, Firefox, Edge, Safari), które wspierają programistów podczas tworzenia, testowania i debugowania stron WWW. Dzięki nim możemy analizować kod HTML, CSS, JavaScript, sieć, wydajność i bezpieczeństwo bezpośrednio w przeglądarce.

2. Jak uruchomić DevTools?

Najczęściej:

  • Chrome / Edge – F12 lub Ctrl + Shift + I (Windows/Linux), Cmd + Option + I (Mac).
  • Firefox – F12 lub Ctrl + Shift + I.
  • Safari – trzeba włączyć w preferencjach „Develop menu”.

DevTools otwiera się jako panel boczny lub dolny przeglądarki.

3. Podstawowe panele w DevTools

a) Elements (Inspektor)

  • Podgląd struktury DOM strony (drzewo HTML).
  • Edycja na żywo HTML i CSS.
  • Podgląd zastosowanych stylów CSS – aktywnych i nadpisanych.
  • Sprawdzanie responsywności (zmiana rozmiaru okna, symulacja urządzeń mobilnych).
  • Narzędzie „select element” – pozwala kliknąć element na stronie i sprawdzić jego kod.

b) Console

  • Wyświetlanie błędów i ostrzeżeń JavaScript.
  • Możliwość uruchamiania kodu JS na żywo.
  • Przydatne komendy:
  • console.log() – logowanie informacji.
  • console.error() – komunikaty błędów.
  • document.querySelector() – wybór elementu z DOM.
  • Debugowanie działania skryptów w czasie rzeczywistym.

c) Sources

  • Podgląd wszystkich plików używanych przez stronę (HTML, CSS, JS, obrazy).
  • Możliwość ustawiania breakpointów – zatrzymywania skryptu w danym miejscu.
  • Debugowanie logiki krok po kroku.
  • Edycja i zapisywanie zmian w plikach lokalnych (workspaces).

d) Network

  • Monitorowanie żądań i odpowiedzi HTTP.
  • Sprawdzanie czasu ładowania zasobów (np. CSS, JS, obrazy).
  • Analiza statusów (200, 404, 500).
  • Podgląd nagłówków (headers) i przesyłanych danych.
  • Weryfikacja wydajności strony i optymalizacja ładowania.

e) Performance

  • Analiza działania strony w czasie rzeczywistym.
  • Sprawdzanie, które elementy spowalniają ładowanie.
  • Profilowanie czasu CPU, pamięci, renderowania.
  • Wykrywanie problemów z płynnością animacji (np. spadki FPS).

f) Application

  • Podgląd pamięci lokalnej w przeglądarce:
  • LocalStorage, SessionStorage, IndexedDB, Cookies.
  • Analiza zasobów używanych offline (Service Workers).
  • Debugowanie Progressive Web Apps (PWA).

g) Security

  • Sprawdzenie certyfikatów SSL/TLS.
  • Weryfikacja, czy strona jest poprawnie zabezpieczona (HTTPS, mixed content).

h) Lighthouse / Audits

  • Automatyczna analiza jakości strony.
  • Raporty dotyczące:
  • wydajności,
  • SEO,
  • dostępności (WCAG),
  • PWA.
  • Sugestie optymalizacji.

4. Zastosowania DevTools w pracy frontend developera

  • Stylizacja – szybkie poprawki CSS, testowanie układu w różnych rozdzielczościach.
  • Debugowanie JavaScript – śledzenie błędów, sprawdzanie zmiennych w konsoli.
  • Testowanie wydajności – sprawdzanie czasów ładowania i obciążenia procesora.
  • Sprawdzanie responsywności – symulacja smartfonów i tabletów.
  • Analiza sieci – optymalizacja zasobów, minimalizacja błędów 404.
  • SEO i dostępność – raporty Lighthouse i analiza semantyki HTML.

5. Dobre praktyki korzystania z DevTools

  • Używaj inspektora elementów zamiast zgadywania błędów w CSS.
  • Regularnie sprawdzaj konsolę – błędy JS często blokują działanie całej strony.
  • Analizuj Network – długie czasy ładowania mogą wynikać np. z dużych obrazów.
  • Testuj w trybie incognito – bez pamięci cache i wtyczek.
  • Porównuj działanie strony w różnych przeglądarkach (Chrome, Firefox, Edge).

6. Praca z przeglądarką – dodatkowe funkcje

  • Tryb mobilny (Device Toolbar) – testowanie wyglądu na różnych urządzeniach.
  • Cache control – wyłączanie pamięci podręcznej w trakcie debugowania.
  • Throttle – symulacja wolnego internetu (np. 3G).
  • Emulacja geolokalizacji – testowanie stron korzystających z lokalizacji użytkownika.
  • Zrzuty ekranu – robienie screenshotów całej strony lub wybranego elementu.

7. Najczęstsze problemy rozwiązywane w DevTools

  • Element „rozjeżdża się” → sprawdzamy w Elements i poprawiamy CSS.
  • Skrypt nie działa → w Console szukamy błędów JS.
  • Strona ładuje się wolno → w Network sprawdzamy, co zajmuje najwięcej czasu.
  • Problem z ciasteczkami/logowaniem → w Application analizujemy Cookies i Storage.
  • Niepoprawne certyfikaty HTTPS → w Security widzimy szczegóły błędu.

8. Podsumowanie

DevTools to niezbędne narzędzie dla każdego twórcy stron internetowych. Pozwala:

  • debugować błędy szybciej niż w kodzie,
  • analizować wydajność i sieć,
  • poprawiać responsywność i wygląd strony,
  • optymalizować SEO i dostępność.
Wróć do spisu lekcji Rozwiąż quiz