Foutopsporing op afstand van Android-apparaten

Kayce Basken
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

Debug live content op een Android-apparaat op afstand vanaf je Windows-, Mac- of Linux-computer. Deze handleiding leert je hoe je dat doet:

  • Configureer je Android-apparaat voor debuggen op afstand en ontdek het vanaf je ontwikkelcomputer.
  • Inspecteer en debug live content op je Android-apparaat vanaf je ontwikkelmachine.
  • Stream de scherminhoud van je Android-apparaat naar een DevTools-instantie op je ontwikkelcomputer.

Diagram voor foutopsporing op afstand

Stap 1: Ontdek je 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 Ontwikkelaarsopties op je Android-apparaat. Zie Ontwikkelaarsopties op het apparaat configureren .
  2. Selecteer 'USB-debugging inschakelen' .
  3. Open Chrome op je ontwikkelcomputer.
  4. Ga naar chrome://inspect#devices .

  5. Zorg ervoor dat Selectievakje. Het detecteren van USB-apparaten is ingeschakeld.

    Het selectievakje 'USB-apparaten detecteren' is ingeschakeld.

  6. Sluit je Android-apparaat rechtstreeks aan op je ontwikkelcomputer met 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 die op het scherm van uw apparaat verschijnt.

  8. Als je de modelnaam van je Android-apparaat ziet, heeft DevTools de verbinding met je apparaat succesvol tot stand gebracht.

    Een succesvol aangesloten apparaat 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 je een USB-hub gebruikt, probeer dan je Android-apparaat rechtstreeks op je ontwikkelcomputer aan te sluiten.
  • Probeer de USB-kabel tussen je Android-apparaat en de ontwikkelcomputer los te koppelen en vervolgens weer aan te sluiten. Doe dit terwijl zowel het scherm van je Android-apparaat als dat van de ontwikkelcomputer ontgrendeld is.
  • Zorg ervoor dat je USB-kabel werkt. Je zou bestanden op je Android-apparaat vanaf je ontwikkelcomputer moeten kunnen bekijken.

Zorg ervoor dat uw software correct is ingesteld:

Als je de melding 'USB-foutopsporing toestaan' niet op je Android-apparaat ziet, probeer dan het volgende:

  • Het loskoppelen en vervolgens opnieuw aansluiten van de USB-kabel terwijl DevTools actief is op je ontwikkelmachine en het startscherm van Android zichtbaar is. Met andere woorden, soms verschijnt de prompt niet wanneer het scherm van je Android-apparaat of ontwikkelmachine vergrendeld is.
  • De weergave-instellingen voor je Android-apparaat en ontwikkelcomputer bijwerken, zodat ze nooit in de slaapstand gaan.
  • De USB-modus van Android instellen op PTP. Zie Galaxy S4 toont het dialoogvenster 'USB-foutopsporing autoriseren' niet .
  • Selecteer 'USB-foutopsporingsmachtigingen intrekken' in het scherm 'Ontwikkelaarsopties' op je Android-apparaat om het terug te zetten naar de oorspronkelijke staat.

Als je een oplossing vindt die niet in dit gedeelte of in Chrome DevTools 'Apparaten detecteren geen apparaat wanneer aangesloten' wordt genoemd, voeg dan een antwoord toe aan die Stack Overflow-vraag of open een issue in de developer.chrome.com-repository !

Stap 2: Debug de inhoud op je Android-apparaat vanaf je ontwikkelcomputer.

  1. Open Chrome op je Android-apparaat.

  2. In chrome://inspect/#devices op je ontwikkelmachine zie je de modelnaam van je Android-apparaat, gevolgd door het serienummer. Daaronder zie je de versie van Chrome die op het apparaat draait, met het versienummer tussen haakjes.

    De versie van Chrome die op het apparaat draait.

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

    Elk extern Chrome-tabblad krijgt een eigen sectie in chrome://inspect/#devices . Vanuit deze sectie kunt u 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 je zojuist hebt geopend. Er wordt een nieuwe DevTools-instantie geopend.

Een nieuwe DevTools-instantie voor het tabblad 'Extern'.

De versie van Chrome die op je Android-apparaat draait, bepaalt welke versie van DevTools op je ontwikkelomgeving wordt geopend. Als je Android-apparaat dus een zeer oude versie van Chrome gebruikt, kan de DevTools-omgeving er heel anders uitzien dan je gewend bent.

Meer acties: pauzeren, focussen, herladen of een tabblad sluiten.

Onder de URL vind je een menu waarmee je een tabblad kunt pauzeren, focussen, herladen of sluiten.

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

Inspecteer elementen

Ga naar het paneel 'Elementen' in je DevTools-instantie en beweeg de muis over een element om het te markeren in het weergavegebied van je Android-apparaat.

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

Deel je Android-scherm via schermcasting met je ontwikkelcomputer.

Klik op Schermopname in-/uitschakelen Schermopname in-/uitschakelen om de inhoud van uw Android-apparaat in uw DevTools-instantie te bekijken.

Je kunt op verschillende manieren met de screencast interageren:

  • Klikken worden omgezet in tikken, waardoor de juiste aanraakgebeurtenissen op het apparaat worden geactiveerd.
  • De toetsaanslagen op uw computer worden naar het apparaat verzonden.
  • Om een ​​knijpbeweging te simuleren, houd je Shift ingedrukt terwijl je sleept.
  • Om te scrollen, gebruik je je trackpad of muiswiel, of veeg je met je muisaanwijzer.

Enkele opmerkingen over screencasts:

  • Screencasts tonen alleen de pagina-inhoud. Transparante gedeeltes van de screencast representeren apparaatinterfaces, zoals de adresbalk van Chrome, de statusbalk van Android of het Android-toetsenbord.
  • Schermopnames hebben een negatieve invloed op de framesnelheid. Schakel schermopnames uit tijdens het meten van scrollbewegingen of animaties om een ​​nauwkeuriger beeld te krijgen van de prestaties van uw pagina.
  • Als het scherm van je Android-apparaat vergrendeld raakt, verdwijnt de inhoud van je schermopname. Ontgrendel het scherm van je Android-apparaat om de schermopname automatisch te hervatten.

Debug handmatig via Android Debug Bridge (adb).

In sommige zeldzame gevallen kan een alternatieve methode voor debuggen op afstand nuttig zijn. U kunt bijvoorbeeld rechtstreeks verbinding maken met het Chrome DevTools Protocol (CDP) van Chrome op Android.

Hiervoor kun je de Android Debug Bridge (adb) gebruiken:

  1. Zorg ervoor dat je de ontwikkelaarsopties en USB-debugging inschakelt op je Android-apparaat.
  2. Open Chrome op je Android-apparaat.

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

  4. Voer in de opdrachtregel van je ontwikkelmachine adb devices -l uit en controleer of je apparaat in de lijst voorkomt.

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

    adb forward tcp:9222 localabstract:chrome_devtools_remote

  6. Zodra de verbinding tot stand is gebracht, ziet u het volgende:

    • http://localhost:9222/json geeft een overzicht van uw page .
    • http://localhost:9222/json/version geeft het doel-eindpunt browser weer, zoals de CDP-documentatie aangeeft.
    • chrome://inspect/#devices wordt gevuld, zelfs als de instelling 'USB-apparaten ontdekken' niet is aangevinkt.

Voor het oplossen van problemen, zie: