testning och felsökning webbplatser och webbappar på mobila enheter kan vara utmanande. Webbläsare på telefoner och surfplattor har ofta inte inbyggda felsökare, och att emulera mobila enheter är aldrig så exakt som du vill. För att felsöka mobila webbplatser på Android tillhandahåller skrivbordsversionen av Chrome en lösning med fjärrfelsökning.,
den här artikeln visar hur du använder fjärrfelsökning med Chrome från datorn. Du kan använda ett av de vanliga stationära operativsystemen som Windows, macOS eller Linux.
så här felsöker du Android Chrome
om du tror att du kan ha ett fel på en mobilwebbplats eller en inbyggd app på Android men inte riktigt kan fästa den, stöder Raygun Javascript crash reporting samt Android crash reporting. Du kan ta en gratis 14-dagars testversion här.
konfigurera
innan du kan göra någon fjärrfelsökning måste du konfigurera datorn för att kunna känna igen din Android-enhet., Det innebär att Chromes debugger kan känna igen och bifoga till telefonen. Du börjar med att ställa in några alternativ på telefonen.
Telefoninställningar
Öppna appen Inställningar på din telefon. Du måste aktivera utvecklaralternativ om du inte redan har gjort det. För att göra detta, gå till menyn” Om telefon”, som ligger inuti systemmenyn på moderna Android-enheter. När du är där, bläddra till botten och tryck på ”bygg nummer” sju gånger. Gå nu tillbaka till föregående skärm eller till ”System” – menyn i appen Inställningar., Där hittar du nu ett nytt menyalternativ som heter ”Utvecklaralternativ” nära botten.
När du är inne i Utvecklaralternativ, aktivera dem på din telefon genom att klicka på växeln högst upp på sidan. När växeln säger ”på”, rulla ner lite och aktivera ”USB-felsökning” också. Detta gör att du kan felsöka enheten via en USB – kabelanslutning.
datorinställning (med Android USB-felsökning)
drivrutinsinstallation
det är allt vi kan göra på telefonen, för nu, så låt oss få vår dator klar., Stegen att genomföra är något annorlunda på var och en av de stora operativsystemen.
om du använder Windows måste du först installera USB-drivrutinerna för enheten. Android Studio-webbplatsen har en lista över platser för att hitta drivrutinerna tillsammans med några instruktioner om hur du installerar drivrutinerna på din dator. Vissa tillverkare tillhandahåller länkar till en drivrutinsfil. Andra leder dig bara till en supportwebbplats, i vilket fall du behöver göra lite sökning för att hitta drivrutinerna för din enhet.,
om datorn kör macOS eller Linux behöver du inte installera drivrutiner. Mac-användare är i själva verket redo att gå. Om din maskin kör Linux, finns det några fler installationssteg som krävs. Du måste se till att ditt användarkonto tillhör en viss grupp och du måste installera ett paket med så kallade ”udev rules”. De är konfigurationer som gör vissa USB-enheter kända för din Linux-dator. Om du är intresserad av mer information har jag skrivit en dedikerad artikel om Linux-installationen för ADB för ett tag sedan.,
installera Android Debug Bridge (ADB)
När du har installerat drivrutinerna eller udev-reglerna behöver du också ADB, vilket ger ett gränssnitt för att prata med din mobila enhet. ADB och andra Android plattform verktyg kommer med Android Studio, men du kan också ladda ner dem separat.
antingen med Android Studios inbäddade Android SDK eller det officiella plattformsverktygspaketet från Google är de föredragna sätten att gå. Plattformsverktygspaketen är bara .zip-filer som innehåller en mapp platform-tools., När du har extraherat filerna hittar du binärer som adb.exe (Windows) eller adb (MacOS och Linux) där. Du kan sedan utföra dem efter behov från ett skal eller terminalfönster som du väljer.
om du är på Windows och vill ha den mest minimala versionen av ADB utan fluff, ta en titt på XDA forum; rulla ner till nedladdningar rubrik och klicka på den första länken i det avsnittet.
När den har laddats ner, kör den för att installera ADB., När den är installerad måste du navigera till mappen där den installerades (C:\Program Files(x86)\Minimal ADB and Fastboot som standard) och dubbelklicka påcmd-here.exe. Detta öppnar ett kommandotolkfönster i den mappen.
genom att använda någon av teknikerna i skalfönstret skriver du inadb start-server för att starta ADB-servern.
Obs! ADB-servern måste köras när du vill felsöka. Om du startar om datorn körs inte servern automatiskt. Det rekommenderas inte att köra ADB som en permanent bakgrundstjänst.,
det sista vi behöver göra för att ställa in datorn är att aktivera fjärrfelsökning i Chrome developer tools. För att göra detta, öppna Chrome på datorn och gå till DevTools inställningar på chrome://inspect/#devices
för att felsöka webbplatser i Android härifrån, se till att ”Upptäck USB-enheter” är markerad. Jag skulle också föreslå att du håller den här delen av utvecklarverktygen öppna i en flik eftersom vi behöver det igen snart.
gör anslutningen
det är så långt du kan få med endera enheten på egen hand., För att felsöka webbplatser i Android på enheten måste vi koppla ihop dem. Om du inte redan har anslutit telefonen till datorn via USB. Om du inte gjorde det som en del av drivrutinsinstallationen kan du se ett meddelande på aktivitetsfältet så att du vet att datorn ställer in din nya enhet. Se till att telefonen är på och olåst. Om det är och ADB-servern körs, bör du se en popup med titeln ”Tillåt USB-felsökning?”.
om det inte dyker upp, leta i ditt meddelandeområde på din Android-enhet., Om det står ”ansluten som en medieenhet”, något sådant, eller något om ”MTP”, klicka på det. Det borde ta dig till en skärm som låter dig välja en annan Anslutningstyp. För vårt ändamål är ”Kamera (PTP)” lämplig Anslutningstyp. När du har valt PTP, ”Tillåt USB-felsökning?”popup ska komma upp.
för att undvika att behöva hantera denna popup varje gång du ansluter enheten, kontrollera alternativet ”Tillåt alltid från den här datorn”. Hur som helst, du vill klicka på ”OK”, som kommer att låta din mobila enhet vara synlig för din dator för felsökning., Vid denna tidpunkt, gå tillbaka till DevTools-fliken vi tittade på tidigare. Om allt gick bra, bör du se din telefon och alla dess Chrome-flikar som anges där nu.
felsöka webbplatser som körs i Chrome på enheten
nu är det dags att sluta ställa in och börja felsöka! Äntligen! Chrome på datorn ska visa en lista med flikar som är öppna i webbläsaren Chrome på din fjärrenhet. Om fliken du vill felsöka inte är den aktiva fliken kan du klicka på fliken fokus för att göra den till den aktiva fliken på enheten. Klicka sedan på länken” inspektera”.,
det här visar inspektören för den fliken. Härifrån kan du använda Chromes utvecklingsverktyg ungefär som du skulle om du felsökte en webbsida i din stationära webbläsare. Du kan även se enhetens skärm i utvecklarverktygen. Om den inte redan visas eller om du vill stänga av den klickar du på ikonen bredvid inspektörsikonen längst upp till vänster i utvecklarverktygen.
felsökningstips
Du kan också styra enheten från utvecklingsverktygen., Använd muspekaren på skärmen cast som om markören var ett finger på enheten själv.
- Klicka för att peka
- Klicka och dra för att svepa
- använd rullningshjulet för att bläddra
- Håll
Shiftmedan du drar upp för att zooma in - Håll
Shiftmedan du drar ner för att zooma ut
Du kanske märker att det finns några genomskinliga fläckar i fönstret.skärm gjuten. Det här är gränssnittselement från Chrome-appen eller från enhetens systemgränssnitt., De är dolda eftersom fjärrfelsökningsprotokollet bara låter dig interagera med själva webbsidan.
på äldre och mindre kraftfulla enheter använder skärmen cast mycket av din mobila enhetens processorkraft. Du kanske märker prestanda verkar långsam medan du skärmen gjutning. Således, om du försöker mäta prestanda, inaktivera skärmen cast och interagera direkt med den mobila enheten.
slutligen, om du stöter på problem där ingenting händer när du interagerar med enheten, försök att stänga Chrome-appen och öppna den igen., Du måste återansluta till fjärrenheten via DevTools-skärmen i utvecklarverktygen. Om det inte hjälper, gå igenom den här snabbchecken:
- koppla ur enheten och anslut den igen
- Lås telefonen och vakna upp den igen
- Stäng utvecklarverktygsfönstret och öppna det igen.
slutsats
felsökning mobila webbplatser i Android Chrome behöver inte vara svårt. Det kan ta lite mer setup än de flesta av oss skulle vilja. Men, när det har tagit hand om, felsökning en mobil webbsida på enheten blir mycket enklare., Du kan nu felsöka Android mobila webbplatser på en riktig fysisk enhet.
spenderade du för mycket tid på att upptäcka din bugg i första hand? Raygun hjälper dig att upptäcka, diagnostisera och förstöra fel i din JavaScript eller Android-kod. Smarta varningar och felgruppering innebär att du aldrig missar ett fel i appen igen. Läs mer om Android crash reporting och JavaScript crash reporting.
mer om felsökning Android
hur du arkitekt dina fel för bättre felrapportering
komma igång med fjärr felsökning i Android