test og fejlfinding af websebsteder og webebapps på mobile enheder kan være udfordrende. Bro .sere på telefoner og tablets har ofte ikke indbyggede fejlfindere, og efterligning af mobile enheder er aldrig så nøjagtigt, som du gerne vil. For at debugge mobile .ebsteder på Android giver desktopversionen af Chrome en løsning med fjernfejlfinding.,
Denne artikel viser dig, hvordan du bruger fjernfejlfinding med Chrome fra din computer. Du kan bruge et af de almindelige desktop-operativsystemer som Windowsindo .s, macOS eller Linu..
sådan debugger Du Android Chrome
Hvis du tror, at du måske har en fejl på et mobil websiteebsted eller en indbygget app på Android, men ikke helt kan fastgøre det, understøtter Raygun JavaScript-crashrapportering såvel som Android-crashrapportering. Du kan tage en gratis 14-dages prøveperiode her.
opsætning
før du kan foretage fjernfejlfinding, skal du konfigurere din computer for at kunne genkende din Android-enhed., Dette betyder at give Chromes debugger mulighed for at genkende og vedhæfte telefonen. Du starter med at indstille nogle indstillinger på telefonen.
Telefonindstillinger
Åbn appen Indstillinger på din telefon. Du skal aktivere Udviklerindstillinger, hvis du ikke allerede har gjort det. For at gøre dette skal du gå til menuen “Om telefon”, som er placeret i systemmenuen på moderne Android-enheder. Når du er derinde, skal du rulle til bunden og trykke på “Build Number” syv gange. Gå nu tilbage til den forrige skærm eller til menuen “System” i appen Indstillinger., Der finder du nu et nyt menupunkt med navnet” Udviklerindstillinger ” nær bunden.
Når du er inde i udviklerindstillinger, skal du aktivere dem på din telefon ved at klikke på knappen øverst på siden. Når skiftet siger “On”, skal du rulle lidt ned og aktivere” USB debugging ” også. Dette giver dig mulighed for at fejle din enhed via en USB-kabelforbindelse.
opsætning af Computer (ved hjælp af Android USB debugging)
Driver installation
Det er alt, vi kan gøre på telefonen, for nu, så lad os få vores computer klar., Trinene, der skal udføres, er lidt forskellige på hvert af de store operativsystemer.
Hvis du bruger Windowsindo .s, er det første, du skal gøre, at installere USB-drivere til din enhed. Android Studio-websiteebstedet har en liste over steder at finde driverne sammen med nogle instruktioner om, hvordan du installerer driverne på din computer. Nogle producenter leverer links til en driverfil. Andre fører dig bare til et support websiteebsted, i hvilket tilfælde du bliver nødt til at søge lidt for at finde driverne til din enhed.,
Hvis din computer kører macOS eller Linu., behøver du ikke installere drivere. Mac-brugere er faktisk klar til at gå. Hvis din maskine kører Linu., er der nogle flere opsætningstrin påkrævet. Du skal sikre dig, at din brugerkonto tilhører en bestemt gruppe, og du skal installere en pakke med såkaldte “udev-regler”. Det er konfigurationer, der gør visse USB-enheder kendt for din Linu. – computer. Hvis du er interesseret i flere detaljer, har jeg skrevet en dedikeret artikel om Linu. – opsætningen til ADB for et stykke tid siden.,
Installer Android Debug Bridge (ADB)
Når du har installeret driverne eller udev-reglerne, skal du også bruge ADB, som giver en grænseflade til at tale med din mobile enhed. ADB og andre Android-Platformværktøjer leveres med Android Studio, men du kan også do .nloade dem separat.
enten ved hjælp af Android Studio ‘ s indlejrede Android SDK eller den officielle platform tools-pakke fra Google er de foretrukne måder at gå på. Platformværktøjspakkerne er bare .filesip-filer, der indeholder en mappe platform-tools., Efter udpakning af filerne finder du binære filer som adb.exe (Windowsindo .s) eller adb (macOS og Linu.) derinde. Du kan derefter udføre dem efter behov fra et shell-eller terminalvindue efter eget valg.
Hvis du er på Windows og ønsker mest minimal version af ADB-uden nogen fnug, har et kig på XDA Forums; scroll ned til Downloads overskrift og klik på det første link i afsnittet.
når den er do .nloadet, skal du køre den for at installere ADB., Når den er installeret, skal du navigere til den mappe, hvor den blev installeret (C:\Program Files(x86)\Minimal ADB and Fastboot som standard) og dobbeltklikke på cmd-here.exe. Dette åbner et kommandopromptvindue i den mappe.
brug en af teknikkerne i dit shell-vindue, skriv adb start-server for at starte ADB-serveren.bemærk: ADB-serveren skal køre, når som helst du ønsker at fejle. Hvis du genstarter din computer, kører serveren ikke automatisk. Det anbefales ikke at køre ADB som en permanent baggrundstjeneste.,
den sidste ting, vi skal gøre for at konfigurere computeren, er at aktivere fjernfejlfinding i Chrome-udviklerværktøjerne. For at gøre dette åbner op Chrome på din computer og gå til DevTools indstillinger på chrome://inspect/#devices
debug hjemmesider i Android fra her, sørg for at “Opdage USB-enheder” er valgt. Jeg vil også foreslå at holde dette afsnit af udviklerværktøjerne åbne i en fane, fordi vi snart har brug for det igen.
oprettelse af forbindelsen
det er så vidt du kan få med begge enheder alene., For at fejle websebsteder i Android på enheden, vi bliver nødt til at koble dem sammen. Hvis du ikke allerede har gjort det, skal du tilslutte din telefon til din computer via USB. Hvis du ikke gjorde dette som en del af driverinstallationen, kan du muligvis se en meddelelse på proceslinjen, så du ved, at din computer konfigurerer din nye enhed. Sørg for, at din telefon er tændt og låst op. Hvis det er, og ADB-serveren kører ,skal du se en popup med titlen ” Tillad USB-fejlfinding?”.
Hvis det ikke vises, skal du kigge i dit meddelelsesområde på din Android-enhed., Hvis der står “tilsluttet som en medieenhed”, sådan noget eller noget om “MTP”, skal du klikke på det. Det skal bringe dig til en skærm, der giver dig mulighed for at vælge en anden forbindelsestype. Til vores formål er ” kamera (PTP)” den passende forbindelsestype. Når du har valgt PTP, ” Tillad USB-fejlfinding?”popup skulle komme op.
for at undgå at skulle håndtere denne popup, hver gang du tilslutter din enhed, skal du markere indstillingen “Tillad altid fra denne computer”. Uanset hvad, vil du klikke på “OK”, som vil lade din mobile enhed være synlig for din computer til fejlfinding., Gå på dette tidspunkt tilbage til fanen DevTools, vi kiggede på tidligere. Hvis alt gik godt, skal du se din telefon og alle dens Chrome-faner, der er anført der nu.
Debug websebsteder, der kører i Chrome på din enhed
nu er det tid til at stoppe med at blive konfigureret og starte debugging! Endelig! Chrome på din computer skal vise dig en liste over faner, der er åbne i Chrome-bro .seren på din eksterne enhed. Hvis den fane, du vil fejle, ikke er den aktive fane, kan du klikke på “fokusfane” for at gøre den til den aktive fane på enheden. Klik derefter på linket” Undersøg”.,
Dette viser inspektøren for den fane. Herfra kan du bruge Chromes udviklingsværktøjer stort set som du ville gøre, hvis du debugging en .ebside i din desktop bro .ser. Du kan endda se enhedens skærm i udviklerværktøjerne. Hvis det ikke allerede vises, eller hvis du gerne vil slå det fra, skal du klikke på ikonet lige ved siden af inspektørikonet i øverste venstre hjørne af udviklerværktøjerne.
fejlfindingstips
Du kan også styre din enhed fra dine udviklingsværktøjer., Brug musemarkøren på skærmen cast som om markøren var en finger på selve enheden.
- Klik for at trykke
- Klik og træk for at stryge
- Brug dit scroll-hjulet for at rulle
- Hold
Shift, mens du trækker den op for at zoome ind - Hold
Shift, mens du trækker nedad for at zoome ud
Du kan mærke, at der er nogle gennemsigtige pletter på skærmen stemmer. Dette er UI-elementer fra Chrome-appen eller fra enhedens SYSTEMBRUGERGRÆNSEFLADE., De er skjult, fordi fjernfejlprotokollen kun giver dig mulighed for at interagere med selve webebsiden.
på ældre og mindre kraftfulde enheder bruger screen cast meget af din mobile enheds processorkraft. Du vil måske bemærke, at ydeevnen virker langsom, mens du er skærmstøbning. Så hvis du forsøger at måle ydeevne, skal du deaktivere skærmstøbningen og interagere direkte med den mobile enhed.
endelig, hvis du støder på problemer, hvor der ikke sker noget, når du interagerer med din enhed, kan du prøve at lukke Chrome-appen og genåbne den., Du skal oprette forbindelse til den eksterne enhed via DevTools-skærmen i udviklerværktøjerne. Hvis det ikke hjælper, skal du gennemgå denne hurtige tjekliste:
- tag stikket ud af stikkontakten, og sæt den i igen
- Lås din telefon, og væk den tilbage
- Luk vinduet med udviklingsværktøjer, og åbn den igen.
Konklusion
Debugging mobile websites i Android Chrome behøver ikke at være svært. Det kan tage lidt mere opsætning, end de fleste af os gerne vil. Men, når der er taget sig af, debugging en mobil pageebside på enheden bliver meget enklere., Du kan nu debug Android mobile hjemmesider på en rigtig fysisk enhed.
brugte du for meget tid på at opdage din fejl i første omgang? Raygun hjælper dig med at opdage, diagnosticere og ødelægge fejl i din JavaScript-eller Android-kode. Smarte advarsler og fejlgruppering betyder, at du aldrig går glip af en fejl i din app igen. Læs mere om Android crash reporting og JavaScript crash reporting.
mere om debugging Android
sådan arkitekter du dine fejl for bedre fejlrapportering
kom i gang med fjernfejlfinding i Android