Hoe Android Chrome te debuggen vanuit Windows, Linux of Mac

het testen en debuggen van websites en webapps op mobiele apparaten kan een uitdaging zijn. Browsers op telefoons en tablets hebben vaak geen ingebouwde debuggers en het emuleren van mobiele apparaten is nooit zo nauwkeurig als u wilt. Om mobiele websites op Android debuggen, de desktop-versie van Chrome biedt een oplossing met remote debugging.,

Dit artikel laat u zien hoe u foutopsporing op afstand met Chrome vanaf uw computer kunt gebruiken. U kunt een van de gangbare desktopbesturingssystemen gebruiken, zoals Windows, macOS of Linux.

hoe Android Chrome te debuggen

Als u denkt dat u een bug in een mobiele website of een native app op Android hebt, maar het niet helemaal kunt pinnen, ondersteunt Raygun zowel Javascript-Crashrapportage als Android-Crashrapportage. U kunt een gratis proefperiode van 14 dagen hier.

instellen

voordat u een foutopsporing op afstand kunt uitvoeren, moet u uw computer instellen om uw Android-apparaat te kunnen herkennen., Dit betekent dat Chrome debugger te herkennen en te bevestigen aan de telefoon. U begint met het instellen van een aantal opties op de telefoon.

Telefooninstellingen

Open De app instellingen op uw telefoon. Je moet Ontwikkelaarsopties inschakelen als je dat nog niet hebt gedaan. Om dit te doen, ga naar de” Over telefoon ” menu, die zich in het Systeemmenu op moderne Android-apparaten. Zodra je daar bent, scroll naar de bodem en tik op “Build nummer” zeven keer. Ga nu terug naar het vorige scherm of in het menu “systeem” in de app Instellingen., Daar, vindt u nu een nieuw menu-item met de naam “Ontwikkelaarsopties” in de buurt van de bodem.

zodra u zich in Ontwikkelaarsopties bevindt, activeert u deze op uw telefoon door op de schakelaar bovenaan de pagina te klikken. Wanneer de schakelaar zegt “aan”, scroll naar beneden een beetje en inschakelen” USB debugging ” ook. Hiermee kunt u uw apparaat debuggen via een USB-kabelverbinding.

Computer setup (met behulp van Android USB debugging)

Driver installatie

dat is alles wat we kunnen doen op de telefoon, voor nu, dus laten we onze computer klaar te maken., De stappen te ondernemen zijn iets anders op elk van de grote besturingssystemen.

Als u Windows gebruikt, moet u eerst de USB-stuurprogramma ‘ s voor uw apparaat installeren. De Android Studio website heeft een lijst van plaatsen om de stuurprogramma ’s te vinden, samen met een aantal instructies over hoe u de stuurprogramma’ s op uw computer te installeren. Sommige fabrikanten bieden links naar een stuurprogramma bestand. Anderen leiden je gewoon naar een ondersteuningswebsite, in dat geval moet je een beetje zoeken om de stuurprogramma ‘ s voor je apparaat te vinden.,

als uw computer macOS of Linux draait, hoeft u geen stuurprogramma ‘ s te installeren. Mac-gebruikers zijn in feite klaar om te gaan. Als je machine Linux draait, zijn er wat meer installatiestappen nodig. Je moet ervoor zorgen dat je gebruikersaccount tot een bepaalde groep behoort en je moet een pakket installeren met zogenaamde “udev regels”. Het zijn configuraties die bepaalde USB-apparaten bekend te maken aan uw Linux-computer. Als je geïnteresseerd bent in meer details, Ik heb een tijdje geleden een speciaal artikel geschreven over de Linux setup voor ADB.,

Installeer Android Debug Bridge (ADB)

zodra u de stuurprogramma ‘ s of udev-regels hebt geïnstalleerd, hebt u ook ADB nodig, die een interface biedt om met uw mobiele apparaat te praten. ADB en andere Android platform tools worden geleverd met Android Studio, maar je kunt ze ook afzonderlijk downloaden.

het gebruik van Android Studio ‘ s ingebedde Android SDK of het officiële platform tools pakket van Google zijn de favoriete manieren om te gaan. De platform tools pakketten zijn gewoon .zip-bestanden met een map platform-tools., Na het uitpakken van de bestanden vindt u binaries zoals adb.exe (Windows) of adb (macOS en Linux) hierin. U kunt ze vervolgens Uitvoeren als dat nodig is vanuit een shell of terminal venster van uw keuze.

Als u op Windows zit en de meest minimale versie van ADB zonder pluis wilt, kijk dan op de XDA Forums; scroll naar beneden naar downloads en klik op de eerste link in die sectie.

nadat het is gedownload, voer het uit om ADB te installeren., Als het eenmaal is geïnstalleerd, moet u naar de map navigeren waar het is geïnstalleerd (C:\Program Files(x86)\Minimal ADB and Fastboot standaard) en dubbelklikken op cmd-here.exe. Dit opent een opdrachtpromptvenster in die map.

gebruik een van de technieken, typ in uw shell venster adb start-server om de ADB server te starten.

opmerking: de ADB-server moet draaien wanneer u wilt debuggen. Als u de computer opnieuw opstart, wordt de server niet automatisch uitgevoerd. Het is niet aan te raden om ADB als permanente achtergronddienst uit te voeren.,

Het Laatste wat we moeten doen om de computer in te stellen is het inschakelen van foutopsporing op afstand in de Chrome-ontwikkeltools. Om dit te doen, open Chrome op uw computer en ga naar de DevTools-instellingen op chrome://inspect/#devices

om websites in Android te debuggen vanaf hier, zorg ervoor dat “Discover USB devices” is aangevinkt. Ik stel ook voor om dit gedeelte van de ontwikkelaarstools open te houden in een tabblad, omdat we het snel weer nodig hebben.

het maken van de verbinding

dat is alles wat je kunt krijgen met elk apparaat op zijn eigen., Om websites in Android op het apparaat te debuggen, moeten we ze samen aansluiten. Als u dat nog niet hebt gedaan, sluit u uw telefoon aan op uw computer via USB. Als u dit niet hebt gedaan als onderdeel van de installatie van het stuurprogramma, ziet u mogelijk een melding op uw taakbalk die u laat weten dat uw computer uw nieuwe apparaat instelt. Zorg ervoor dat uw telefoon is ingeschakeld en ontgrendeld. Als dat zo is en de ADB-server draait, moet u een pop-up zien met de titel ” toestaan USB-foutopsporing?”.

als het niet wordt weergegeven, kijk dan in uw mededelingengebied op uw Android-apparaat., Als er staat “verbonden als een media-apparaat”, iets dergelijks, of iets over” MTP”, klik erop. Dat brengt je naar een scherm waarmee je een ander verbindingstype kunt kiezen. Voor ons doel is “Camera (PTP)” het geschikte verbindingstype. Zodra u PTP hebt geselecteerd, de ” Toestaan USB debugging?”popup moet komen.

om te voorkomen dat u met deze popup te maken krijgt elke keer dat u uw apparaat aansluit, vinkt u de optie “always allow from this computer” aan. Hoe dan ook, je wilt klikken “OK”, die laat uw mobiele apparaat zichtbaar zijn op uw computer voor het debuggen., Op dit punt, ga terug naar de DevTools tab die we eerder bekeken. Als alles goed ging, moet u uw telefoon en al zijn Chrome tabbladen weergegeven op er nu.

Debug websites die draaien in Chrome op uw apparaat

nu is het tijd om te stoppen met het opzetten en beginnen met debuggen! Eindelijk! Chrome op uw computer moet u een lijst met tabbladen openen in de Chrome-browser op uw externe apparaat. Als het tabblad dat u wilt debuggen is niet het actieve tabblad, U kunt klikken op “focus tab” om het de actieve tab op het apparaat. Klik vervolgens op de” inspecteren ” link.,

Dit opent de inspector voor dat tabblad. Vanaf hier, U kunt Chrome ‘ s developer tools vrij veel als je zou gebruiken als je een webpagina debuggen in uw desktop browser. Je bent zelfs in staat om het scherm van uw apparaat te zien binnen de ontwikkelaarstools. Als het nog niet wordt weergegeven, of als u het wilt uitschakelen, klikt u op het pictogram rechts naast het pictogram inspecteur in de linkerbovenhoek van de ontwikkeltools.

Debugging tips

u kunt uw apparaat ook bedienen vanuit uw ontwikkeltools., Gebruik uw muiscursor op het scherm cast alsof uw cursor een vinger op het apparaat zelf.

• Klik om te tikken
• klik en sleep om te vegen
• gebruik uw scrollwiel om te scrollen
• houd Shift tijdens het slepen naar boven om in te zoomen
• houd Shift tijdens het slepen naar beneden om uit te zoomen

er zijn een aantal transparante vlekken in het scherm cast. Dit zijn UI-elementen van de Chrome-app of van het systeem UI van uw apparaat., Ze zijn verborgen omdat het remote debugging protocol u alleen toestaat om te communiceren met de webpagina zelf.

op oudere en minder krachtige apparaten gebruikt de schermcast veel rekenkracht van uw mobiele apparaat. Je zou kunnen merken dat de prestaties lijkt traag terwijl u screen casting. Dus, als je probeert om de prestaties te meten, uitschakelen van het scherm cast en interactie rechtstreeks met het mobiele apparaat.

Als u tot slot problemen ondervindt waarbij er niets gebeurt wanneer u met uw apparaat communiceert, probeert u de Chrome-app te sluiten en opnieuw te openen., Je moet opnieuw verbinding maken met het externe apparaat via het DevTools scherm in de ontwikkeltools. Als dat niet helpt, ga dan door deze snelle controlelijst:

• koppel het apparaat los en sluit het weer aan in
• Vergrendel uw telefoon en maak het weer wakker
• sluit het venster ontwikkelaarstools en open het opnieuw.

conclusie

debuggen van mobiele websites in Android Chrome hoeft niet moeilijk te zijn. Het kan een beetje meer setup dan de meesten van ons zou willen. Maar, zodra dat is verzorgd, debuggen van een mobiele webpagina op het apparaat wordt veel eenvoudiger., U kunt nu Android mobiele websites debuggen op een echt fysiek apparaat.

heeft u te veel tijd besteed aan het ontdekken van uw bug? Raygun helpt u bij het detecteren, diagnosticeren en vernietigen van fouten in uw JavaScript-of Android-code. Slimme waarschuwingen en foutgroepering betekent dat u nooit meer een bug in uw app mist. Lees meer over Android crash reporting en JavaScript crash reporting.

meer over debuggen Android

hoe architect uw fouten voor een betere Foutrapportage

aan de slag met debuggen op afstand in Android