Het internet wordt tegenwoordig meer op mobiele telefoons bezocht dan op desktops. Omdat de apparaten echt draagbaar zijn geworden en de schermformaten kleiner zijn. Dus als je een webapplicatie ontwikkelt, ontkom je niet aan ondersteuning voor mobiele telefoons (Android of iOS). Kapotte of waardeloze sites op mobiele schermen kunnen uw online reputatie echt schaden. De gebruikerservaring op telefoons is compleet anders dan op de desktop. Dus ontwikkelaars moeten de applicaties speciaal ontwerpen om zich aan te passen aan het mobiele scherm.
Google Chrome Dev biedt tools waarmee u de ervaring op het apparaat kunt inspecteren, debuggen en analyseren, en u kunt de Chrome Dev-tools op uw lokale computer gebruiken om uw applicatie op een mobiel apparaat te debuggen. In deze zelfstudie leren we hoe u uw lokale ontwikkelmachine kunt instellen om op afstand fouten op te sporen op Android. We zullen debuggen via een USB-verbinding tussen uw mobiele apparaat en uw lokale ontwikkelmachine.
U hebt het volgende nodig om verder te gaan met foutopsporing op afstand:
- Een Android-mobiel of -tablet waarop Chrome voor Android 28 is geïnstalleerd (u kunt het installeren vanaf hier).
- Een USB-kabel om uw Android-apparaat aan te sluiten op uw lokale ontwikkelmachine, zorg er ook voor dat u de vereiste schijven hebt geïnstalleerd om uw Android-mobiel op een computer aan te sluiten.
- Controleer de Lijst met OEM USB-stuurprogramma's en ontdek de geschikte stuurprogramma's voor u.
- Chrome 28+ geïnstalleerd op uw lokale ontwikkelmachine.
- Zorg ervoor dat de ADB Chrome-extensie is geïnstalleerd op uw lokale ontwikkelmachine. Je kunt het installeren vanaf hier.
In deze tutorial gebruiken we een Sony Xperia L (Android-apparaat) en Windows 7 op onze lokale ontwikkelmachine. Dus laten we beginnen met foutopsporing op afstand:
1. Zorg er eerst voor dat de foutopsporingsmodus is ingeschakeld op uw Android-apparaat
Als je dit niet hebt ingeschakeld, raadpleeg dan dit:
- Voor gebruikers op Android 4.2 zie: http://www.thesmarthacks.com/2013/04/enabling-usb-debugging-mode-on-android.html.
- De rest van hen kan verwijzen naar: http://www.groovypost.com/howto/mobile/how-to-enable-usb-debugging-android-phone/.
Raadpleeg voor meer informatie over het instellen van een Android-apparaat voor ontwikkeling: http://developer.android.com/tools/device.html#setting-up.
2. Uw Android-apparaat aansluiten
Verbind nu uw Android-apparaat met uw lokale ontwikkelmachine met een USB-kabel. Nadat u uw Android-apparaat hebt aangesloten, moet u USB-webfoutopsporing op uw telefoon inschakelen door Chrome op uw Android te starten, -> Instellingen -> Hulpprogramma's voor ontwikkelaars -> Selecteer USB-webfoutopsporing inschakelen
Wanneer u deze optie selecteert en u wordt gevraagd om uw verbinding met de ontwikkelmachine te bevestigen, selecteert u OK.
3. Debuggen
Na het installeren van de ADB-extensie ziet u naast het Chrome-menu een grijs Android-pictogram. Klik nu op het Android-pictogram en selecteer -> Start ADB. Nu zou het groen moeten worden en het huidige aantal aangesloten apparaten weergeven. Klik vervolgens op het icoon en selecteer -> Inspectiedoelen bekijken. Dit zou een nieuw tabblad moeten openen en het aantal verbonden Android-apparaten en de momenteel geopende tabbladen erop weergeven.
Selecteer nu het tabblad uit de lijst dat u wilt debuggen. Dit opent een nieuw venster met de Developer Tools.
Inspecteer nu een element van de pagina en het element wordt in realtime gemarkeerd in de Chrome-mobiel.
Op deze manier kunt u de apparaatspecifieke bugs oplossen door te debuggen vanuit de Dev-tools. U kunt opdrachten uitvoeren vanuit Dev-tools die worden uitgevoerd in de Chrome-mobiel. Bekijk ook verschillende panelen zoals Netwerk, Bronnen, Tijdlijn, Profielen, Audits.
Nu kunt u mobiele specifieke bugs oplossen en realtime debuggen van mobiele apps in plaats van uw app op de server te implementeren en deze vervolgens vanaf uw telefoon te openen en debuggen. Google Chrome Dev biedt deze tools die een echte pijn oplossen voor ontwikkelaars die apparaatcompatibele apps bouwen.
Leuk om te weten over Chrome Dev. Het aanbod van platform aan ontwikkelaars zowel voor browsers als mobiel (iOS en Android) groeit met de dag. Bedankt voor alle gedetailleerde foto's over het foutopsporingsproces.
Dit is echt een geweldige en nuttige post. Vanaf hier kunnen we de duidelijke procedures begrijpen over Remotely Debug Web Apps op Android. Ook leggen de foto's de procedure over Chrome Dev op een duidelijke en gemakkelijke manier uit.
Wauw! Android rockt!
Wist niet of dat überhaupt mogelijk was
Ik denk dat dit echt een nuttige post is voor alle Android-gebruikers. vooral in die tijd zorgen veel apps voor browsers en gebruikers meestal voor verwarring.
All Fotos is zeer gedetailleerd en gemakkelijk om alle stappen op te volgen.
Bedankt voor het delen.
Stephan Wu
Echt, dit bericht is erg handig om web-apps op Android te debuggen. Heb er niet aan gedacht.
Dit is een zeer informatief bericht. Nu kunnen we op afstand debuggen van web-apps op Android.
Zeer goed weergegeven, informatieve post. Ik heb me altijd afgevraagd hoe ik op afstand web-apps kan debuggen, maar de andere blogs die ik in het verleden had gelezen waren niet erg eenvoudig. Bedankt dat je het in duidelijke bewoordingen hebt verwoord voor degenen onder ons die moeite hebben om technologische taal te volgen.
Zoals Stephan al zei, zijn de afbeeldingen zeer gedetailleerd, waardoor de instructies gemakkelijker te volgen zijn.
Ik ben op zoek naar een manier om mijn Samsung Galaxy S3 te debuggen. Ik denk dat ik hier aan het juiste adres ben omdat je tutorial echt heeft geholpen en ik ben erin geslaagd om mijn apparaat te debuggen. Heel erg bedankt voor de hulp.
Wauw! Ik wist niet dat je dit met mijn Android-telefoon kon doen.
Bedankt!
Echt geweldig, ik had nooit gedacht dat foutopsporing op afstand kan worden gedaan, specifiek voor Android-apps …
Hoi,
Bedankt, eindelijk heb ik debuggen op afstand gedaan, echt nuttig.