Elements: podglądaj i zmieniaj na żywo
Żywe drzewo DOM strony ze stylami wyliczonymi, dziedziczeniem i modelem pudełkowym. Zmieniasz wartość, a urządzenie od razu się przerysowuje — najkrótsza droga do błędu układu na telefonie.
Debuguj strony z telefonu na komputerze
Jak F12 we własnej przeglądarce, tylko na stronach otwartych na prawdziwym iPhonie lub Androidzie: karty przeglądarki albo WebView / H5 wbudowane w aplikację. Podgląd elementów, błędy konsoli, breakpointy w źródłach, żądania sieciowe, ciasteczka i pamięć lokalna.
- Żądania z WebView w aplikacjach
- Żądania przeglądarki
- Ekran urządzenia obok paneli
- Bez przebudowy aplikacji
Debugowanie stron mobilnych bez zwykłego objazdu
Poniżej zwyczajny dzień pracy nad stroną na telefonie. Lewa kolumna to sposób, w jaki zwykle się to robi.
| Co chcesz zrobić | Zwykły sposób | Z inspektorem stron |
|---|---|---|
| Układ sypie się tylko na telefonie | Zgadnąć poprawkę, przebudować, wdrożyć i znów sprawdzić | Zmieniać element i CSS na żywo i patrzeć, jak urządzenie od razu się odświeża |
| Biała strona albo przycisk, który nic nie robi | Na telefonie nie ma konsoli, więc idą alerty i logi | Błędy i logi dokładnie takie, jakie zgłosiła strona |
| Ustalić, która linia JavaScriptu wysłała żądanie | Przechwytywanie pokazuje żądanie, nigdy tego, kto je wywołał | Pułapki i praca krok po kroku w Sources, ze zmiennymi na wierzchu |
| Zobaczyć, co naprawdę jest w ciasteczkach i localStorage | Domyślać się z nagłówków żądania | Pełne tabele — nazwa, wartość, domena, wygaśnięcie, Secure, HttpOnly, SameSite — z możliwością edycji |
| Debugować stronę H5 osadzoną w aplikacji | Ginie w ruchu i nie ma jak się do niej podpiąć | Wypisana pod aplikacją, która ją zawiera: wybierasz i debugujesz jak każdą stronę |
| Po prostu uruchomić zdalne debugowanie | Inne przełączniki na każdej platformie, ukryte wejścia, żmudne kroki | Jedno okno: wybierz urządzenie, wybierz stronę, kliknij Debuguj |
| Czytać ruch i stan strony razem | Narzędzie do przechwytywania i debuger, obok siebie i bez związku | Oba w jednym narzędziu: odszyfrowane żądanie i kod, który je wysłał |
Prawdziwe narzędzia deweloperskie, wycelowane w urządzenie
To nie okrojona przeglądarka podglądu, tylko te same panele co na komputerze — podpięte do strony działającej na telefonie.
Console: błędy i żywy REPL
Każdy błąd i log strony, a do tego wiersz poleceń, który uruchamia twój JavaScript wewnątrz tej strony i na tym urządzeniu. Koniec z debugowaniem przez alert().
Sources: pułapki i krok po kroku
Przeglądaj wczytane skrypty i arkusze stylów, ustawiaj pułapki, idź po stosie wywołań i sprawdzaj zmienne w chwili, gdy coś się psuje.
Network: każde żądanie jako wodospad
Status, typ, inicjator, rozmiar, czasy i stan pamięci podręcznej dla każdego żądania, a do tego sumy: liczba żądań, przesłane bajty, DOMContentLoaded i pełny czas ładowania.
Storage: ciasteczka, local i session
Ciasteczka pogrupowane według domen, z wygaśnięciem, Secure, HttpOnly i SameSite, obok localStorage i sessionStorage — najszybszy sposób na rozplątanie problemu z sesją.
Ekran urządzenia na twoim ekranie
Na Androidzie żywa strona jest odbijana obok paneli i można ją klikać oraz przewijać myszą: podgląd i obsługa na jednym ekranie, bez skakania między telefonem a klawiaturą.
Jak to wygląda
Prawdziwe sesje na prawdziwym telefonie — nic ustawianego.
Co można debugować
Telefony, tablety, emulatory i symulatory, a także przeglądarkę na własnym komputerze.
| 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, pułapki i praca krok po kroku | ✓ | ✓ | ✓ |
| Wodospad sieciowy dla strony | ✓ | ✓ | ✓ |
| Ciasteczka / localStorage / sessionStorage | ✓ | ✓ | ✓ |
| Ekran urządzenia obok paneli | — | — | ✓ |
| Bez certyfikatu i bez konfiguracji proxy | ✓ | ✓ | ✓ |
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 i zostaw urządzenie odblokowane. Dla Safari włącz Ustawienia → Safari → Zaawansowane → Inspektor stron; dla Chrome — Ustawienia Chrome → Ustawienia treści → Inspektor stron.
Urządzenie Android
Podłącz kabel i włącz debugowanie USB w opcjach programisty. Emulatory zwykle znajdują się 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.
Też strona wewnątrz aplikacji? Jeszcze jedno
Pomiń, jeśli wystarczą ci karty przeglądarki. Własna aplikacja: na Androidzie wywołaj raz setWebContentsDebuggingEnabled(true), a od iOS 16.4 ustaw isInspectable = true na WKWebView. Cudza aplikacja albo bez zmian w kodzie: zaznacz „Uwzględniaj też strony w aplikacjach”, a na liście pojawią się strony z uruchomionych aplikacji — na Androidzie potrzebny jest root, a na iOS działa to tylko z aplikacjami podpisanymi deweloperskim certyfikatem.
Potem każda sesja to już tylko to
Nowe przechwytywanie → cel (Ten komputer / iOS / Android) → metoda „Inspektor stron” → Odśwież → wybierz stronę → Inspect. W przeglądarce otworzą się pełne narzędzia deweloperskie; możesz otworzyć ich dowolnie wiele naraz.
Także strony ukryte w aplikacjach
Większość aplikacji jest w połowie natywna, w połowie webowa. To właśnie w osadzonych stronach H5 siedzą najbardziej uciążliwe błędy — i tam zwykłe narzędzia nie pokazują nic.
Pogrupowane według aplikacji
Lista stron jest uporządkowana według aplikacji, więc od razu odróżnisz stronę płatności w aplikacji od karty przeglądarki i podepniesz się dokładnie pod tę właściwą.
Jedno zaznaczenie
«Uwzględnij też strony w aplikacjach» dodaje do listy strony aplikacji otwartych w danej chwili. Odznacz, a zostaną same karty przeglądarki.
Bez śladów
Nie przebudowujesz aplikacji, nic nie podpisujesz i nie instalujesz pomocnika na urządzeniu. Po zakończeniu sesji urządzenie wraca do poprzedniego stanu.
Współgra z przechwytywaniem ruchu
Debuguj tu stronę, a w tym samym narzędziu przechwytuj ruch tej samej aplikacji: odszyfrowany HTTPS, także w aplikacjach z przypiętym certyfikatem lub ignorujących systemowe proxy.
Debugowanie stron mobilnych: częste pytania
Jak zbadać element na telefonie?
Podłącz telefon do komputera przez USB, otwórz Trace Eagle, wybierz Nowe przechwytywanie → iOS lub Android → metoda «Inspektor stron», zaznacz stronę i kliknij Debuguj. Na komputerze otworzy się pełny panel Elements z żywym DOM-em i CSS-em strony na urządzeniu; zmiana wartości od razu zmienia stronę na telefonie.
Czy mogę debugować Android WebView bez modyfikowania aplikacji?
Tak. WebView, które już dopuszczają debugowanie, pojawiają się na liście od razu. Dla aplikacji, które tego nie udostępniają, zaznacz «Uwzględnij też strony w aplikacjach», a dojdą strony aplikacji aktualnie otwartych — to wymaga urządzenia z rootem, ale nic nie jest przebudowywane, przepakowywane ani instalowane na stałe.
Jak debugować stronę na iPhonie albo iPadzie?
Podłącz urządzenie, odblokuj je i włącz Ustawienia → Safari → Zaawansowane → Web Inspector (lub Ustawienia Chrome → Ustawienia treści → Web Inspector). Następnie wybierz urządzenie i stronę w Trace Eagle i kliknij Debuguj: w przeglądarce na komputerze otworzy się pełny inspektor stron z panelami Elements, Console, Sources, Network, Storage, Layers i innymi.
Czy to to samo co chrome://inspect?
Robi to samo i trochę więcej, w jednym oknie. Wbudowana strona zdalnego debugowania obsługuje tylko cele Chromium na Androidzie; tutaj iOS, Android i lokalna przeglądarka są w jednym wyborze, strony są pogrupowane według aplikacji, osadzone H5 dodaje się zaznaczeniem, a obok stoi narzędzie przechwytujące, które odszyfrowuje ruch HTTPS tej samej aplikacji.
Czy potrzebny jest jailbreak albo root?
Do zwykłego debugowania nie: karty przeglądarki i aplikacje, które i tak na to pozwalają, działają na fabrycznym urządzeniu. Root w Androidzie potrzebny jest tylko do dodatkowej opcji dodającej strony z aplikacji innych firm; na iOS to system decyduje, które aplikacje można uwzględnić.
Czy potrzebny jest certyfikat, proxy albo SDK w aplikacji?
Żadne z tych trzech. Zdalne debugowanie stron idzie przez połączenie USB: nie trzeba konfigurować proxy, instalować certyfikatu głównego na urządzeniu ani dokładać SDK czy biblioteki do aplikacji.
Czym to się różni od przechwytywania ruchu?
Przechwytywanie odpowiada, co poszło po sieci: żądanie, odpowiedź, nagłówki i treść, po odszyfrowaniu. Inspektor stron odpowiada, co zrobiła strona: DOM, style, błędy konsoli, który skrypt wysłał żądanie i co już wcześniej było w ciasteczkach i pamięci. Trace Eagle ma jedno i drugie, więc przechodzisz między nimi bez zmiany narzędzia.
W jakiej przeglądarce otwiera się okno debugowania?
Sesje dla Androida i przeglądarki lokalnej otwierają się w Chrome, Edge lub Brave (Trace Eagle uruchomi jedną z nich za ciebie); sesje iOS działają w dowolnej przeglądarce.
Czy działa z emulatorami i symulatorami?
Tak. Emulatory Androida zwykle wykrywane są bez kabla, symulatory iOS uruchomione na tym samym komputerze również — sposób działania jest identyczny jak przy urządzeniu fizycznym.
Czy inspektor stron jest darmowy?
Tak. Jak reszta Trace Eagle jest w pełni darmowy na macOS, Windows i Linux, bez płatnych funkcji.