Foutopsporing op afstand van Android-apparaten

Kayce Basken
Sofia Emelianova
Sofia Emelianova
GitHub

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.

Diagram voor foutopsporing op afstand

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 Selectievakje. USB-apparaten detecteren is ingeschakeld.

    Het selectievakje USB-apparaten ontdekken 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.

    Offline apparaat 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.

    Een succesvol verbonden apparaat, aangeduid met een modelnaam.

  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 u de prompt USB-foutopsporing toestaan ​​niet ziet op uw Android-apparaat, probeert u het volgende:

  • 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 de schermen van uw Android- of ontwikkelmachine zijn vergrendeld.
  • De weergave-instellingen voor uw Android-apparaat en ontwikkelmachine bijwerken, zodat ze nooit in de sluimerstand gaan.
  • 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.

    De versie van Chrome die op het apparaat wordt uitgevoerd.

  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.

    Een extern tabblad dat in een sectie wordt vermeld.

    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.

Een nieuw DevTools-exemplaar voor het externe tabblad.

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.

Het menu voor het pauzeren, herladen, scherpstellen of sluiten van een tabblad.

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 Selecteer Element 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 Schakel Screencast in 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:

  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 maakt het doeleindpunt van de browser zichtbaar, zoals aangegeven in de CDP-documentatie .
    • chrome://inspect/#devices is ingevuld, zelfs als de instelling USB-apparaten ontdekken niet is aangevinkt.

Zie voor probleemoplossing: