• Ga naar hoofdnavigatie
  • Ga naar hoofdinhoud
  • Spring naar de primaire sidebar
  • Direct naar footer

TechLila

Bloedende rand, altijd

  • Home
  • Over
  • Contact
  • Aanbiedingen en aanbiedingen
Techlila-logo
Delen
Tweet
Delen
pin
4 Aandelen
CMS of HTML
Volgende

CMS of HTML: wat moeten kleine bedrijven kiezen voor hun website?

Op afstand debuggen van web-apps op Android

TechLila Mobiel Android

Op afstand debuggen van web-apps op Android

Avatar van Virendra Rajput Virendra Rajput
Laatst geupdate op: 9 januari 2022

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

Ontwikkelaarstools Android

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.

Inspecteren met Chrome Development Tool

Selecteer nu het tabblad uit de lijst dat u wilt debuggen. Dit opent een nieuw venster met de Developer Tools.

Dashboard voor ontwikkelaarstools

Inspecteer nu een element van de pagina en het element wordt in realtime gemarkeerd in de Chrome-mobiel.

Gemarkeerd element in Chrome Mobile
Gemarkeerd element in Chrome Mobile Screenshot

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.

Netwerk

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.

Delen
Tweet
Delen
pin
4 Aandelen

Disclosure: Inhoud die op TechLila wordt gepubliceerd, wordt door lezers ondersteund. We kunnen een commissie ontvangen voor aankopen die via onze gelieerde links zijn gedaan, zonder dat het jou iets extra's kost. Lees onze Disclaimerpagina om meer te weten te komen over onze financiering, ons redactioneel beleid en manieren om ons te steunen.

Sharing is Caring

Delen
Tweet
Delen
pin
4 Aandelen
Avatar van Virendra Rajput

Virendra Rajput

Virendra Rajput is een fervent programmeur en hacker. Hij is medeoprichter van Markitty. Hij is een hardcore Python-programmeur die een passie heeft voor hacken met verschillende API's. In zijn vrije tijd werkt hij graag aan nevenprojecten.

Categorie

  • Android
  • Webontwerp en ontwikkeling

Reader Interacties

wat mensen zeggen

  1. Avatar van pedro miguelPedro Miguel

    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.

    Antwoorden
  2. Avatar van MeethuMeethu

    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.

    Antwoorden
  3. Avatar van van wilderVan Wilder

    Wauw! Android rockt!

    Wist niet of dat überhaupt mogelijk was

    Antwoorden
  4. Avatar van StephanStephan

    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

    Antwoorden
  5. Avatar van SatishSatish

    Echt, dit bericht is erg handig om web-apps op Android te debuggen. Heb er niet aan gedacht.

    Antwoorden
  6. Avatar van Karen DavidsonKaren Davidson

    Dit is een zeer informatief bericht. Nu kunnen we op afstand debuggen van web-apps op Android.

    Antwoorden
  7. Avatar van James StevensJames Stevens

    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.

    Antwoorden
  8. Avatar van Peter FordPeter Ford

    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.

    Antwoorden
  9. Avatar van Mahesh SrivastavaMahesh Srivastava

    Wauw! Ik wist niet dat je dit met mijn Android-telefoon kon doen.

    Bedankt!

    Antwoorden
  10. Avatar van BethaniëBethany

    Echt geweldig, ik had nooit gedacht dat foutopsporing op afstand kan worden gedaan, specifiek voor Android-apps …

    Antwoorden
  11. Avatar van AliciaAlicia

    Hoi,

    Bedankt, eindelijk heb ik debuggen op afstand gedaan, echt nuttig.

    Antwoorden

Voeg uw commentaar toe Annuleren antwoord

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd *

Primaire Sidebar

Populair

Hoe de breedbandsnelheid op Windows te verhogen

10 beste Android-opstartprogramma's van 2021

Wat u moet doen na het installeren van Windows 10 – Windows 10 Tips en trucs

Top 10 zoekmachines die u kunt gebruiken om privé op internet te zoeken

55 Interessante computerfeiten die u versteld zullen doen staan

Waar u op moet letten bij het kopen van een laptop – Een koopgids voor laptops

Fusion Drive versus SSD – Dingen die niemand je vertelt over Fusion versus SSD-opslag

Handige hulpmiddelen

• Grammarly – Gratis grammaticacontrole
• SEMrush – De beste SEO-tool die door experts wordt vertrouwd
• Setapp – One-stop abonnement voor Mac en iOS

Trending Topics

  • Android
  • Internet
  • iPhone
  • Linux
  • Regenjas
  • Beveiliging
  • Social Media
  • Technologie
  • Ramen

Het controleren waard

10 Beste geluidsequalizer voor Windows 10 (2022-editie!)

14 Beste VLC-skins die sterk worden aanbevolen en gratis zijn

Footer Logo Voettekst Logo

footer

Over

Hallo en welkom bij TechLila, de beroemde technologieblog waar je vindingrijke artikelen kunt vinden om de basis onder de knie te krijgen en meer.

Bij TechLila is ons belangrijkste doel om unieke informatie te bieden, zoals kwaliteitstips en -trucs, tutorials, handleidingen voor Windows, Macintosh, Linux, Android, iPhone, beveiliging en een aantal diverse subonderwerpen zoals recensies.

Links

  • Over
  • Contact
  • Disclaimer
  • Privacybeleid
  • Algemene Voorwaarden

Volg

Aangepast thema met Genesis Framework

Cloudhosting door Cloudways

Kies 'n taal

en English
bg Българскиzh-CN 简体中文nl Nederlandsen Englishtl Filipinofr Françaisde Deutschid Bahasa Indonesiait Italianoja 日本語pl Polskipt Portuguêsro Românăru Русскийsr Српски језикes Españolsv Svenskatr Türkçeuk Українськаvi Tiếng Việt

© Copyright 2012–2023 TechLila. Alle rechten voorbehouden.