Co zrobić, gdy inspektor pokazuje zmiany, których nie ma w pliku?
Najprostszy sposób uniknięcia błędów to konsekwencja. Wybierz jeden typ ścieżek dla całego projektu i trzymaj się go. Zanim opublikujesz zmiany, otwórz dokument z linkiem i sprawdź, czy każdy odnośnik prowadzi do istniejącego pliku. Uwaga na wielkość liter: systemy plików na serwerach często rozróżniają wielkie i małe litery, więc Raport.pdf i raport.pdf to dwie różne nazwy. Podobnie końcowy ukośnik bywa istotny — adres kończący się ukośnikiem wskazuje katalog, a bez niego plik.<br>
<br>
<br>
<br>
Pierwszy typowy problem: plik otwiera się w edytorze kodu zamiast w przeglądarce. Dzieje się tak, gdy edytor przejął skojarzenie rozszerzenia .html. Rozwiązanie jest proste — kliknij plik prawym przyciskiem, wybierz „Otwórz za pomocą", wskaż przeglądarkę i zaznacz opcję ustawienia jej jako domyślnej dla tego typu plików. W systemach z wieloma przeglądarkami warto sprawdzić, która z nich jest aktualnie domyślna, bo dwuklik zawsze korzysta z tego jednego ustawienia.<br>
<br>
<br>
<br>
Uwaga na ścieżki. Gdy plik index.html leży w podfolderze, a odwołania do stylów i skryptów zaczynają się od ukośnika, przeglądarka szuka ich od korzenia dysku, a nie od folderu projektu. Dlatego lokalnie lepiej używać ścieżek relatywnych, takich jak style.css czy skrypt.js, bez początkowego ukośnika. Po wgraniu na serwer można je zmienić, jeśli hosting wymaga innego układu. Sprawdzenie konsoli przeglądarki pod klawiszem F12 pokaże brakujące pliki i błędy wczytywania.<br>
<br>
<br>
<br>
W praktyce inspektor służy do diagnozy, a nie do trwałej pracy. Używaj go, żeby znaleźć źródło konfliktu, sprawdzić, która reguła wygrywa, i przetestować wartość, zanim wpiszesz ją do pliku. Pamiętaj, że zamknięcie narzędzi albo odświeżenie strony kasuje wszystko. Nie traktuj podglądu jako kopii zapasowej i nie zakładaj, że to, co widzisz u siebie, zobaczy ktoś inny. Po zakończeniu eksperymentów wróć do edytora, wprowadź poprawki w arkuszu i sprawdź efekt na czysto wczytanej stronie.<br>
<br>
<br>
<br>
Kliknięcie w dowolny element na stronie podświetla odpowiadający mu węzeł w drzewie. W panelu stylów zobaczysz listę właściwości uporządkowaną według pierwszeństwa. Reguły przekreślone są nadpisane przez inne. Obok wielu z nich widnieje nazwa pliku i numer linii — to informacja, z którego arkusza pochodzi dana deklaracja. Jeśli zamiast tego widzisz określenie elementu lub informację o stylu wbudowanym, znaczy to, że reguła nie została wczytana z pliku i nie zapisze się sama. Zmiany wprowadzone w inspektorze są ulotne: znikną po odświeżeniu strony i nie wpłyną na to, co zobaczą inni.<br>
<br>
<br>
<br>
Typowy błąd to brak cudzysłowów albo użycie polskich znaków w wartościach, choć same wartości są po angielsku i nie zawierają diakrytyki. Inny problem: dwie konkurencyjne deklaracje viewport w jednym dokumencie. Przeglądarka zwykle bierze pierwszą lub ostatnią, zależnie od implementacji, a efekt bywa nieprzewidywalny. Trzymaj się jednej, poprawnej linii i nie duplikuj jej w szablonach.<br>
<br>
<br>
<br>
Kiedy dwuklik nie wystarcza i trzeba lokalnego serwera Drugi przypadek to strona, która wygląda dobrze, ale nie działa. Dzieje się tak przy plikach ładowanych przez JavaScript, na przykład danych z pliku JSON, modułów ES czy zapytań do plików lokalnych. Przeglądarki blokują takie operacje dla adresów file:// ze względów bezpieczeństwa. Objawia się to błędem w konsoli o blokadzie CORS albo pustą sekcją, która powinna być wypełniona danymi. Wtedy dwuklik nie pomoże — potrzebny jest lokalny serwer HTTP. Można go uruchomić jednym poleceniem w terminalu z katalogu projektu, a przeglądarka otworzy stronę pod adresem lokalnym. Dopiero wtedy JavaScript działa tak, jak na prawdziwym hostingu.<br>
<br>
<br>
<br>
Samo dodanie meta viewport nie naprawi jednak strony zbudowanej na sztywnych szerokościach. Jeśli kontener ma wpisane width: 1200px, telefon nadal będzie ściskał treść albo pokaże poziomy suwak. Meta viewport to warunek konieczny, ale nie wystarczający. Dopiero razem z elastycznym układem, procentowymi szerokościami i obrazkami skalującymi się do kontenera daje czytelny efekt na każdym ekranie.<br>
<br>
<br>
<br>
Trzeci częsty błąd to praca na pliku z rozszerzeniem .txt albo bez rozszerzenia. System nie rozpozna go jako strony i otworzy w notatniku. Zmiana nazwy na index.html załatwia sprawę, ale trzeba pamiętać, że sam dwuklik nie odświeży już otwartej karty — po każdej zmianie w kodzie wciśnij F5 lub Ctrl+R, żeby zobaczyć efekt. Przy edycji wielu plików warto trzymać je w jednym folderze i otwierać index.html z tego samego miejsca, inaczej ścieżki relatywne przestaną się zgadzać.<br>
<br>
<br>
<br>
Inspektor elementów otwiera się zwykle klawiszem F12 albo skrótem z klawiszem modyfikującym i literą I. W oknie, które się pojawi, zakładka z elementami pokazuje strukturę dokumentu po prawej, a po drugiej stronie panel ze stylami. To, co widzisz w panelu, to nie zawartość pliku, tylko stan po zastosowaniu wszystkich arkuszy: zewnętrznych, wewnętrznych, reguł użytkownika, a także zmian wprowadzonych wcześniej ręcznie. Dlatego pierwsza rzecz, którą warto zrobić, to zorientować się, czy dana reguła pochodzi z pliku, czy została dodana w przeglądarce.