developer_mode
DevTools - narzędzia deweloperskie
Poznaj najważniejsze narzędzie każdego programisty web - DevTools przeglądarki.
Dzięki nim będziesz mógł analizować strony, debugować kod i rozumieć jak działają aplikacje webowe.
launch
Jak otworzyć DevTools?
🖥️ Windows/Linux
F12
lub
Ctrl + Shift + I
⚠️ Uwaga: Jeśli DevTools się nie otwierają, sprawdź czy nie masz zablokowanych narzędzi deweloperskich w przeglądarce.
tab
Najważniejsze zakładki DevTools
Elements
Struktura HTML i CSS
- Podgląd kodu HTML
- Edycja CSS na żywo
- Inspekcja elementów
Network
Ruch sieciowy
- Wszystkie żądania HTTP
- Kody statusu
- Czas ładowania
Console
Konsola JavaScript
- Błędy JavaScript
- Wykonywanie kodu
- Logi i ostrzeżenia
Application
Dane przeglądarki
- Cookies
- Local Storage
- Service Workers
assignment
Ćwiczenie 1: Analiza ruchu sieciowego
🎯 Cel: Zbadaj jak ładuje się strona internetowa
1
Otwórz stronę Google.com
3
Przejdź do zakładki Network
4
Odśwież stronę (F5)
Zobaczysz listę wszystkich żądań HTTP!
5
Znajdź i sprawdź:
- Główny plik HTML (pierwszy na liście)
- Pliki CSS (style, końcówka .css)
- Pliki JavaScript (końcówka .js)
- Obrazki (.png, .jpg, .svg)
🔍 Co sprawdzać przy każdym żądaniu:
- Status: 200 OK = dobra, 404 = błąd
- Size: jak duży jest plik
- Time: jak długo się ładował
✅ Zadanie do wykonania:
Przetestuj to ćwiczenie na 3 różnych stronach (np. Facebook, GitHub, YouTube) i porównaj ile żądań HTTP wykonuje każda strona.
security
Ćwiczenie 2: Analiza bezpieczeństwa SSL
🎯 Cel: Sprawdź certyfikaty SSL i bezpieczeństwo stron
1
Wejdź na stronę bankową (np. mbank.pl)
2
Kliknij kłódkę 🔒 w pasku adresu
3
Kliknij "Certyfikat jest ważny"
4
Sprawdź informacje o certyfikacie:
- Dla jakiej domeny wydany?
- Kto go wydał? (Certificate Authority)
- Kiedy wygasa?
- Jakie domeny obejmuje?
5
W DevTools → Security sprawdź szczegóły
⚠️ Ostrzeżenie:
Nigdy nie wprowadzaj danych osobowych na stronach bez certyfikatu SSL (bez kłódki)!
cookie
Ćwiczenie 3: Eksploracja cookies
🎯 Cel: Zobacz cookies w akcji
2
Otwórz DevTools → Application → Cookies
3
Wybierz domenę "facebook.com"
4
Przeanalizuj cookies:
- Name: nazwa cookie
- Value: przechowywana wartość
- Domain: dla jakiej domeny
- Expires: kiedy wygasa
- HttpOnly: czy dostępne tylko dla serwera
- Secure: czy tylko przez HTTPS
5
Usuń jakiś cookie i odśwież stronę
Sprawdź co się zmieniło na stronie!
🧪 Bonus: Testuj z naszym serwerem
Użyj naszego serwera testowego do eksperymentów:
search
Ćwiczenie 4: Inspekcja elementów
🎯 Cel: Edytuj stronę na żywo
1
Na dowolnej stronie kliknij prawym przyciskiem na tekst
2
Wybierz "Zbadaj element" (Inspect)
3
W DevTools → Elements kliknij dwukrotnie na tekst
4
Zmień tekst na swój własny
Np. "Hello World from DevTools!" 🎉
5
Naciśnij Enter - tekst zmieni się na stronie!
6
Eksperymentuj z CSS:
- W panelu Styles dodaj:
color: red;
- Lub:
font-size: 48px;
- Lub:
background: yellow;
✅ Gratulacje!
Właśnie zmieniłeś stronę internetową na żywo! To jeden z najważniejszych tricków programistów web.
Uwaga: Zmiany są tylko lokalne - po odświeżeniu strony wszystko wróci do normy.
phone_android
Bonus: Testowanie responsywności
🎯 Cel: Sprawdź jak strona wygląda na telefonie
1
W DevTools kliknij ikonę telefonu 📱
Lub użyj skrótu: Ctrl + Shift + M
2
Wybierz różne urządzenia z listy:
- iPhone 12 Pro
- iPad
- Samsung Galaxy S20
- Lub ustaw własny rozmiar
3
Sprawdź jak różnie wygląda strona na różnych urządzeniach
check_circle
Podsumowanie - co już umiesz!
✅ DevTools Basics:
- Otwieranie DevTools (F12)
- Analiza ruchu sieciowego (Network)
- Sprawdzanie kodów statusu HTTP
- Inspekcja certyfikatów SSL
✅ Praktyczne umiejętności:
- Eksploracja cookies
- Edycja HTML/CSS na żywo
- Testowanie responsywności
- Debugowanie podstawowych problemów