Zdalne debugowanie urządzeń z Androidem

Kayce Basques
Kayce Basques
Twitter GitHub Usterka
Sofia Emelianowa
Sofia Emelianova
GitHub

Zdalnie debuguj treści na żywo na urządzeniu z Androidem z komputera z systemem Windows, macOS lub Linux. Z tego samouczka dowiesz się, jak:

  • Możesz skonfigurować urządzenie z Androidem do zdalnego debugowania i wykryć je na komputerze, na którym pracujesz.
  • Sprawdzanie i debugowanie treści na żywo na urządzeniu z Androidem z poziomu komputera do programowania.
  • Przesyłaj zawartość screencastów z urządzenia z Androidem do instancji Narzędzi deweloperskich na komputerze programisty.

Diagram debugowania zdalnego

Krok 1. Odkryj swoje urządzenie z Androidem

Poniższy proces sprawdza się dla 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.

  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. Otwórz Chrome na komputerze, na którym tworzysz aplikację.
  4. Otwórz: chrome://inspect#devices.

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

    Pole wyboru Odkryj urządzenia USB jest zaznaczone.

  6. Podłącz urządzenie z Androidem bezpośrednio do komputera, używając kabla USB.

  7. Jeśli podłączysz urządzenie po raz pierwszy, wyświetli się stan „Offline” i oczekuje na uwierzytelnienie.

    Urządzenie offline oczekuje na uwierzytelnienie.

    W takim przypadku zaakceptuj komunikat sesji debugowania na ekranie urządzenia.

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

    Udało się połączyć urządzenie oznaczone nazwą modelu.

  9. Przejdź do kroku 2.

Rozwiązywanie problemów: Narzędzia deweloperskie nie wykrywają urządzenia z Androidem

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

  • Jeśli korzystasz z koncentratora USB, spróbuj podłączyć urządzenie z Androidem bezpośrednio do komputera, z którego korzystasz.
  • Odłącz kabel USB od urządzenia z Androidem od komputera, a następnie podłącz go z powrotem. Zrób to, gdy ekrany Androida i komputera programisty są odblokowane.
  • Upewnij się, że kabel USB działa. Pliki na urządzeniu z Androidem powinny być dostępne z poziomu komputera, z którego korzystasz.

Sprawdź, czy oprogramowanie jest prawidłowo skonfigurowane:

Jeśli na urządzeniu z Androidem nie widzisz komunikatu Zezwalaj na debugowanie USB, wykonaj te czynności:

  • Odłącz kabel USB, a potem podłącz go ponownie, gdy w Narzędziach deweloperskich będzie Twój komputer i wyświetla się ekran główny Androida. Innymi słowy, czasami komunikat nie pojawia się, gdy ekran Androida lub komputera jest zablokowany.
  • zaktualizowanie ustawień wyświetlacza na urządzeniu z Androidem i komputerze do programowania, aby urządzenia nigdy nie były uśpione;
  • Ustawiam tryb USB na Androidzie na PTP. Patrz: Galaxy S4 nie wyświetla okna Autoryzuj debugowania USB.
  • Wybierz Unieważnij autoryzacje debugowania USB na ekranie Opcje programisty na urządzeniu z Androidem, aby przywrócić je do nowego stanu.

Jeśli znajdziesz rozwiązanie, którego nie ma w tej sekcji lub w Narzędziach deweloperskich z Chrome nie wykrywają urządzenia po podłączeniu, dodaj odpowiedź na to pytanie w Stack Overflow lub otwórz problem w repozytorium developers.chrome.com.

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

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

  2. W chrome://inspect/#devices na komputerze, na którym pracujesz, zobaczysz nazwę modelu urządzenia z Androidem i jego numer seryjny. Poniżej znajduje się informacja o wersji Chrome, która działa na urządzeniu, wraz z numerem wersji w nawiasie.

    Wersja Chrome, która działa na urządzeniu.

  3. 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.

    Karta Zdalne wymieniony w sekcji.

    Każda zdalna karta Chrome ma własną sekcję w chrome://inspect/#devices. W tej sekcji możesz korzystać z tej karty. Jeśli istnieją aplikacje korzystające z komponentów WebView, zobaczysz też osobne sekcje dla każdej z nich. W tym przykładzie jest tylko jedna otwarta karta.

  4. Obok otwartego adresu URL kliknij Zbadaj. Otworzy się nowa instancja DevTools.

Nowa instancja DevTools dla karty zdalnej.

Wersja Chrome działająca na urządzeniu z Androidem określa wersję Narzędzi deweloperskich, która zostanie otwarta na komputerze programisty. Jeśli więc na Twoim urządzeniu z Androidem jest bardzo stara wersja Chrome, instancja Narzędzi deweloperskich może wyglądać zupełnie inaczej niż zwykle.

Więcej działań: wstrzymywanie, wyróżnianie, ponowne załadowanie i zamknięcie karty

Pod adresem URL znajduje się menu, które pozwala wstrzymać, zaznaczyć, ponownie załadować lub zamknąć kartę.

Menu do wstrzymywania, ponownego ładowania, ustawiania ostrości lub zamykania karty.

Sprawdzanie elementów

Otwórz panel Elements w instancji Narzędzi deweloperskich i najedź kursorem na element, aby wyróżnić go w widocznym obszarze na urządzeniu z Androidem.

Możesz też kliknąć element na ekranie urządzenia z Androidem, aby wybrać go w panelu Elementy. Kliknij Wybierz element Wybierz element w narzędziu DevTools, a następnie 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ą włączyć za każdym razem, gdy chcesz jej użyć.

Przesyłanie screencastu ekranu Androida na komputer używany przez programistę

Kliknij Toggle Screencast Przełącz screencast, aby wyświetlić zawartość urządzenia z Androidem w instancji Narzędzi deweloperskich.

Ze screencastem możesz korzystać na wiele sposobów:

  • Kliknięcia są przekształcane w kliknięcia, uruchamiając odpowiednie zdarzenia dotknięcia na urządzeniu.
  • Kombinacje klawiszy na komputerze są wysyłane na urządzenie.
  • Aby przeprowadzić symulację gestu ściągnięcia palcami, podczas przeciągania przytrzymaj Shift.
  • Aby przewinąć, użyj trackpada lub kółka myszy albo użyj wskaźnika myszy.

Kilka uwag na temat screencastów:

  • Screencasty wyświetlają tylko treść strony. Przezroczyste części screencasta reprezentują interfejsy urządzeń, np. pasek adresu Chrome, pasek stanu Androida lub klawiaturę Androida.
  • Screencasty negatywnie wpływają na liczbę klatek. Wyłącz funkcję prezentowania ekranu podczas pomiaru przewinięć lub animacji, aby uzyskać dokładniejszy obraz wydajności strony.
  • Jeśli ekran urządzenia z Androidem zostanie zablokowany, zawartość screencasta zniknie. Odblokuj ekran urządzenia z Androidem, aby automatycznie wznowić screencast.

Debuguj ręcznie za pomocą Android Debug Bridge (adb)

W niektórych przypadkach może być przydatna alternatywna metoda debugowania zdalnego. Na przykład możesz chcieć połączyć się bezpośrednio z protokołem Chrome DevTools Protocol (CDP) przeglądarki Chrome na Androida.

Możesz do tego użyć narzędzia Android Debug Bridge (adb):

  1. Pamiętaj, by na urządzeniu z Androidem włączyć Opcje programisty i Debugowanie USB.
  2. Otwórz Chrome na urządzeniu z Androidem.

  3. Połącz urządzenie z Androidem z komputerem za pomocą tych narzędzi:

  4. W wierszu poleceń komputera, którego używasz, uruchom adb devices -l i sprawdź, czy Twoje urządzenie znajduje się na liście.

  5. Przekaż gniazdo CDP urządzenia do lokalnego portu, na przykład 9222. Aby to zrobić, wpisz:

    adb forward tcp:9222 localabstract:chrome_devtools_remote

  6. Po nawiązaniu połączenia:

    • http://localhost:9222/json zawiera listę Twoich wartości docelowych (page).
    • http://localhost:9222/json/version ujawnia docelowy punkt końcowy browser, jak wskazuje dokumentacja CDP.
    • Pole chrome://inspect/#devices jest wypełniane, nawet jeśli ustawienie Odkrywaj urządzenia USB nie jest zaznaczone.

Informacje o rozwiązywaniu problemów znajdziesz tutaj: