Testing og feilsøking nettsteder og web-applikasjoner på mobile enheter, kan være utfordrende. Nettlesere på mobiltelefoner og nettbrett ofte ikke har innebygd debuggers, og etterlignet mobile enheter er aldri så nøyaktig som du vil. Feilsøke mobile nettsteder på Android, desktop-versjonen av Chrome gir en løsning med ekstern feilsøking.,
Denne artikkelen vil vise deg hvordan du bruker remote debugging med Chrome fra datamaskinen. Du kan bruke en vanlig desktop operativsystemer som Windows, macOS eller Linux.
Hvordan å debug Android Chrome
Hvis du tror du kan ha en feil i et mobilt nettsted eller en applikasjon på Android, men kan ikke helt pin det ned, Raygun støtter JavaScript crash rapportering samt Android-krasj rapportering. Du kan ta en gratis 14-dagers prøveversjon her.
Sette opp
Før du kan gjøre noen ekstern feilsøking, må du konfigurere datamaskinen til å være i stand til å gjenkjenne din Android-enhet., Dette betyr at Chrome er feilsøkingsprogrammet til å kjenne igjen, og fest den til telefonen. Du vil starte ved å angi noen innstillinger på telefonen.
Telefon-innstillinger
Åpne Innstillinger-appen på telefonen. Du må aktivere Utvikler alternativer hvis du ikke allerede har gjort det. For å gjøre dette, kan du gå til «Om Telefonen» – menyen, som er plassert inne i System-menyen på moderne Android-enheter. Når du er i det, bla til bunnen av siden og trykk på «Build-Nummeret» sju ganger. Nå, gå tilbake til den forrige skjermen, eller inn i «Systemet» – menyen i Innstillinger-appen., Der vil du nå finne et nytt menypunkt som heter «Utvikler alternativer» nær bunnen.
Når du er inne Utvikler alternativer, kan du aktivere dem på telefonen ved å klikke på ikonene på toppen av siden. Når veksle sier «På», kan du bla ned litt og aktiver USB debugging» som godt. Dette vil tillate deg å feilsøke enheten via en USB-kabel.
konfigurasjon av Datamaskin (ved hjelp av Android USB debugging)
Driver installasjon
Det er alt vi kan gjøre på telefonen, for nå, så la oss få datamaskinen vår klar., Fremgangsmåten for å gjennomføre er litt forskjellige på hver av de store operativsystemene.
Hvis du bruker Windows den første tingen du trenger å gjøre er å installere USB-driverne for enheten. Android-Studio-nettstedet har en liste over steder for å finne drivere sammen med noen instruksjoner om hvordan å installere driverne på datamaskinen. Noen produsenter gir lenker til en driver-fil. Andre bare føre deg til et nettsted for støtte, i hvilket tilfelle du trenger for å gjøre en bit av søk for å finne driverne for enheten.,
I tilfelle datamaskinen kjører macOS eller Linux-du trenger ikke å installere drivere. Mac-brukere er faktisk klar til å gå. Hvis maskinen kjører på Linux, det er noen flere oppsett trinnene som kreves. Du må sørge for din brukerkonto som tilhører en bestemt gruppe, og du trenger for å installere en pakke med såkalte «udev-regler». De er konfigurasjoner som gjør enkelte USB-enheter kjent til din Linux-maskin. Hvis du er interessert i mer detaljer, jeg har skrevet en egen artikkel om Linux-oppsett for ADB en stund siden.,
Installer Android Debug Bridge (ADB)
Når du har fått drivere eller udev-regler installert, vil du også trenger ADB, som gir et grensesnitt for å snakke til din mobile enhet. ADB og andre Android-plattformen verktøy kommer med Android Studio, men du kan også laste dem ned separat.
Enten du bruker Android Studio ‘ s innebygde Android-SDK-en eller den offisielle plattform verktøy pakke fra Google er den foretrukne måter å gå. Plattformen verktøy-pakker er like .zip-filer som inneholder en mappe platform-tools., Etter utpakking av filer finner du binærfiler for eksempel adb.exe (Windows) eller adb (macOS og Linux) i det. Du kan deretter utføre dem som nødvendig fra et skall eller terminal vindu av ditt valg.
Hvis du er på Windows, og vil i de fleste minimal versjon av ADB uten lo, ta en titt på XDA-Forumet, rull ned til Nedlastinger overskriften og klikk på den første linken i denne delen.
Etter at den er lastet ned, kan du kjøre den til å installere ADB., Når den er installert, vil du trenger til å navigere til mappen der det var installert (C:\Program Files(x86)\Minimal ADB and Fastboot standard), og dobbeltklikk på cmd-here.exe. Dette vil åpne vinduet ledetekst i denne mappen.
enten ved Hjelp av teknikker, i skallet-vinduet skriver du inn adb start-server for å starte ADB-server.
Merk: ADB server trenger å kjøre når som helst du ønsker å feilsøke. Hvis du starter datamaskinen på nytt, vil serveren ikke kjører automatisk. Det er ikke anbefalt å kjøre ADB som en permanent bakgrunn service.,
Det siste vi trenger å gjøre for å sette opp datamaskinen på, er å aktivere ekstern feilsøking i Chrome-utviklerverktøy. For å gjøre dette, åpner opp Chrome på datamaskinen din og gå til DevTools innstillinger på chrome://inspect/#devices
for Å avslutte nettsteder i Android fra her, sørg for at «Oppdage USB-enheter» er merket av. Jeg vil også foreslå å holde denne delen av verktøy for utviklere åpne i en kategori, fordi vi trenger det igjen snart.
Gjør tilkoblingen
Det er så langt som du kan få med enten enheten på egen hånd., Feilsøke nettsteder i Android på enheten, trenger vi å koble dem sammen. Hvis du ikke allerede har gjort det, koble telefonen til datamaskinen via USB. Hvis du ikke gjør dette som en del av installasjonen av driveren, kan du se en melding på oppgavelinjen slik at du vet at datamaskinen er å sette opp den nye enheten. Kontroller at telefonen er slått på og låst opp. Hvis det er ADB-serveren kjører, bør du se et popup-vindu med tittelen «La USB debugging?».
Hvis den ikke vises, se i systemstatusfeltet på din Android-enhet., Hvis det står «Koblet som en media-enhet», noe som det, eller noe om «MTP», klikk på det. Som skal bringe deg til en side som gir deg mulighet til å velge en annen tilkoblingstype. For vårt formål «Kamera (PTP)» er den riktige tilkoblingen. Når du har valgt PTP, «Tillat USB debugging?»popup skulle komme opp.
for Å unngå å måtte håndtere denne popup-en hver gang du kobler til enheten, merker du av for tillat Alltid fra denne datamaskinen». Uansett, du kommer til å klikke «OK», noe som vil la den mobile enheten være synlig til datamaskinen for debugging., På dette punktet, kan du gå tilbake til DevTools fanen vi så på tidligere. Hvis alt gikk bra, skal du se telefonen og alle dens Chrome kategoriene som er oppført på det nå.
Debug nettsteder som kjører i Chrome-enheten på
Nå er det på tide å slutte å bli satt opp og starte feilsøking! Endelig! Chrome på datamaskinen skal vise deg en liste over faner åpne i Chrome-nettleseren på din eksterne enheten. Hvis den kategorien du vil feilsøke er ikke den aktive fanen, kan du klikke på «fokus fane» for å gjøre det den aktive fanen på enheten. Klikk «inspisere» – linken.,
Dette vil bringe opp inspektør for den kategorien. Fra her, du kan bruke Chrome-utviklerverktøy ganske mye som du ville gjort hvis du var debugging en web-side som pc-nettleser. Du er selv i stand til å se enhetens skjerm i utviklerverktøy. Hvis det ikke allerede vises, eller hvis du ønsker å slå den av, klikk på ikonet til høyre ved siden av inspector-ikonet i øvre venstre hjørne av verktøy for utviklere.
Debugging tips
Du kan også kontrollere enheten fra din utvikler verktøy., Bruk din musen markøren på skjermen kaste så hvis markøren ble en finger på selve enheten.
- Klikk for å trykke
- Klikk og dra for å stryke
- Bruk scroll-hjulet for å bla
- Hold
Shiftmens du drar opp for å zoome inn - Hold
Shiftmens du drar ned for å zoome ut
Du kan merke at det er noen gjennomsiktige flekker på skjermen kastet. Disse er UI-elementer fra Chrome-appen eller fra enhetens system UI., De er skjult fordi ekstern feilsøking protokollen gir deg muligheten til å samhandle med selve websiden.
På eldre og mindre kraftige enheter skjermen kastet bruker mye av din mobile enhet prosessorkraft. Du kan merke ytelse virker sakte mens du er skjermen casting. Dermed, hvis du prøver å måle ytelsen, kan du deaktivere skjermen cast og samhandle direkte med den mobile enheten.
til Slutt, hvis du kjører inn i saker hvor det ikke skjer noe når du samhandler med enheten, kan du prøve å lukke Chrome-appen og åpne den., Du trenger for å koble til ekstern enhet via DevTools skjermen i utviklerverktøy. Hvis det ikke hjelper, kan du gå gjennom denne rask sjekkliste:
- Koble fra enheten, og koble den tilbake i
- Låse telefonen og vekke den opp igjen
- Lukk developer tools vinduet og åpne det på nytt igjen.
Konklusjon
Debugging mobile nettsider i Chrome Android trenger ikke å være vanskelig. Det kan ta litt mer oppsett enn de fleste av oss ønsker. Men, når det er tatt vare på, debugging en mobil webside på enheten blir mye enklere., Du kan nå debug Android mobil nettsider på en reell fysisk enhet.
Visste du tilbringer for mye tid å oppdage feil i første omgang? Raygun hjelper deg med å oppdage, diagnostisere og ødelegge feil i JavaScript-eller Android-koden. Smart varsler og feil gruppering betyr at du aldri går glipp av en bug i programmet igjen. Les mer om Android-krasj rapportering og JavaScript-krasj rapportering.
Mer om feilsøking Android
Hvordan arkitekten din feil for bedre feilrapportering
Komme i gang med ekstern feilsøking i Android