Gdy coś nie działa · Koduj z Martinem

Rozdział ratunkowy. Każdy programista czasem utknie – nawet najlepsi. Oto co robić.

Najpierw najważniejsze

Gdy coś nie działa, to nie twoja wina i nic nie zepsułeś. Utknięcie to normalna część programowania. Profesjonaliści walczą z bugami codziennie – różnica w tym, że nauczyli się je spokojnie tropić.

Złota zasada: czytaj uważnie

90% bugów w kodzie to literówki. Komputery są niesamowicie wybredne:

<h1> działa, <hl> nie (jedynka vs małe L)
index.html działa, index. html nie (dodatkowa spacja)
Każdy otwierający tag <p> potrzebuje zamykającego </p>

Porównaj swój kod z kodem w lekcji litera po literze. Zwykle znajdziesz błąd w minutę.

Typowe problemy i jak je naprawić

„Otwiera się jako zwykły tekst, nie strona”

Plik pewnie nie nazywa się index.html, tylko np. index.html.txt. W VS Code usuń plik i utwórz nowy – nazwa musi kończyć się dokładnie na .html.

„Zmieniłem kod, ale na stronie nic się nie zmieniło”

Dwie najczęstsze przyczyny:

Zapomniałeś zapisać – naciśnij Ctrl+S (Cmd+S na Macu). Niezapisany plik ma kropkę obok nazwy w VS Code zamiast X.
Zapomniałeś odświeżyć stronę – naciśnij F5 w przeglądarce.

„Na stronie są dziwne symbole zamiast polskich znaków”

W nagłówku pliku brakuje linii <meta charset="UTF-8">. Dodaj ją między <head> a </head> – mówi przeglądarce, jakiego zestawu znaków używasz.

„Obrazek się nie pokazuje, jest tylko ikona zepsutego obrazka”

Sprawdź nazwę pliku w kodzie – musi być dokładnie taka sama jak w folderze, łącznie z rozszerzeniem (photo.jpg to nie to samo co photo.JPG ani photo.jpeg).
Obrazek musi być w tym samym folderze co index.html (albo w ścieżce, którą wpisałeś w kodzie, np. images/photo.jpg).

„Nagle połowa strony jest pogrubiona / ogromna / niebieska”

Gdzieś brakuje tagu zamykającego. Na przykład <strong> bez </strong>, więc wszystko zostaje pogrubione do końca. Znajdź, gdzie zaczyna się dziwność, i dodaj brakujący tag.

Gdy nadal utkniesz

Zrób przerwę. Serio. Pięć minut patrzenia w okno i bug często sam się znajdzie. Profesjonaliści też tak robią.
Przeczytaj na głos zepsutą część. Brzmi głupio, ale działa – czytanie na głos pomaga zauważyć to, co oczy pomijają.
Poproś o drugą parę oczu. Rodzic, rodzeństwo, kolega – nie muszą umieć programować, wystarczy porównać twój kod z lekcją.
Zacznij małą część od nowa. Gdy jest za dużo, usuń ostatnią dodaną część, sprawdź, czy strona znowu działa, i dodaj ją z powrotem – tym razem wolniej.

💡

Pamiętaj: każdy bug, który naprawisz, czyni cię lepszym programistą. Debugowanie to nie katorga – to supermoc, którą właśnie budujesz.