Zdalne debugowanie treści na żywo na urządzeniu z Androidem z komputera z systemem Windows, macOS lub Linux. Z tego samouczka dowiesz się, jak:
- Skonfiguruj urządzenie z Androidem pod kątem zdalnego debugowania i wykryj je na komputerze używanym do programowania.
- Sprawdzaj i debuguj treści na żywo na urządzeniu z Androidem z poziomu komputera używanego do programowania.
- przesyłać treści z urządzenia z Androidem na instancję Narzędzi deweloperskich na komputerze używanym do programowania;
Krok 1. Wykryj urządzenie z Androidem
Poniższy proces działa w przypadku większości użytkowników. Więcej informacji znajdziesz w artykule Rozwiązywanie problemów: Narzędzia deweloperskie nie wykrywają urządzenia z Androidem.
- Otwórz ekran Opcje programisty na urządzeniu z Androidem. Zobacz Konfigurowanie opcji programisty na urządzeniu.
- Wybierz Włącz debugowanie USB.
- Otwórz Chrome na komputerze używanym do programowania.
- Jedź do:
chrome://inspect#devices. Sprawdź, czy opcja
Wykrywaj urządzenia USB jest włączona.
Podłącz urządzenie z Androidem bezpośrednio do komputera używanego do programowania za pomocą kabla USB.
Jeśli łączysz urządzenie po raz pierwszy, będzie ono wyświetlane jako „Offline” i oczekujące na uwierzytelnienie.
W takim przypadku zaakceptuj sesję debugowania na ekranie urządzenia.
Jeśli widzisz nazwę modelu urządzenia z Androidem, oznacza to, że Narzędzia deweloperskie połączyły się z urządzeniem.
Przejdź do kroku 2.
Rozwiązywanie problemów: narzędzia deweloperskie nie wykrywają urządzenia z Androidem
Sprawdź, czy sprzęt jest prawidłowo skonfigurowany:
- Jeśli używasz koncentratora USB, spróbuj zamiast tego podłączyć urządzenie z Androidem bezpośrednio do komputera używanego do programowania.
- Spróbuj odłączyć kabel USB łączący urządzenie z Androidem z komputerem używanym do programowania, a następnie podłączyć go ponownie. Zrób to, gdy ekrany urządzenia z Androidem i komputera używanego do programowania są odblokowane.
- Sprawdź, czy kabel USB działa. Pliki na urządzeniu z Androidem powinny być widoczne na komputerze używanym do programowania.
Sprawdź, czy oprogramowanie jest prawidłowo skonfigurowane:
- Jeśli na komputerze używanym do programowania jest zainstalowany system Windows, spróbuj ręcznie zainstalować sterowniki do USB dla urządzenia z Androidem. Zobacz Instalowanie sterowników USB OEM.
- Niektóre kombinacje urządzeń z Windows i Androidem (zwłaszcza Samsung) wymagają dodatkowej konfiguracji. Zobacz Narzędzia deweloperskie w Chrome nie wykrywają urządzenia po podłączeniu.
Jeśli na urządzeniu z Androidem nie widzisz komunikatu Zezwalaj na debugowanie USB, spróbuj wykonać te czynności:
- Odłącz i ponownie podłącz kabel USB, gdy Narzędzia deweloperskie są na pierwszym planie na komputerze deweloperskim, a na ekranie głównym Androida wyświetla się ekran główny. Innymi słowy, czasami prośba nie pojawia się, gdy ekrany urządzenia z Androidem lub komputera używanego do programowania są zablokowane.
- zaktualizować ustawienia wyświetlania na urządzeniu z Androidem i na komputerze używanym do programowania, aby nigdy nie przechodziły w stan uśpienia;
- Ustawianie trybu USB na Androidzie na PTP. Zobacz Galaxy S4 nie wyświetla okna dialogowego Autoryzuj debugowanie USB.
- Na ekranie Opcje programisty na urządzeniu z Androidem wybierz Cofnij autoryzacje debugowania USB, aby przywrócić urządzenie do stanu początkowego.
Jeśli znajdziesz rozwiązanie, które nie zostało wymienione w tej sekcji ani w artykule Chrome DevTools Devices does not detect device when plugged in (Urządzenia w Narzędziach deweloperskich w Chrome nie wykrywają urządzenia po podłączeniu), dodaj odpowiedź na to pytanie na Stack Overflow lub zgłoś problem w repozytorium developer.chrome.com.
Krok 2. Debugowanie treści na urządzeniu z Androidem z komputera używanego do programowania
- Otwórz Chrome na urządzeniu z Androidem.
W
chrome://inspect/#devicesna komputerze używanym do programowania zobaczysz nazwę modelu urządzenia z Androidem, a następnie jego numer seryjny. Poniżej znajdziesz wersję Chrome działającą na urządzeniu, a numer wersji będzie podany w nawiasach.
W polu tekstowym Otwórz kartę z adresem URL wpisz adres URL, a potem kliknij Otwórz. Strona otworzy się w nowej karcie na urządzeniu z Androidem.
Każda zdalna karta Chrome ma własną sekcję w
chrome://inspect/#devices. W tej sekcji możesz korzystać z tej karty. Jeśli są aplikacje korzystające z WebView, zobaczysz też sekcje dla każdej z nich. W tym przykładzie otwarta jest tylko jedna karta.Obok otwartego adresu URL kliknij Sprawdź. Otworzy się nowa instancja Narzędzi deweloperskich.
Wersja Chrome na urządzeniu z Androidem określa wersję Narzędzi deweloperskich, która zostanie otwarta na komputerze używanym do programowania. Jeśli więc na urządzeniu z Androidem używasz bardzo starej wersji Chrome, instancja Narzędzi deweloperskich może wyglądać zupełnie inaczej niż ta, do której jesteś przyzwyczajony(-a).
Więcej działań: wstrzymywanie, zaznaczanie, ponowne wczytywanie lub zamykanie karty
Pod adresem URL znajdziesz menu, w którym możesz wstrzymać, wyostrzyć, ponownie załadować lub zamknąć kartę.
Sprawdzanie elementów
Otwórz panel Elementy w narzędziach deweloperskich i najedź kursorem na element, aby go wyróżnić w obszarze wyświetlania na urządzeniu z Androidem.
Możesz też kliknąć element na ekranie urządzenia z Androidem, aby wybrać go w panelu Elementy.
W narzędziach deweloperskich kliknij Wybierz element 
, a potem kliknij element na ekranie urządzenia z Androidem. Pamiętaj, że opcja Wybierz element jest wyłączona po pierwszym dotknięciu, więc musisz ją ponownie włączać za każdym razem, gdy chcesz użyć tej funkcji.
Transmitowanie ekranu Androida na komputer deweloperski
Kliknij Toggle Screencast
, aby wyświetlić
zawartość urządzenia z Androidem w instancji Narzędzi deweloperskich.
Z nagraniem ekranu możesz wchodzić w interakcję na kilka sposobów:
- Kliknięcia są przekształcane w dotknięcia, co powoduje wywoływanie odpowiednich zdarzeń dotyku na urządzeniu.
- Naciśnięcia klawiszy na komputerze są wysyłane na urządzenie.
- Aby zasymulować gest uszczypnięcia, przytrzymaj klawisz Shift podczas przeciągania.
- Aby przewijać, użyj trackpada lub kółka myszy albo przeciągnij wskaźnik myszy.
Kilka uwag na temat nagrań ekranu:
- Screencasty wyświetlają tylko zawartość strony. Przezroczyste części nagrania ekranu przedstawiają interfejsy urządzenia, takie jak pasek adresu Chrome, pasek stanu Androida lub klawiatura Androida.
- Nagrania ekranu negatywnie wpływają na liczbę klatek na sekundę. Wyłącz nagrywanie ekranu podczas pomiaru przewijania lub animacji, aby uzyskać dokładniejszy obraz skuteczności strony.
- Jeśli ekran urządzenia z Androidem się zablokuje, zawartość screencastu zniknie. Odblokuj ekran urządzenia z Androidem, aby automatycznie wznowić przesyłanie ekranu.
Ręczne debugowanie za pomocą narzędzia Android Debug Bridge (adb)
W rzadkich przypadkach może się przydać alternatywna metoda zdalnego debugowania. Możesz na przykład chcieć połączyć się bezpośrednio z protokołem narzędzi deweloperskich w Chrome (CDP) w Chrome na Androidzie.
Aby to zrobić, możesz użyć Android Debug Bridge (adb):
- Na urządzeniu z Androidem włącz opcje dla programistów i debugowanie USB.
- Otwórz Chrome na urządzeniu z Androidem.
Połącz urządzenie z Androidem z komputerem używanym do programowania za pomocą:
- kabel USB (prosty sposób);
- Możesz też użyć połączenia Wi-Fi ADB.
W wierszu poleceń na komputerze deweloperskim uruchom polecenie
adb devices -li sprawdź, czy Twoje urządzenie jest na liście.Przekieruj gniazdo CDP na urządzeniu na port lokalny komputera, np.
9222. Aby to zrobić, wpisz:adb forward tcp:9222 localabstract:chrome_devtools_remotePo nawiązaniu połączenia sprawdź, czy:
http://localhost:9222/jsonzawiera listępagecelów.http://localhost:9222/json/versionudostępnia docelowy punkt końcowybrowser, jak wskazuje dokumentacja CDP.chrome://inspect/#devicesjest wypełniona, nawet jeśli ustawienie Wykrywaj urządzenia USB nie jest zaznaczone.
Informacje na temat rozwiązywania problemów znajdziesz w tych artykułach:
adbdokumentacjaOpcjonalnie możesz przeczytać starsze przewodniki: