Narzędzia deweloperskie - mapa skarbca faraona
Wyobraź sobie, że jesteś architektem w Starożytnym Egipcie. Przed Tobą plan piramidy - ale nie masz narzędzi, żeby sprawdzić, czy konstrukcja jest stabilna. Tak samo wygląda praca programisty bez narzędzi deweloperskich! Chrome DevTools to Twój "zestaw narzędzi skryby" - pozwala Ci zaglądać pod powierzchnię każdej strony internetowej.
Czym są Chrome DevTools?
Chrome DevTools (Developer Tools) to zestaw narzędzi wbudowanych w przeglądarkę Google Chrome. Możesz je otworzyć na kilka sposobów:
- F12 - najszybszy skrót klawiaturowy
- Ctrl + Shift + I (Windows/Linux) lub Cmd + Option + I (Mac)
- Prawy przycisk myszy na elemencie strony -> Zbadaj (Inspect)
Panel Elements - "Mapa hieroglifów"
Panel Elements to jak mapa hieroglifów na ścianie piramidy - pokazuje całą strukturę HTML strony. Możesz tutaj:
- Podglądać każdy element HTML na stronie
- Edytować tekst, atrybuty i style w czasie rzeczywistym
- Usuwać lub dodawać elementy tymczasowo
- Sprawdzać powiązane style CSS
1<!-- W panelu Elements zobaczysz całą strukturę: -->
2<html>
3 <head>
4 <title>Moja strona</title>
5 </head>
6 <body>
7 <h1>Witaj w piramidzie!</h1>
8 <p class="description">Opis wystawy</p>
9 </body>
10</html>Kliknij na dowolny element, a po prawej stronie zobaczysz jego style CSS. Możesz je edytować na żywo!
Zakładka Console - "Sala obrad faraona"
Konsola to miejsce, gdzie możesz rozmawiać z przeglądarka. Wpisz dowolny kod JavaScript i natychmiast zobaczysz wynik:
1<!-- Przykłady użycia konsoli -->
2<script>
3 // Wyświetl wiadomość
4 console.log("Witaj, faraonie!");
5
6 // Wyświetl ostrzeżenie
7 console.warn("Uwaga! Brak atrybutu alt na obrazie.");
8
9 // Wyświetl błąd
10 console.error("Błąd: Nie znaleziono pliku style.css");
11</script>Konsola pokazuje również błędy JavaScript i ostrzeżenia - to jak strażnik, który informuje Cię o problemach na stronie.
Zakładka Network - "Szlaki karawanowe"
Panel Network pokazuje wszystkie zasoby ładowane przez stronę - jak mapa szlaków handlowych w Egipcie. Zobaczysz tu:
- Pliki HTML, CSS, JS - główne zasoby strony
- Obrazy - grafiki i ikony
- Czcionki - załadowane fonty
- Czas ładowania - jak długo trwa pobranie każdego zasobu
- Status HTTP - czy zasob został poprawnie załadowany (200 = OK, 404 = nie znaleziono)
Lighthouse - "Wyrocznia oceniająca"
Lighthouse to narzędzie do audytu strony. Ocenia Twoją stronę w czterech kategoriach:
- Performance - szybkość ładowania (0-100 punktów)
- Accessibility - dostępność dla osób z niepełnosprawnościami
- Best Practices - dobre praktyki programistyczne
- SEO - optymalizacja pod wyszukiwarki
Aby uruchomić Lighthouse: DevTools -> zakładka Lighthouse -> kliknij Analyze page load.