Zdalne debugowanie urządzeń z Androidem

Kayce Basques

Sofia Emelianova

zdalne debugowanie treści na żywo na urządzeniu z Androidem na komputerze z systemem Windows, Mac lub Linux; Z tego samouczka dowiesz się, jak:

• Skonfiguruj urządzenie z Androidem do debugowania zdalnego i wykrywanie go na komputerze programistycznym.
• Sprawdzanie i debugowanie treści na żywo na urządzeniu z Androidem z poziomu komputera deweloperskiego.
• Przesyłanie treści z urządzenia z Androidem do instancji DevTools na komputerze programisty.

Krok 1. Wykryj urządzenie z Androidem

Poniżej przedstawiono proces, który sprawdza się w przypadku większości użytkowników. Więcej informacji znajdziesz w artykule Rozwiązywanie problemów: przeglądarka DevTools nie wykrywa urządzenia z Androidem.

1. Na urządzeniu z Androidem otwórz ekran Opcje programisty. Zobacz Konfigurowanie Opcji programisty na urządzeniu.
2. Wybierz Włącz debugowanie USB.
3. Na komputerze programisty otwórz Chrome.
4. Jedź do: chrome://inspect#devices.

5. Upewnij się, że opcja Wykrywaj urządzenia USB jest włączona.

   

6. Połącz urządzenie z Androidem bezpośrednio z komputerem deweloperskim za pomocą kabla USB.

7. Jeśli łączysz urządzenie po raz pierwszy, będzie ono widoczne jako „Offline” i oczekujące na uwierzytelnianie.

   

   W takim przypadku zaakceptuj prośbę o sesję debugowania na ekranie urządzenia.

8. Jeśli widzisz nazwę modelu urządzenia z Androidem, oznacza to, że DevTools nawiązało połączenie z Twoim urządzeniem.

   

9. Przejdź do kroku 2.

Rozwiązywanie problemów: przeglądarka DevTools nie wykrywa urządzenia z Androidem

Sprawdź, czy sprzęt jest prawidłowo skonfigurowany:

• Jeśli używasz koncentratora USB, spróbuj podłączyć urządzenie z Androidem bezpośrednio do komputera deweloperskiego.
• Spróbuj odłączyć kabel USB łączący urządzenie z Androidem i komputer programistyczny, a następnie podłączyć go ponownie. Zrób to, gdy ekrany Androida i urządzenia do programowania są odblokowane.
• Upewnij się, że kabel USB działa. Na komputerze deweloperskim powinieneś mieć możliwość przeglądania plików na urządzeniu z Androidem.

Sprawdź, czy oprogramowanie jest prawidłowo skonfigurowane:

• Jeśli Twój komputer do tworzenia aplikacji ma system Windows, ręcznie zainstaluj sterowniki USB urządzenia z Androidem. Zapoznaj się z artykułem Instalowanie sterowników USB OEM.
• Niektóre kombinacje urządzeń z systemem Windows i Android (zwłaszcza Samsung) wymagają dodatkowej konfiguracji. Zobacz Narzędzie Chrome DevTools nie wykrywa urządzenia po podłączeniu.

Jeśli na urządzeniu z Androidem nie widzisz prośby Zezwalaj na debugowanie USB, spróbuj wykonać te czynności:

• Odłączanie i ponowne podłączanie kabla USB, gdy na komputerze programiści są widoczne narzędzia dla programistów, a ekran główny Androida jest aktywny. Innymi słowy, czasami ten komunikat nie pojawia się, gdy ekrany Androida lub urządzenia deweloperskiego są zablokowane.
• Zaktualizuj ustawienia wyświetlania na urządzeniu z Androidem i na komputerze deweloperskim, aby nigdy nie przechodziły one w tryb uśpienia.
• Ustawienie trybu USB na urządzeniu z Androidem na PTP. Zapoznaj się z artykułem Galaxy S4 nie wyświetla okna Autoryzuj debugowanie USB.
• Na ekranie Opcje programisty na urządzeniu z Androidem wybierz Cofnij uprawnienia do debugowania przez 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 Narzędziach deweloperskich Chrome – urządzenia nie wykrywają urządzenia po podłączeniu, dodaj odpowiedź na to pytanie na Stack Overflow lub otwórz zgłoszenie w repozytorium developer.chrome.com.

Krok 2. Debuguj treści na urządzeniu z Androidem z poziomu komputera deweloperskiego

1. Otwórz Chrome na urządzeniu z Androidem.

2. W chrome://inspect/#devices na komputerze deweloperskim zobaczysz nazwę modelu urządzenia z Androidem, a zaraz potem jego numer seryjny. Poniżej zobaczysz wersję Chrome, która jest uruchomiona na urządzeniu, z numerem wersji w nawiasach.

   

3. W polu tekstowym Otwórz kartę z adresem URL wpisz adres URL, a potem kliknij Otwórz. Strona otworzy się na nowej karcie na urządzeniu z Androidem.

   

   Każda karta zdalna Chrome ma własną sekcję w chrome://inspect/#devices. W tej sekcji możesz działać na tej karcie. Jeśli są jakieś aplikacje korzystające z WebView, zobaczysz też sekcję dla każdej z nich. W tym przykładzie jest otwarta tylko 1 karta.

4. Obok otwartego adresu URL kliknij Sprawdź. Otworzy się nowe okno Narzędzi deweloperskich.

Wersja Chrome uruchomiona na urządzeniu z Androidem określa wersję Narzędzi dla programistów, która otwiera się na komputerze programisty. Jeśli na urządzeniu z Androidem jest bardzo stara wersja Chrome, instancja DevTools może wyglądać zupełnie inaczej niż zwykle.

Więcej działań: wstrzymanie, skupienie, odświeżenie lub zamknięcie karty

Pod adresem URL znajdziesz menu, w którym możesz wstrzymać, ustawić na pierwszym planie, odświeżyć lub zamknąć kartę.

Sprawdzanie elementów

Otwórz panel Elementy w DevTools i najedź kursorem na element, aby go wyróżnić na widoku urządzenia z Androidem.

Możesz też kliknąć element na ekranie urządzenia z Androidem, aby wybrać go w panelu Elementy. W DevTools kliknij  Select Element (Wybierz element), a następnie kliknij element na ekranie urządzenia z Androidem. Pamiętaj, że po pierwszym dotknięciu funkcja Wybierz element jest wyłączona, więc za każdym razem, gdy chcesz z niej skorzystać, musisz ją ponownie włączyć.

Przesyłanie obrazu z ekranu urządzenia z Androidem na komputer programisty

Kliknij Przełączanie nagrywania ekranu , aby wyświetlić zawartość urządzenia z Androidem w DevTools.

Możesz wchodzić w interakcję z nagraniem ekranu na kilka sposobów:

• Kliknięcia są przekształcane w dotknięcia, które wywołują odpowiednie zdarzenia dotyku na urządzeniu.
• Wciśnięcia klawiszy na komputerze są wysyłane na urządzenie.
• Aby symulować gest ściskania, przy przeciąganiu przytrzymaj klawisz Shift.
• Aby przewijać, użyj trackpada lub kółka myszy albo przesuń wskaźnik myszy.

Kilka uwag na temat nagrań ekranu:

• Nagrania ekranu zawierają tylko zawartość strony. Przeźroczyste obszary nagrania ekranu przedstawiają interfejsy urządzeń, takie jak pasek adresu w Chrome, pasek stanu Androida czy klawiatura Androida.
• Screencasty negatywnie wpływają na liczbę klatek na sekundę. Aby uzyskać dokładniejszy obraz skuteczności strony, wyłącz nagrywanie ekranu podczas pomiaru przewijania lub animacji.
• Jeśli ekran urządzenia z Androidem zostanie zablokowany, zawartość transmisji zniknie. Odblokuj ekran urządzenia z Androidem, aby automatycznie wznowić przesyłanie obrazu.

Ręczne debugowanie za pomocą Android Debug Bridge (adb)

W niektórych rzadkich przypadkach przydatna może być alternatywna metoda debugowania zdalnego. Możesz na przykład połączyć się bezpośrednio z protokołem Chrome DevTools Protocol (CDP) w Chrome na urządzeniu z Androidem.

Aby to zrobić, możesz użyć Android Debug Bridge (adb):

1. Na urządzeniu z Androidem włącz Opcje programisty i Debugowanie USB.
2. Otwórz Chrome na urządzeniu z Androidem.

3. Podłącz urządzenie z Androidem do komputera programistycznego:

   • kabel USB (prosty).
   • Możesz też użyć połączenia Wi-Fi w ADB.

4. Na linii poleceń na komputerze deweloperskim uruchom adb devices -l i sprawdź, czy Twoje urządzenie znajduje się na liście.

5. Przekieruj gniazdo CDP na urządzeniu do lokalnego portu komputera, np. 9222. Aby to zrobić, wpisz:

   adb forward tcp:9222 localabstract:chrome_devtools_remote
   

6. Po połączeniu:

   • http://localhost:9222/json wyświetla cele page.
   • http://localhost:9222/json/version udostępnia punkt końcowy docelowy browser, zgodnie z dokumentacją CDP.
   • chrome://inspect/#devices jest wypełniony, nawet bez zaznaczonego ustawienia Discover USB devices (Wykrywaj urządzenia USB).

Aby rozwiązać problemy, zapoznaj się z tymi artykułami:

• adbdokumentacja

• Opcjonalnie możesz przeczytać starsze przewodniki:

  • remote-debugging-legacy
  • remote-debugging
  • girish.in/…how