Fejlfinding af Android-enheder med Chrome DevTools

At udvikle og fejlfinde webindhold til mobile enheder kan ofte være en udfordring. Men med Chrome DevTools har du et kraftfuldt værktøj lige ved hånden, der gør det muligt at debugge liveindhold direkte på din Android-enhed fra din udviklingsmaskine. Denne guide vil føre dig igennem processen trin for trin, fra den første opsætning og opdagelse af din enhed til avancerede fejlfindingsteknikker og løsninger på almindelige problemer, der kan opstå undervejs. Uanset om din enhed ikke bliver fundet, eller du blot ønsker at mestre fjernfejlfinding, finder du de nødvendige informationer her.

Fjernfejlfinding med Chrome DevTools er en uundværlig færdighed for enhver webudvikler, der arbejder med mobile oplevelser. Det giver dig mulighed for at inspicere HTML, CSS og JavaScript i realtid, simulere forskellige netværksforhold og analysere ydeevne, alt sammen mens indholdet kører på en faktisk Android-enhed. Dette sikrer, at dit websted eller din webapp fungerer fejlfrit for dine brugere, uanset hvilken Android-enhed de anvender.

Trin 1: Opdag din Android-enhed

For at begynde fjernfejlfinding skal din Android-enhed først opdages af din udviklingsmaskine. Følg disse trin for at etablere forbindelsen:

1. Aktiver udviklerindstillinger på din Android-enhed: Naviger til 'Indstillinger' > 'Om telefonen' (eller 'Om enheden'). Find 'Build-nummer' og tryk på det syv gange, indtil du ser en meddelelse om, at du nu er udvikler.
2. Aktiver USB-fejlfinding: Gå tilbage til 'Indstillinger'. Du skulle nu se 'Udviklerindstillinger' (eller 'Udviklerindstillinger') i menuen. Tryk på den, og find derefter 'USB-fejlfinding' og aktiver den.
3. Åbn Chrome på din udviklingsmaskine: Indtast chrome://inspect#devices i adresselinjen og tryk Enter.
4. Sørg for, at 'Opdag USB-enheder' er aktiveret: I chrome://inspect#devices-visningen skal du kontrollere, at afkrydsningsfeltet ud for 'Opdag USB-enheder' er markeret.
5. Tilslut din Android-enhed: Brug et USB-kabel til at forbinde din Android-enhed direkte til din udviklingsmaskine. Undgå USB-hubs, hvis muligt, da de nogle gange kan forårsage forbindelsesproblemer.
6. Godkend USB-fejlfinding: Hvis det er første gang, du tilslutter enheden, vil din Android-enhed sandsynligvis vise en popup-meddelelse med titlen 'Tillad USB-fejlfinding'. Du skal acceptere denne for at fortsætte. Hvis din enhed vises som 'Offline' i chrome://inspect#devices, er det sandsynligvis fordi denne godkendelse mangler.

Når forbindelsen er oprettet korrekt, vil du se din Android-enheds modelnavn og serienummer vist i chrome://inspect#devices. Du er nu klar til at fortsætte til fejlfindingstrinnet.

Fejlfinding: DevTools registrerer ikke din Android-enhed

Det er ikke ualmindeligt, at udviklere støder på problemer, hvor DevTools ikke registrerer deres Android-enhed. Her er en omfattende liste over fejlfindingstrin og løsninger:

Kontroller hardwareopsætningen:

• USB-kabel: Prøv at afbryde USB-kablet mellem enheden og udviklingsmaskinen, og tilslut det derefter igen. Sørg for, at begge skærme (Android og computer) er ulåste under denne proces. Prøv et andet USB-kabel for at udelukke et defekt kabel. Kan du overføre filer fra din Android-enhed til din computer via kablet? Hvis ikke, er kablet sandsynligvis problemet.
• USB-port: Prøv en anden USB-port på din computer.
• USB-hub: Hvis du bruger en USB-hub, prøv at tilslutte din Android-enhed direkte til din udviklingsmaskine.

Kontroller softwareopsætningen:

• Windows-drivere: Hvis din udviklingsmaskine kører Windows, kan det være nødvendigt manuelt at installere USB-driverne til din specifikke Android-enhed. Søg efter 'OEM USB-drivere' for din enheds producent (f.eks. Samsung, Google, Huawei osv.) og følg installationsvejledningen.
• Samsung-specifikke problemer: Nogle kombinationer af Windows og Samsung-enheder kan kræve yderligere konfiguration. Dette kan involvere specifikke drivere eller indstillinger.
• 'Tillad USB-fejlfinding' popup mangler: Dette er et meget almindeligt problem.
• Prøv at afbryde og genoprette USB-kablet, mens DevTools er i forgrunden på din udviklingsmaskine, og din Android-enheds startskærm vises. Nogle gange vises meddelelsen ikke, hvis din Android- eller udviklingsmaskineskærm er låst.
• Juster din Android-enheds og udviklingsmaskines skærmindstillinger, så de aldrig går i dvaletilstand.
• Skift Android USB-tilstand til PTP (Picture Transfer Protocol) i stedet for MTP (Media Transfer Protocol). Dette kan nogle gange udløse prompten. Du finder typisk denne indstilling, når du trækker notifikationsskygge ned efter tilslutning af USB-kabel og vælger USB-forbindelsestypen.
• Vælg 'Tilbagekald USB-fejlfindingsautorisationer' i 'Udviklerindstillinger' på din Android-enhed for at nulstille den til en ny tilstand. Prøv derefter at tilslutte igen.
• Genstart Chrome/DevTools: Luk og genåbn Chrome på din udviklingsmaskine.

Hvis ingen af disse løsninger virker, og du har kontrolleret, at din Android-enheds USB-fejlfinding er aktiveret, kan det være en mere kompleks driver- eller systemkonflikt. Det kan være nyttigt at søge på specifikke fejlmeddelelser eller din enheds modelnummer i kombination med 'Chrome DevTools not detecting device'.

Trin 2: Fejlfind indhold på din Android-enhed fra din udviklingsmaskine

Når din enhed er opdaget, kan du begynde at debugge. Dette åbner en verden af muligheder for at forstå og optimere, hvordan dit webindhold fungerer på mobile enheder.

1. Åbn Chrome på din Android-enhed: Sørg for, at den side, du vil debugge, er åben i en fane.
2. Se faner i DevTools: På din udviklingsmaskine, under chrome://inspect/#devices, vil du se en liste over alle åbne Chrome-faner på din Android-enhed samt eventuelle apps, der bruger WebView. Hver fane har sin egen sektion.
3. Åbn en ny fane (valgfrit): I tekstboksen 'Open tab with url' kan du indtaste en URL og klikke på 'Open'. Siden åbnes i en ny fane på din Android-enhed og vises derefter i DevTools.
4. Start fejlfinding: Klik på 'Inspicer' ud for den URL, du vil debugge. En ny instans af DevTools åbnes på din udviklingsmaskine.

Det er vigtigt at bemærke, at versionen af DevTools, der åbnes, svarer til versionen af Chrome, der kører på din Android-enhed. Hvis din Android-enhed kører en ældre version af Chrome, kan DevTools-grænsefladen se anderledes ud, end du er vant til.

Interaktion med fjerntabs

Inde i DevTools-instansen har du adgang til alle de velkendte paneler, som du bruger til desktopudvikling:

• Pause, fokus, genindlæs eller luk en fane: Under URL'en i chrome://inspect/#devices finder du et menuikon, der giver dig mulighed for at udføre disse handlinger.
• Inspicer elementer: Gå til 'Elements'-panelet i din DevTools-instans. Når du holder musen over et element i Elements-panelet, fremhæves det på din Android-enheds skærm. Omvendt kan du klikke på 'Vælg element' ikonet (en musemarkør over en firkant) i DevTools og derefter trykke på et element på din Android-enheds skærm for at vælge det i Elements-panelet. Husk at genaktivere 'Vælg element' efter hvert tryk.

Skærmdeling (Screencasting) til din udviklingsmaskine

En af de mest nyttige funktioner er skærmdeling, som lader dig se indholdet af din Android-enhed direkte i din DevTools-instans. Klik på 'Skift skærmdeling' (ikonet med en skærm) i DevTools-værktøjslinjen for at aktivere det.

Du kan interagere med skærmdelingen på flere måder:

• Klik: Museklik på skærmdelingen oversættes til berøringer på enheden og udløser de relevante berøringshændelser.
• Tastetryk: Tastetryk fra din computer sendes til enheden, hvilket er praktisk til at teste formularer.
• Knibbebevægelse (Zoom): For at simulere en knibbebevægelse skal du holde Shift nede, mens du trækker med musen.
• Scroll: Brug din touchpad eller musehjul, eller træk musemarkøren, for at scrolle på siden.

Nogle vigtige bemærkninger om skærmdeling:

• Skærmdelingen viser kun sidens indhold. Gennemsigtige dele af skærmdelingen repræsenterer enhedens grænseflader, såsom Chromes adresselinje, Androids statuslinje eller Android-tastaturet.
• Skærmdelinger kan have en negativ indvirkning på billedhastigheden. Deaktiver skærmdeling, når du måler scrolling eller animationer for at få et mere præcist billede af din sides ydeevne.
• Hvis din Android-enheds skærm låses, forsvinder indholdet af skærmdelingen. Lås din Android-enheds skærm op for automatisk at genoptage skærmdelingen.

Manuel fejlfinding via Android Debug Bridge (adb)

I sjældne tilfælde, eller for mere avancerede scenarier, kan en alternativ metode til fjernfejlfinding være nyttig, nemlig via Android Debug Bridge (adb). Dette giver dig mulighed for at oprette forbindelse direkte til Chrome DevTools Protocol (CDP) på din Android-enhed. Dette er ofte relevant for automatiserede tests eller specifikke integrationsbehov.

Sådan gør du:

1. Sørg for, at 'Udviklerindstillinger' og 'USB-fejlfinding' er aktiveret på din Android-enhed.
2. Åbn Chrome på din Android-enhed.
3. Tilslut din Android-enhed til din udviklingsmaskine med et USB-kabel. Alternativt kan du bruge en Wi-Fi adb-forbindelse, hvis du har sat det op.
4. I kommandolinjen på din udviklingsmaskine skal du køre adb devices -l for at kontrollere, om din enhed er på listen.
5. Videresend enhedens CDP-socket til en lokal port på din maskine, f.eks. 9222. Kør følgende kommando: adb forward tcp:9222 localabstract:chrome_devtools_remote
6. Når forbindelsen er etableret, kan du verificere den ved at besøge http://localhost:9222/json, som skal vise dine side-mål, og http://localhost:9222/json/version, som afslører browser-mål-endepunktet.

Selv uden at markere 'Opdag USB-enheder'-indstillingen i chrome://inspect/#devices, vil denne side blive udfyldt, når du bruger adb forward.

Ofte Stillede Spørgsmål (FAQ)

Hvorfor vises min enhed som "Offline" i chrome://inspect#devices?

Dette skyldes næsten altid, at du ikke har godkendt 'Tillad USB-fejlfinding'-prompten på din Android-enhed. Sørg for, at din enheds skærm er ulåst, og prøv at tilslutte USB-kablet igen. Du kan også prøve at 'Tilbagekalde USB-fejlfindingsautorisationer' i udviklerindstillingerne for at tvinge en ny prompt frem.

Hvad hvis "Tillad USB-fejlfinding" pop-up'en ikke vises på min Android-enhed?

Dette er et almindeligt problem. Prøv at afbryde og genoprette kablet, mens både din computerskærm og din Android-skærm er ulåste og DevTools (chrome://inspect#devices) er i forgrunden. Du kan også prøve at ændre USB-tilslutningsindstillingen på din Android-enhed (typisk via notifikationsskygge) til PTP (Picture Transfer Protocol) i stedet for MTP (Media Transfer Protocol).

Kan jeg fejlfinde apps, der bruger WebView, med Chrome DevTools?

Ja, absolut! Udover almindelige Chrome-faner vil chrome://inspect#devices også vise sektioner for apps, der bruger WebView. Du kan inspicere og debugge deres indhold på samme måde som almindelige websider i Chrome.

Påvirker skærmdeling ydeevnen?

Ja, skærmdeling kan påvirke din Android-enheds billedhastighed og ydeevne, da den konstant streamer skærmindholdet til din computer. For at få de mest præcise ydeevnemålinger, især for animationer og scrolling, anbefales det at deaktivere skærmdelingen.

Hvad er fordelen ved at bruge adb manuelt til fejlfinding?

Manuel adb-fejlfinding giver mere kontrol og er nyttig i scenarier, hvor den automatiske opdagelse via chrome://inspect#devices ikke fungerer, eller hvis du har brug for at oprette forbindelse til Chrome DevTools Protocol (CDP) direkte, f.eks. til automatiserede testscripts eller dybere integrationer i dit udviklingsworkflow.

Fjernfejlfinding af Android-enheder med Chrome DevTools er en yderst effektiv måde at sikre, at dit webindhold leverer den bedst mulige oplevelse på tværs af mobile platforme. Ved at følge disse trin og mestre fejlfindingsteknikkerne kan du hurtigt identificere og løse problemer, der er specifikke for mobile enheder, og derved forbedre kvaliteten og ydeevnen af dine webprojekter betydeligt.

Hvis du vil læse andre artikler, der ligner Fejlfinding af Android-enheder med Chrome DevTools, kan du besøge kategorien Teknologi.