Foutopsporing op afstand van Android-apparaten

Kayce Basques

Sofia Emelianova

Foutopsporing op afstand van live inhoud op een Android-apparaat vanaf uw Windows-, Mac- of Linux-computer. In deze zelfstudie leert u hoe u:

• Stel uw Android-apparaat in voor foutopsporing op afstand en ontdek het vanaf uw ontwikkelmachine.
• Inspecteer en debug live inhoud op uw Android-apparaat vanaf uw ontwikkelmachine.
• Screencast inhoud vanaf uw Android-apparaat naar een DevTools-instantie op uw ontwikkelmachine.

Stap 1: Ontdek uw Android-apparaat

De onderstaande workflow werkt voor de meeste gebruikers. Zie Probleemoplossing: DevTools detecteert het Android-apparaat niet voor meer hulp.

1. Open het scherm Opties voor ontwikkelaars op uw Android. Zie Ontwikkelaarsopties op het apparaat configureren .
2. Selecteer USB-foutopsporing inschakelen .
3. Open Chrome op uw ontwikkelmachine.
4. Ga naar chrome://inspect#devices .

5. Zorg ervoor USB-apparaten detecteren is ingeschakeld.

   

6. Sluit uw Android-apparaat rechtstreeks aan op uw ontwikkelmachine met behulp van een USB-kabel.

7. Als u uw apparaat voor de eerste keer aansluit, wordt het apparaat weergegeven als 'Offline' en in afwachting van authenticatie.

   

   Accepteer in dit geval de prompt voor de foutopsporingssessie op het scherm van uw apparaat.

8. Als u de modelnaam van uw Android-apparaat ziet, heeft DevTools met succes verbinding gemaakt met uw apparaat.

   

9. Ga verder naar stap 2 .

Probleemoplossing: DevTools detecteert het Android-apparaat niet

Zorg ervoor dat uw hardware correct is ingesteld:

• Als u een USB-hub gebruikt, probeer dan uw Android-apparaat rechtstreeks op uw ontwikkelmachine aan te sluiten.
• Probeer de USB-kabel tussen uw Android-apparaat en de ontwikkelmachine los te koppelen en vervolgens weer aan te sluiten. Doe dit terwijl de schermen van uw Android- en ontwikkelmachine ontgrendeld zijn.
• Zorg ervoor dat uw USB-kabel werkt. U zou vanaf uw ontwikkelmachine bestanden op uw Android-apparaat moeten kunnen inspecteren.

Zorg ervoor dat uw software correct is ingesteld:

• Als uw ontwikkelmachine Windows gebruikt, probeer dan handmatig de USB-stuurprogramma's voor uw Android-apparaat te installeren. Zie OEM USB-stuurprogramma's installeren .
• Sommige combinaties van Windows en Android -apparaten (vooral Samsung) vereisen extra instelling. Zie Chrome Devtools -apparaten detecteert geen apparaat wanneer aangesloten .

Als u de USB -foutopsporingsprompt op uw Android -apparaat niet ziet, probeer dan:

• De USB-kabel loskoppelen en vervolgens opnieuw aansluiten terwijl DevTools in focus is op uw ontwikkelmachine en uw Android-startscherm wordt weergegeven. Met andere woorden, soms verschijnt de prompt niet wanneer uw Android- of ontwikkelingsmachine -schermen zijn vergrendeld.
• Het bijwerken van de display -instellingen voor uw Android -apparaat en ontwikkelingsmachine zodat ze nooit gaan slapen.
• De USB-modus van Android instellen op PTP. Zie dat de Galaxy S4 het dialoogvenster Autoriseer USB-foutopsporing niet weergeeft .
• Selecteer USB-foutopsporingsautorisaties intrekken in het scherm Opties voor ontwikkelaars op uw Android-apparaat om het naar een nieuwe staat te resetten.

Als u een oplossing vindt die niet in deze sectie wordt vermeld of in Chrome DevTools Devices detecteert het apparaat niet wanneer het is aangesloten , voeg dan een antwoord toe op die Stack Overflow-vraag of open een probleem in de developer.chrome.com-repository !

Stap 2: Debug inhoud op uw Android-apparaat vanaf uw ontwikkelmachine

1. Open Chrome op uw Android-apparaat.

2. In chrome://inspect/#devices op uw ontwikkelmachine ziet u de modelnaam van uw Android-apparaat, gevolgd door het serienummer. Daaronder ziet u de versie van Chrome die op het apparaat wordt uitgevoerd, met het versienummer tussen haakjes.

   

3. Voer in het tekstvak Openen met URL een URL in en klik vervolgens op Openen . De pagina wordt geopend in een nieuw tabblad op uw Android-apparaat.

   

   Elk extern Chrome-tabblad krijgt een eigen sectie in chrome://inspect/#devices . U kunt vanuit dit gedeelte met dat tabblad communiceren . Als er apps zijn die WebView gebruiken, ziet u ook een sectie voor elk van die apps. In dit voorbeeld is er slechts één tabblad geopend.

4. Klik op Inspecteren naast de URL die u zojuist hebt geopend. Er wordt een nieuw DevTools-exemplaar geopend.

De versie van Chrome die op uw Android-apparaat wordt uitgevoerd, bepaalt welke versie van DevTools wordt geopend op uw ontwikkelmachine. Als uw Android-apparaat dus een zeer oude versie van Chrome gebruikt, kan de DevTools-instantie er heel anders uitzien dan u gewend bent.

Meer acties: een tabblad pauzeren, scherpstellen, opnieuw laden of sluiten

Onder de URL vindt u een menu waarmee u een tabblad kunt pauzeren, focussen, opnieuw laden of sluiten.

Inspecteer elementen

Ga naar het Elementenpaneel van uw DevTools-instantie en beweeg over een element om het te markeren in de viewport van uw Android-apparaat.

U kunt ook op een element op het scherm van uw Android-apparaat tikken om het in het paneel Elementen te selecteren. Klik op Element selecteren op uw DevTools-instantie en tik vervolgens op het element op het scherm van uw Android-apparaat. Houd er rekening mee dat Element selecteren is uitgeschakeld na de eerste aanraking, dus u moet het elke keer opnieuw inschakelen als u deze functie wilt gebruiken.

Screencast uw Android-scherm naar uw ontwikkelmachine

Klik op Screencast wisselen om de inhoud van uw Android-apparaat in uw DevTools-instantie te bekijken.

U kunt op verschillende manieren met de screencast communiceren:

• Klikken worden vertaald in tikken, waardoor de juiste aanraakgebeurtenissen op het apparaat worden geactiveerd.
• Toetsaanslagen op uw computer worden naar het apparaat verzonden.
• Om een ​​knijpbeweging te simuleren, houdt u Shift ingedrukt tijdens het slepen.
• Gebruik uw trackpad of muiswiel om te scrollen, of beweeg met uw muisaanwijzer.

Enkele opmerkingen over screencasts:

• Screencasts geven alleen pagina-inhoud weer. Transparante delen van de screencast vertegenwoordigen apparaatinterfaces, zoals de Chrome-adresbalk, de Android-statusbalk of het Android-toetsenbord.
• Screencasts hebben een negatieve invloed op de framesnelheden. Schakel screencasting uit tijdens het meten van scrolls of animaties om een ​​nauwkeuriger beeld te krijgen van de prestaties van uw pagina.
• Als het scherm van uw Android-apparaat wordt vergrendeld, verdwijnt de inhoud van uw screencast. Ontgrendel het scherm van uw Android-apparaat om de screencast automatisch te hervatten.

Handmatig debuggen via Android Debug Bridge (adb)

In sommige zeldzame gevallen kan een alternatieve methode voor foutopsporing op afstand nuttig zijn. Mogelijk wilt u bijvoorbeeld rechtstreeks verbinding maken met het Chrome DevTools Protocol (CDP) van uw Chrome op Android.

Om dit te doen, kunt u de Android Debug Bridge (adb) gebruiken:

1. Zorg ervoor dat ontwikkelaarsopties en USB-foutopsporing op uw Android-apparaat zijn ingeschakeld.
2. Open Chrome op uw Android-apparaat.

3. Verbind het Android-apparaat met uw ontwikkelmachine via:

   • Een USB-kabel (eenvoudig).
   • U kunt ook een Wi-Fi-verbinding toevoegen .

4. Voer op de opdrachtregel van uw ontwikkelmachine adb devices -l uit en controleer of uw apparaat in de lijst aanwezig is.

5. Stuur de CDP-socket op het apparaat door naar de lokale poort van uw machine, bijvoorbeeld 9222 . Voer hiervoor het volgende uit:

   adb forward tcp:9222 localabstract:chrome_devtools_remote
   

6. Zodra de verbinding succesvol is, ziet u het volgende:

   • http://localhost:9222/json vermeldt uw page .
   • http://localhost:9222/json/version stelt het doeleindpunt browser bloot, zoals aangegeven in de CDP-documentatie .
   • chrome://inspect/#devices is ingevuld, zelfs als de instelling USB-apparaten ontdekken niet is aangevinkt.

Zie voor probleemoplossing:

• adb documentatie

• Optioneel kunt u oudere handleidingen lezen:

  • foutopsporing op afstand-verouderd
  • foutopsporing op afstand
  • girish.in/…hoe