Narzędzia deweloperskie - mapa skarbca faraona

Strona wygląda inaczej, niż zaplanowałeś: nagłówek jest za duży, obrazek się nie wyświetla, a przycisk nie reaguje. Możesz zgadywać, zmieniać kod na ślepo i odświeżać stronę dziesiąty raz - albo zajrzeć do środka. 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.

Czego się nauczysz

W tym module skompletujesz warsztat budowniczego stron. Nauczysz się:

• odczytywać mapę hieroglifów strony w panelu Elements i zmieniać ją na żywo,
• naradzać się z przeglądarką w konsoli i śledzić szlaki karawan w panelu Network,
• pytać wyrocznię Lighthouse o ocenę strony,
• pisać szybciej dzięki Emmetowi i sprawdzać kod walidatorem,
• przygotować ikonę strony i jej podgląd w mediach społecznościowych,
• przyspieszyć ładowanie obrazów i czcionek, a na koniec opublikować stronę w internecie.

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)

Trzeci sposób jest najwygodniejszy przy pracy nad konkretnym elementem: klikasz prawym przyciskiem, pojawia się menu kontekstowe, wybierasz "Zbadaj", a DevTools otwierają się z tym elementem już zaznaczonym. Podobne narzędzia mają też Firefox, Edge i Safari, ale w tym kursie używamy Chrome.

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

Zawartość panelu to drzewo znaczników, którego gałęzie możesz zwijać i rozwijać. Dla prostej strony wygląda ono tak:

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>

To aktualny stan strony, a nie sam plik: jeśli skrypt coś zmienił, zobaczysz tu już nową wersję. Kliknij na dowolny element, a po prawej stronie, w karcie Styles, zobaczysz jego style CSS - możesz je edytować na żywo! Dwuklik na tekście lub atrybucie pozwala go zmienić, a klawisz Delete usuwa zaznaczony element.

Pamiętaj jednak, że wszystkie zmiany znikają po odświeżeniu strony. DevTools to tablica do szkicowania, a nie Twój plik - gotowy pomysł przenieś do edytora kodu.

Zakładka Console - "Sala obrad faraona"

Konsola to miejsce, gdzie możesz rozmawiać z przeglądarką. Wpisz w niej document.title i naciśnij Enter, a przeglądarka odpowie tytułem strony z elementu <title>. Kod strony może też sam pisać do konsoli - te trzy polecenia wyświetlą trzy rodzaje wiadomości:

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>

console.log() wypisuje zwykłą informację, console.warn() ostrzeżenie na żółtym tle, a console.error() błąd na czerwonym. JavaScript poznasz dokładnie w świecie Podróży w Kosmos - na razie wystarczy, że wiesz, gdzie szukać komunikatów.

Konsola pokazuje również błędy JavaScript i ostrzeżenia - to jak strażnik, który informuje Cię o problemach na stronie. Gdy brakuje pliku obrazka albo arkusza stylów, też zobaczysz tu czerwony komunikat z kodem 404.

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 zasób został poprawnie załadowany (200 = OK, 404 = nie znaleziono)

Panel rejestruje ruch tylko wtedy, gdy DevTools są otwarte, więc po wejściu w kartę Network odśwież stronę (F5). Filtry u góry, np. CSS, Img czy Font, zawężą listę do wybranego rodzaju plików, a czerwony wiersz ze statusem 404 to najczęściej literówka w ścieżce do pliku.

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.

Poza wynikami od 0 do 100 dostaniesz listę konkretnych problemów z podpowiedziami, jak je naprawić. Audyt najlepiej uruchamiać w oknie incognito, bo rozszerzenia przeglądarki potrafią zafałszować wynik wydajności. Z Lighthouse skorzystasz jeszcze w lekcji o wydajności, a panel Network przyda się przy przyspieszaniu czcionek i obrazów.

Moja rada: miej DevTools otwarte zawsze, gdy piszesz stronę - F12 szybko stanie się Twoim najczęściej używanym klawiszem.

Praktyka

Otwórz DevTools na stronie z edytora poniżej, zbadaj nagłówek i wpisz w konsoli document.title:

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Chrome DevTools - Praktyka</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <h1>Narzedzia deweloperskie Chrome</h1>
11
12    <section class="panel">
13        <h2>Panel Elements</h2>
14        <p>Kliknij prawym przyciskiem na ten tekst
15           i wybierz <strong>"Zbadaj"</strong> (Inspect).</p>
16        <p>Zobaczysz strukture HTML tej strony.</p>
17        <div class="box" id="demo-box">
18            Sprobuj zmienic moj kolor w DevTools!
19        </div>
20    </section>
21
22    <section class="panel">
23        <h2>Konsola (Console)</h2>
24        <p>Otworz DevTools (F12), przejdz do zakladki Console
25           i wpisz ponizsze komendy:</p>
26        <ul>
27            <li><code>document.title</code> - wyswietli tytul strony</li>
28            <li><code>document.querySelector('h1').textContent</code> - tekst naglowka</li>
29            <li><code>document.getElementById('demo-box').style.background = 'gold'</code></li>
30        </ul>
31    </section>
32
33    <section class="panel">
34        <h2>Zakladka Network</h2>
35        <p>Otworz zakladke Network w DevTools, a nastepnie
36           odswiez strone (F5). Zobaczysz wszystkie zaladowane pliki.</p>
37        <img src="https://placehold.co/400x200/d4af37/1a1a2e?text=Piramida+w+Gizie"
38             alt="Piramida w Gizie" width="400" height="200">
39    </section>
40
41    <section class="panel">
42        <h2>Lighthouse</h2>
43        <p>Przejdz do zakladki Lighthouse i uruchom audyt.
44           Sprawdz wynik w kategoriach:</p>
45        <ul>
46            <li>Performance</li>
47            <li>Accessibility</li>
48            <li>Best Practices</li>
49            <li>SEO</li>
50        </ul>
51    </section>
52</body>
53</html>

Pamiętaj: DevTools to mapa skarbca faraona - zanim zaczniesz kopać na ślepo, zajrzyj, co naprawdę kryje się pod powierzchnią strony.