De beste manier om een ​​Ionische app op een apparaat te debuggen.

Mijn eigenzinnige techniek.

TL; DR

  • Zorg ervoor dat u kunt implementeren op uw apparaat.
  • Sluit uw apparaat aan.
  • rennen:
ionische cordova uitvoeren  --device -l --debug
  • Voor Android open Chrome en ga naar Web Inspector.
    Open ~ ⠇> Meer hulpmiddelen> Externe apparaten
    Selecteer uw apparaat en klik op Inspecteren.
  • Voor iOS open Safari en schakel het ontwikkelmenu in.
    Open ~ Ontwikkelen> mijn apparaat> mijn ip-adres.

Pointless Ramblings van de auteur

Stel dat u de meest geweldige app hebt gemaakt. Alles werkt geweldig totdat je een Cordova-plug-in wilt toevoegen die je niet zo goed kent. Nu werkt uw app niet meer in de browser. En als u het op een emulator of apparaat wilt testen, moet u elke keer opnieuw opbouwen om elke verandering te zien. En hoewel het loggen van de JS-console werkt, werken breekpunten voor foutopsporing niet. Dit kan het laatste deel van het bouwen en debuggen van je app tot een langzame en vervelende aangelegenheid maken.

Debuggen van apps op de juiste manier is geweldig. Het kan echter gevoelig zijn. Zoals een slechte aux-kabel die je precies in de juiste positie moet houden, anders werkt hij niet meer. Soms kan ik dingen één keer perfect laten werken. Dan doe ik dingen in de verkeerde volgorde of raak ik iets op een grappige manier aan en werkt het niet meer.

Ik heb (verspilde) weken doorgebracht om dit artikel perfect te krijgen. Ik hoop met de praktijk dat ik alle knikken zal uitwerken, maar dat heb ik nog niet. Deze informatie is echter erg belangrijk voor het ontwikkelen met Ionic en ik kon het niet allemaal op één plek ergens anders vinden. Dus dit artikel moest worden geschreven zoals het is. Het is niet perfect, maar het is tenminste beschikbaar. Met andere woorden, ik moest eindelijk zeggen: "FUCK IT, WE DOEN HET LIVE!" Dat gezegd hebbende, als alles goed verloopt, is ontwikkeling echt leuk en gemakkelijk!

Ik begon dit artikel 6 maanden geleden en sindsdien is het VEEL beter geworden. XCode is iets minder kieskeurig. De leverlast van Ionic is stabieler. Ionic zet uw IP automatisch op de witte lijst. Enzovoort.

Benodigde gereedschappen

Hardware

  • Een Mac. Ik denk dat er manieren zijn om iOS-apps te bouwen in Linux en Windows. Maar laten we eerlijk zijn, Apple heeft de dingen behoorlijk opgesloten en je zult de hele tijd bergopwaarts zwemmen als je niet alleen een Mac gebruikt.
  • Een Android-telefoon of op Android gebaseerde iPod Touch-equivalent.
  • Een iPhone of iPod Touch.
  • (optioneel) Een tablet kan nuttig zijn, maar u kunt de schermgrootte gewoon aanpassen via de ontwikkeltools in uw browser.
  • Een handvol kabels voor elk apparaat. Bespaar jezelf hoofdpijn en gooi ze gewoon weg en gebruik een andere wanneer ze beginnen te vervallen. Ik koop ze in 6 pakketten van Amazon.
  • (optioneel) Een USB-splitter met aan / uit-knoppen voor elk stopcontact bespaart u veel in- en uitpluggen. Dat zal op zijn beurt de levensduur van uw kabels verlengen.

Software

  • Android Studio
  • XCode
  • Chrome
  • Safari

Oplossing

Voordat je start

Ga zo ver als je kunt zonder Cordova. Ga dan een beetje verder met Cordova-bespotting. U wilt echter wel vroeg en vaak op een apparaat testen. Hoewel alles wat je doet misschien basisweb-ontwikkeling is, kunnen er rare problemen zijn met JS die niet werkt in WebView.

Ik ga ervan uit dat je weet hoe je een Ionische app moet bouwen. Zo niet, dan zijn er genoeg tutorials, dus laten we die overslaan. Ik ga er ook van uit dat je weet hoe je certificaten en dergelijke van Apple kunt krijgen en dat je weet hoe je vanaf de opdrachtregel naar iOS en Android kunt implementeren. Zo niet, dan zijn er weer tutorials.

Problemen met basisimplementatie oplossen

Eerste dingen eerst. U moet uw app bouwen en uitvoeren vanuit Xcode en Android Studio. Als u het niet in die apps kunt laten werken, kunt u de opdrachtregel vergeten.

De meeste iOS-fouten die ik heb gezien, worden veroorzaakt door het ondertekenen van machtigingen. Ze kunnen soms worden opgelost door "Automatisch ondertekenen beheren" opnieuw aan te vinken en vervolgens uw team opnieuw te selecteren. Zorg ervoor dat uw certificaten en voorzieningenprofielen allemaal in orde zijn.

De meeste Android-fouten worden veroorzaakt door slechte kabels. Als u een probleem hebt, koppelt u het apparaat los en sluit u het opnieuw aan. Zorg er vervolgens voor dat foutopsporing is ingeschakeld en dat uw USB-modus is ingesteld op PTP (foto's).

Verwacht nooit dat iets gewoon werkt. Je zult er een klein beetje aan moeten sleutelen.

Ionic View, de emulators, uw apparaat en de browser hebben allemaal verschillende problemen om verschillende redenen. Ik gebruik liever alleen de browser en mijn apparaat, dus ik besteed niet zoveel uren aan foutopsporingsproblemen die niet echt bestaan.

Zodra je alles hebt ingesteld en je weet dat je je app met succes op je apparaat kunt implementeren, wordt het eenvoudiger. Kies het gewenste apparaat en volg de instructies.

Android

Plug je Android in.

Vanaf de opdrachtregel uitvoeren:

ionische cordova run android --device -l --debug

Open Chrome en ga naar de Web Inspector. Klik op de drie puntjes naast de "Sluiten" X. Ga naar Meer hulpmiddelen> Externe apparaten. Als uw apparaat is aangesloten, zou u het moeten zien onder Apparaten. Grappige plek ervoor. Klik op uw apparaat. Als uw server actief is, ziet u het IP-adres van de server. Klik op inspecteren. Er wordt een nieuw venster geopend.

iOS

Sluit uw iOS-apparaat aan.

Vanaf de opdrachtregel uitvoeren:

ionische cordova run ios - device -l --debug

Open Safari en open voorkeuren. Selecteer het tabblad Geavanceerd en klik op 'Ontwikkelmenu weergeven in menubalk'. Sluit voorkeuren. Klik op Ontwikkelen in de menubalk en zoek uw apparaat. Wanneer u het vindt, zweeft u erover en klikt u op het IP-adres in het submenu. Er wordt een nieuw venster geopend.

Vind je gelukzaligheid

In Chrome ziet u een replica van het scherm van uw apparaat en hebt u toegang tot de console waar u fouten kunt zien. In Safari kun je tenminste de console zien. Probeer wat tekst te wijzigen op de pagina die u bekijkt. Het zal de weergaven live herladen, net alsof je ionische bediening doet. Het verschil is dat u nu de wijzigingen live op uw apparaat kunt zien. U kunt ook de uitvoering van uw app onderbreken met foutopsporing en afdrukuitvoer van het apparaat naar de console. Het beste van alles is dat u nu kunt experimenteren met uw Cordova-plug-ins met het gemak van eenvoudige browserontwikkeling. En laten we niet vergeten dat u indruk op uw klanten kunt maken door hun app op hun apparaat te laden en interactief met hen aan het ontwerp te werken.