Inspektor stron

Układ strony psuje się tylko na telefonie, przycisk nic nie robi, strona H5 zostaje biała — na komputerze wystarczy F12, żeby od razu zobaczyć dlaczego. Na telefonie zwykle zostaje tylko dodawanie alert, przebudowa i ponowne sprawdzanie. Inspektor stron podłącza te same narzędzia deweloperskie wprost do prawdziwej strony na urządzeniu: podłącz kabel, a Elements, Console, Sources, Network i Storage otworzą się na komputerze, a urządzenie przerysuje się natychmiast po zmianie wartości.

Inspektor stron debugujący stronę na Androidzie: po lewej żywy ekran urządzenia, po prawej panel Elements z wyliczonymi stylami

1. Jak to się dzieli z przechwytywaniem pakietów

Potrzebujesz obu, ale odpowiadają na różne pytania:

	Przechwytywanie pakietów	Inspektor stron
Odpowiada na	Co poszło przez sieć	Co zrobiła strona
Pokazuje	Żądania / odpowiedzi, nagłówki, treść (odszyfrowaną)	Drzewo DOM, wyliczone style, błędy konsoli, stosy wywołań, ciasteczka i pamięć
Typowe pytanie	Co zwraca ten endpoint, czy parametry są poprawne	Która linia JavaScriptu wysłała to żądanie, dlaczego ten styl się nie stosuje

Przechwytywanie pokazuje żądanie, ale nigdy tego, kto je wywołał; inspektor stawia breakpoint w Sources i prowadzi wprost do tej linii. Oba narzędzia są w tym samym programie, więc przełączanie się między nimi nic nie kosztuje.

2. Przygotowanie, które robisz raz

Trzy bloki poniżej to warianty: zrób ten, który pasuje do twojego celu, i tylko raz.

Urządzenie iOS

Podłącz kabel, zostaw urządzenie odblokowane, i włącz przełącznik inspektora stron:

Safari: Ustawienia → Safari → Zaawansowane → Inspektor stron
Chrome: Ustawienia Chrome → Ustawienia treści → Inspektor stron

To krok najczęściej pomijany na iOS. Bez niego urządzenie jest wykrywane, ale lista stron zostaje pusta.

Urządzenie Android

Podłącz kabel i włącz debugowanie USB w opcjach programisty. Emulatory Androida zwykle są wykrywane też bez kabla.

Przeglądarka na tym komputerze

Uruchom Chrome lub Edge z --remote-debugging-port=9222, a potem kliknij Odśwież na liście stron.

# macOS
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --remote-debugging-port=9222

# Windows
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

3. Też strona wewnątrz aplikacji? Jeszcze jedno

Jeśli wystarczą ci karty przeglądarki, tę sekcję możesz pominąć.

Twoja własna aplikacja: włącz raz w kodzie.

// Android: wywołaj raz przy starcie Application lub Activity
WebView.setWebContentsDebuggingEnabled(true);

// Od iOS 16.4: uczyń WKWebView możliwym do zbadania
webView.isInspectable = true

Cudza aplikacja albo bez zmian w kodzie: zaznacz „Uwzględniaj też strony w aplikacjach” w oknie dialogowym, a strony uruchomionych aplikacji dołączą do listy. Odznacz i wracasz do samych kart przeglądarki.

	Wymaganie	Uwaga
Android	Urządzenie z rootem	Włącza debugowanie WebView na działających aplikacjach, bez przebudowy
iOS	Tylko aplikacje podpisane deweloperskim certyfikatem	Ograniczenie systemu — aplikacji z App Store nie da się uwzględnić

Tak czy inaczej aplikacja nigdy nie jest przebudowywana, podpisywana ani nic nie jest instalowane na urządzeniu jako pomocnik. Po zakończeniu sesji urządzenie wraca do poprzedniego stanu.

4. Rozpoczęcie debugowania

Po tym każda sesja sprowadza się do tego:

Nowe przechwytywanie → cel (Ten komputer / iOS / Android) → metoda „Inspektor stron” → Odśwież → wybierz stronę → Inspect

Okno dialogowe nowego przechwytywania z wybranym Androidem i metodą Inspektor stron, z listą stron do debugowania po zaznaczeniu „Uwzględniaj też strony w aplikacjach”

Strony są pogrupowane według aplikacji-właściciela, więc strona w aplikacji łatwo odróżnia się od karty przeglądarki.
Kliknięcie Inspect otwiera pełne narzędzia deweloperskie w przeglądarce na komputerze, podłączone do tej strony na tym urządzeniu.
Możesz otworzyć ich dowolnie wiele naraz — jedno okno na stronę, wszystkie działają równolegle.

5. Co widać

Te same panele, których używasz codziennie na komputerze, tyle że skierowane na stronę na telefonie.

Panel	Co pozwala robić
Elements	Żywe drzewo DOM strony z wyliczonymi stylami, dziedziczeniem i modelem pudełkowym. Zmień wartość, a urządzenie od razu się przerysuje — najszybszy sposób na namierzenie błędu układu mobilnego
Console	Każdy błąd i log wygenerowany przez stronę, plus wiersz, w którym możesz uruchomić JavaScript bezpośrednio w tej stronie na tym urządzeniu
Sources	Przeglądaj skrypty i arkusze stylów wczytane przez stronę, ustawiaj breakpointy, śledź stos wywołań i sprawdzaj zmienne dokładnie w momencie, gdy coś idzie nie tak
Network	Każde żądanie strony w postaci wykresu kaskadowego: status, typ, inicjator, rozmiar, czas i stan cache, z sumami żądań, przesłanych bajtów, DOMContentLoaded i pełnego czasu ładowania
Storage	Ciasteczka pogrupowane według domeny z terminem ważności, Secure, HttpOnly i SameSite, obok localStorage i sessionStorage — najszybszy sposób na rozwikłanie błędu stanu logowania

Panel Storage inspektora stron: tabela ciasteczek dla strony otwartej na iPhonie, z wartością, domeną, terminem ważności, Secure, HttpOnly i SameSite

Na Androidzie żywy ekran urządzenia jest odzwierciedlany obok paneli i można na nim klikać oraz przewijać myszą — podgląd i obsługa odbywają się na jednym ekranie, bez przełączania się między telefonem a klawiaturą.

6. Co jest obsługiwane

	Ten komputer	iOS	Android
Karty przeglądarki	✓	✓	✓
Strony w aplikacjach (WebView / WKWebView / H5)	✓	✓	✓
Emulator / symulator	—	✓	✓
Podgląd i edycja elementów oraz stylów na żywo	✓	✓	✓
Konsola, breakpointy i wykonywanie krok po kroku	✓	✓	✓
Kaskada sieciowa dla strony	✓	✓	✓
Cookies / localStorage / sessionStorage	✓	✓	✓
Ekran urządzenia obok paneli	—	—	✓
Bez certyfikatu i bez proxy do skonfigurowania	✓	✓	✓

7. Nic się nie pojawia? Sprawdź to najpierw

Objaw	Zwykle powodem jest	Co zrobić
Urządzenie wykryte, lista stron pusta	Inspektor stron na iOS jest wyłączony albo ekran zablokowany	Wykonaj sekcję 2, włącz, zostaw odblokowane i kliknij Odśwież
Android nie pokazuje stron w aplikacjach	Ten WebView nigdy nie miał włączonego debugowania	Twoja aplikacja: dodaj `setWebContentsDebuggingEnabled(true)`; cudza: zaznacz „Uwzględniaj też strony w aplikacjach” (wymaga roota)
Konkretna aplikacja na iOS nigdy się nie pojawia	Ograniczenie systemu	Buildów z App Store nie da się uwzględnić — tylko aplikacje podpisane deweloperskim certyfikatem
Lokalna przeglądarka nie pokazuje żadnych stron	Uruchomiona bez portu debugowania	Uruchom ponownie Chrome / Edge z `--remote-debugging-port=9222` i kliknij Odśwież
Inspect nic nie robi	Nieobsługiwana przeglądarka	Sesje Android i lokalne wymagają Chrome, Edge lub Brave

8. Kiedy z tego korzystać

Błąd występuje tylko na telefonie: układ, obszary dotyku, renderowanie czcionek.
Strona H5 zostaje biała albo nie działa, a potrzebujesz zobaczyć błędy konsoli i stos wywołań.
Chcesz wiedzieć, który skrypt wysłał żądanie — samo przechwytywanie tego nie powie.
Tropisz problem z logowaniem lub cache i musisz zobaczyć, co naprawdę jest w ciasteczkach i pamięci.
Debugujesz H5 osadzony w aplikacji — zwykłe narzędzia niczego tu nie dają.

Powrót do Pierwszych kroków · Powiązane: Przeglądanie i dekodowanie · Przechwytywanie iOS · Przechwytywanie Android