Testowanie i debugowanie stron internetowych i aplikacji internetowych na urządzeniach mobilnych może być trudne. Przeglądarki na telefonach i tabletach często nie mają wbudowanych debugerów, a emulowanie urządzeń mobilnych nigdy nie jest tak dokładne, jak chcesz. Aby debugować witryny mobilne na Androidzie, wersja desktopowa Chrome zapewnia rozwiązanie ze zdalnym debugowaniem.,
Ten artykuł pokaże Ci, jak używać zdalnego debugowania w Chrome z komputera. Możesz użyć jednego z popularnych systemów operacyjnych na pulpicie, takich jak Windows, macOS lub Linux.
jak debugować Chrome Androida
Jeśli uważasz, że możesz mieć błąd w mobilnej stronie internetowej lub natywnej aplikacji na Androida, ale nie możesz go dokładnie przypiąć, Raygun obsługuje raportowanie awarii JavaScript, a także raportowanie awarii Androida. Możesz skorzystać z bezpłatnego 14-dniowego okresu próbnego tutaj.
Konfiguracja
zanim wykonasz zdalne debugowanie, musisz skonfigurować komputer, aby mógł rozpoznać urządzenie z Androidem., Oznacza to, że Debugger Chrome może rozpoznać i dołączyć do telefonu. Zaczniesz od ustawienia niektórych opcji w telefonie.
Ustawienia telefonu
Otwórz aplikację Ustawienia w telefonie. Musisz włączyć opcje programistyczne, jeśli jeszcze tego nie zrobiłeś. Aby to zrobić, przejdź do menu „o telefonie”, które znajduje się w menu systemowym na nowoczesnych urządzeniach z Androidem. Gdy już tam będziesz, przewiń do dołu i dotknij „numer kompilacji” siedem razy. Teraz wróć do poprzedniego ekranu lub do menu „System” w aplikacji Ustawienia., Tam znajdziesz teraz nowy element menu o nazwie „Opcje programisty” u dołu.
gdy znajdziesz się w opcjach programistycznych, włącz je w telefonie, klikając przełącznik u góry strony. Gdy przełącznik mówi „On”, przewiń trochę w dół i włącz „debugowanie USB”. Pozwoli to na debugowanie urządzenia za pomocą kabla USB.
Konfiguracja komputera (za pomocą debugowania USB Androida)
instalacja sterownika
to wszystko, co możemy zrobić przez telefon, na razie, więc przygotujmy nasz komputer., Kroki do podjęcia są nieco inne na każdym z dużych systemów operacyjnych.
Jeśli używasz systemu Windows, pierwszą rzeczą, którą musisz zrobić, to zainstalować sterowniki USB dla swojego urządzenia. Witryna Android Studio zawiera listę miejsc, w których można znaleźć sterowniki, a także instrukcje dotyczące instalacji sterowników na komputerze. Niektórzy producenci dostarczają linki do pliku sterownika. Inni po prostu prowadzą do strony pomocy technicznej, w takim przypadku musisz trochę przeszukiwać, aby znaleźć sterowniki dla swojego urządzenia.,
w przypadku, gdy na twoim komputerze działa system macOS lub Linux, nie musisz instalować sterowników. Użytkownicy komputerów Mac są w rzeczywistości gotowi do pracy. Jeśli twój komputer działa pod Linuksem, wymagane są dalsze kroki konfiguracji. Musisz upewnić się, że Twoje konto użytkownika należy do określonej grupy i musisz zainstalować pakiet z tak zwanymi „regułami udev”. Są to konfiguracje, które sprawiają, że niektóre urządzenia USB są znane Twojemu komputerowi z Linuksem. Jeśli interesuje cię więcej szczegółów, jakiś czas temu napisałem dedykowany artykuł na temat konfiguracji Linuksa dla ADB.,
zainstaluj Android Debug Bridge (ADB)
Po zainstalowaniu sterowników lub reguł udev będziesz również potrzebować ADB, który zapewnia interfejs do rozmowy z urządzeniem mobilnym. ADB i inne narzędzia platformy Android są dostarczane z Android Studio, ale można je również pobrać osobno.
korzystaj z wbudowanego zestawu Android SDK Android Studio lub oficjalnego pakietu narzędzi platformy od Google. Pakiety platform tools są po prostu .zip-pliki zawierające folder platform-tools., Po rozpakowaniu plików znajdziesz tam pliki binarne takie jak adb.exe (Windows) lub adb (macOS i Linux). Następnie można je wykonać w razie potrzeby z wybranego okna powłoki lub terminala.
Jeśli korzystasz z systemu Windows i chcesz mieć najbardziej minimalną wersję ADB bez żadnego puchu, zajrzyj na forum XDA; przewiń w dół do nagłówka pliki do pobrania i kliknij pierwszy link w tej sekcji.
Po pobraniu uruchom go, aby zainstalować ADB., Po zainstalowaniu musisz przejść do folderu, w którym został zainstalowany (C:\Program Files(x86)\Minimal ADB and Fastboot domyślnie) i kliknąć dwukrotnie cmd-here.exe. Spowoduje to otwarcie okna wiersza polecenia w tym folderze.
używając jednej z technik, w oknie powłoki wpiszadb start-server aby uruchomić serwer ADB.
Uwaga: serwer ADB musi być uruchomiony w każdej chwili, gdy chcesz debugować. Po ponownym uruchomieniu komputera serwer nie będzie działał automatycznie. Nie zaleca się uruchamiania ADB jako stałej usługi w tle.,
ostatnią rzeczą, jaką musimy zrobić, aby skonfigurować komputer, jest włączenie zdalnego debugowania w narzędziach programistycznych Chrome. Aby to zrobić, otwórz Chrome na komputerze i przejdź do ustawień DevTools w chrome://inspect/#devices
aby debugować strony internetowe w Androidzie, upewnij się, że zaznaczono opcję „Discover USB devices”. Sugerowałbym również, aby ta sekcja narzędzi programistycznych była otwarta na karcie, ponieważ wkrótce będziemy jej potrzebować.
Nawiązywanie połączenia
to tyle, ile można uzyskać z każdym urządzeniem na własną rękę., Aby debugować strony internetowe w systemie Android na urządzeniu, musimy je połączyć. Jeśli jeszcze tego nie zrobiłeś, podłącz telefon do komputera przez USB. Jeśli nie zrobiłeś tego w ramach instalacji sterownika, na pasku zadań może pojawić się powiadomienie informujące, że komputer konfiguruje nowe urządzenie. Upewnij się, że telefon jest włączony i odblokowany. Jeśli tak, a serwer ADB jest uruchomiony, powinieneś zobaczyć wyskakujące okienko zatytułowane ” Zezwalaj na debugowanie USB?”.
Jeśli nie pojawia się, poszukaj w obszarze powiadomień na urządzeniu z Androidem., Jeśli jest napisane „podłączony jako urządzenie multimedialne”, coś w tym stylu, lub coś o „MTP”, kliknij na to. To powinno doprowadzić cię do ekranu, który pozwala wybrać inny typ połączenia. Dla naszego celu „Kamera (PTP)” jest odpowiednim typem połączenia. Po wybraniu PTP, ” Zezwalaj na debugowanie USB?”wyskakujące okienko powinno się pojawić.
aby uniknąć konieczności radzenia sobie z tym wyskakującym okienkiem za każdym razem, gdy łączysz urządzenie, zaznacz opcję „Zawsze zezwalaj na korzystanie z tego komputera”. Tak czy inaczej, będziesz chciał kliknąć „OK”, co pozwoli Twojemu urządzeniu mobilnemu być widocznym na komputerze w celu debugowania., W tym momencie wróć do zakładki DevTools, na którą patrzyliśmy wcześniej. Jeśli wszystko poszło dobrze, powinieneś zobaczyć swój telefon i wszystkie jego karty Chrome wymienione tam teraz.
Debuguj strony internetowe działające w Chrome na Twoim urządzeniu
teraz nadszedł czas, aby przestać się konfigurować i rozpocząć debugowanie! Nareszcie! Chrome na komputerze powinien wyświetlać listę kart otwartych w przeglądarce Chrome na urządzeniu zdalnym. Jeśli karta, którą chcesz debugować, nie jest aktywną kartą, możesz kliknąć „karta ostrości”, aby uczynić ją aktywną kartą na urządzeniu. Następnie kliknij link „sprawdź”.,
spowoduje to wyświetlenie Inspektora dla tej zakładki. Z tego miejsca możesz korzystać z narzędzi programistycznych Chrome, podobnie jak w przypadku debugowania strony internetowej w przeglądarce desktopowej. Możesz nawet zobaczyć ekran swojego urządzenia w narzędziach programistycznych. Jeśli jeszcze go nie widać lub chcesz go wyłączyć, kliknij ikonę obok ikony inspektora w lewym górnym rogu narzędzi programistycznych.
porady debugowania
Możesz również kontrolować swoje urządzenie za pomocą narzędzi programistycznych., Użyj kursora myszy na ekranie rzuconym tak, jakby kursor był palcem na samym urządzeniu.
- Kliknij, aby dotknąć
- Kliknij i przeciągnij, aby przesunąć
- użyj kółka przewijania, aby przewijać
- przytrzymaj
Shiftpodczas przeciągania w górę, aby powiększyć - przytrzymaj
Shiftpodczas przeciągania w dół, aby pomniejszyć
możesz zauważyć, że na ekranie widoczne są przezroczyste plamy. Są to elementy interfejsu użytkownika z aplikacji Chrome lub z interfejsu systemowego urządzenia., Są one ukryte, ponieważ protokół zdalnego debugowania pozwala na interakcję tylko z samą stroną internetową.
na starszych i mniej wydajnych urządzeniach Obsada ekranu zużywa dużo mocy obliczeniowej urządzenia mobilnego. Możesz zauważyć, że wydajność wydaje się powolna podczas rzucania ekranu. Tak więc, jeśli próbujesz zmierzyć wydajność, wyłącz rzut ekranu i wejdź bezpośrednio w interakcję z urządzeniem mobilnym.
wreszcie, jeśli napotkasz problemy, w których nic się nie dzieje podczas interakcji z urządzeniem, spróbuj zamknąć aplikację Chrome i ponownie ją otworzyć., Musisz ponownie połączyć się ze zdalnym urządzeniem za pomocą ekranu DevTools w narzędziach programistycznych. Jeśli to nie pomoże, przejdź przez tę szybką listę kontrolną:
- odłącz urządzenie i podłącz je z powrotem
- zablokuj telefon i obudź go z powrotem
- Zamknij okno narzędzi programistycznych i otwórz je ponownie.
podsumowanie
debugowanie stron mobilnych w Androidzie Chrome nie musi być trudne. Może to zająć trochę więcej konfiguracji, niż większość z nas chciałaby. Ale po tym, debugowanie mobilnej strony internetowej na urządzeniu staje się znacznie prostsze., Możesz teraz debugować mobilne witryny z Androidem na prawdziwym urządzeniu fizycznym.
czy spędziłeś za dużo czasu na odkrywaniu swojego błędu? Raygun pomaga wykrywać, diagnozować i niszczyć błędy w kodzie JavaScript lub Androida. Inteligentne alerty i grupowanie błędów oznaczają, że nigdy więcej nie przegapisz błędu w aplikacji. Przeczytaj więcej o raportowaniu awarii Androida i raportowaniu awarii JavaScript.
więcej na temat debugowania Androida
Jak zaprojektować błędy w celu lepszego raportowania błędów
zacznij od zdalnego debugowania w Androidzie