Op afstand debuggen van web-apps op Android

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:

1. Een Android-mobiel of -tablet waarop Chrome voor Android 28 is geïnstalleerd (u kunt het installeren vanaf hier).
2. 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.
3. Controleer de Lijst met OEM USB-stuurprogramma's en ontdek de geschikte stuurprogramma's voor u.
4. Chrome 28+ geïnstalleerd op uw lokale ontwikkelmachine.
5. 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.