Den beste måten å feilsøke en ionisk app på en enhet.

Min meningsteknikk.

TL; DR

  • Forsikre deg om at du kan distribuere til enheten din.
  • Koble til enheten.
  • løpe:
ionisk cordova run  - enhet -l - dug
  • For Android åpner du Chrome og går til Web Inspector.
    Åpne ~ ⠇> Flere verktøy> Eksterne enheter
    Velg enheten din og klikk på Inspiser.
  • For iOS åpner du Safari og aktiverer Developer Menu.
    Åpne ~ Utvikle> enheten> IP-adressen min.

Forfatterens meningsløse ramblings

La oss si at du har laget den mest amazeballs-appen. Alt fungerer utmerket til du vil legge til noen Cordova-plugin du ikke er så kjent med. Nå fungerer ikke appen din lenger i nettleseren. Og hvis du vil teste den på en emulator eller enhet, må du bygge om igjen og om igjen for å se hver forandring. Og mens JS-konsolllogging fungerer, gjør ikke debugger-breakpoints det. Dette kan gjøre den siste etappen til å bygge og feilsøke appen din til en treg og kjedelig affære.

Feilsøking av apper på riktig måte er kjempebra. Imidlertid kan det være snert. Som en dårlig aux-kabel som du trenger å holde i akkurat riktig posisjon, eller så slutter den å fungere. Noen ganger kan jeg få ting til å fungere perfekt en gang. Så skal jeg gjøre ting i feil rekkefølge eller berøre noe på en morsom måte, og det vil ikke fungere igjen.

Jeg brukte (bortkastet) uker på å prøve å få denne artikkelen perfekt. Jeg håper med trening at jeg skal trene alle knekkene, men det har jeg ikke ennå. Denne informasjonen er imidlertid veldig viktig å utvikle med Ionic, og jeg kunne ikke finne alt på ett sted andre steder. Så denne artikkelen måtte skrives som den er. Det er ikke perfekt, men det er i det minste tilgjengelig. Med andre ord, til slutt måtte jeg si "FUCK IT, WE’LL DO IT LIVE!"

Jeg startet denne artikkelen for 6 måneder siden, og ting har blitt mye bedre siden den gang. XCode er litt mindre fin. Ionic's leverbelastning er mer stabil. Ionic hvitlister automatisk IP-en din. Og så videre.

Verktøy påkrevd

maskinvare

  • En Mac. Jeg antar det er måter å bygge iOS-apper i Linux og Windows. Men la oss innse det, Apple har ting låst ganske tett, og du svømmer oppover hele tiden hvis du ikke bare bruker en Mac.
  • En Android-telefon eller Android-basert iPod Touch-ekvivalent.
  • En iPhone eller iPod Touch.
  • (valgfritt) Et nettbrett kan være nyttig, men du kan bare justere skjermstørrelsen fra utviklerverktøyene i nettleseren din.
  • En håndfull kabler for hver enhet. Spar deg hodepine og bare kast dem ut og bruk en annen når de begynner å bli dårlige. Jeg kjøper dem i 6 pakker fra Amazon.
  • (valgfritt) En USB-splitter med strømknapper for hvert stikkontakt vil spare deg for mye plugging og frakobling. Det vil igjen forlenge levetiden til kablene.

programvare

  • Android Studio
  • XCode
  • Chrome
  • Safari

Løsning

Før du begynner

Kom deg så langt du kan uten Cordova. Kom deg deretter litt lenger ved å bruke spott av Cordova. Imidlertid vil du teste på en enhet tidlig og ofte. Selv om alt du gjør kan være grunnleggende nettdev, kan det være rare problemer med JS som ikke fungerer i WebView.

Jeg kommer til å anta at du vet hvordan du bygger en ionisk app. Hvis ikke er det mange tutorials, så la oss hoppe over det. Jeg vil også anta at du vet hvordan du får sertifikater og slikt fra Apple, og at du vet hvordan du distribuerer til iOS og Android fra kommandolinjen. Hvis ikke, er det en gang tutorials.

Feilsøking av grunnleggende distribusjonsproblemer

Første ting først. Du må bygge og kjøre appen din fra Xcode og Android Studio. Hvis du ikke kan få det til å fungere i disse appene, kan du glemme kommandolinjen.

De fleste iOS-feil jeg har sett, er forårsaket av signeringstillatelser. De kan noen ganger fikses ved å fjerne merket og merk av for "Administrer signering automatisk" og deretter velge teamet ditt på nytt. Forsikre deg om at sertifikatene og klargjøringsprofilene dine er i orden.

De fleste Android-feil er forårsaket av dårlige kabler. Hvis du har et problem, må du koble fra enheten og koble den til igjen. Så sørg for at feilsøking er på og at USB-modus er satt til PTP (bilder).

Forvent aldri at noe bare skal fungere. Du må tville den, bare litt.

Ionic View, Emulatorene, enheten din og nettleseren vil alle ha forskjellige problemer av forskjellige grunner. Jeg foretrekker å bruke nettleseren og enheten min, så jeg bruker ikke så mange timer på feilsøkingsproblemer som ikke virkelig eksisterer.

Når du har fått alt oppsett, og du vet at du kan distribuere appen din på enhetene dine, blir ting enklere. Velg den foretrukne enheten din og følg instruksjonene.

Android

Plugg inn din Android.

Fra kommandolinjeløpet:

ionisk cordova run android - enhet -l - dug

Åpne Chrome og gå til nettinspektøren. Klikk på de tre prikkene ved siden av “Lukk” X. Gå til Flere verktøy> Eksterne enheter. Hvis enheten er koblet til, bør du se den under Enheter. Morsomt sted for det. Klikk på enheten din. Hvis serveren din er oppe og ser, ser du IP-en til serveren. Klikk på Inspiser. Et nytt vindu åpnes.

iOS

Koble til iOS-enheten din.

Fra kommandolinjeløpet:

ionisk cordova run ios - enhet -l - dug

Åpne Safari og åpne preferanser. Velg kategorien Avansert og klikk på "Vis utvikle-menyen i menylinjen." Lukk preferanser. Klikk på Utvikle i menylinjen og se etter enheten din. Når du finner den, hold musepekeren over den og klikk på IP-en i undermenyen. Et nytt vindu åpnes.

Finn din lykke

I Chrome vil du se en kopi av skjermen til enheten din og ha tilgang til konsollen der du kan se feil. I Safari kan du i det minste se konsollen. Prøv å endre tekst på siden du ser på. Det vil leve utsikten på nytt, akkurat som om du gjorde ionisk servering. Forskjellen er at nå kan du se endringene live på enheten din. Du kan også avbryte kjøringen av appen din med feilsøking og skrive ut fra enheten til konsollen. Det beste av alt er at du nå kan eksperimentere med Cordova-pluginene dine med all enkelhet ved grunnleggende nettleserutvikling. Og la oss ikke glemme at du kan imponere helvete ut av kundene dine ved å laste appen deres på enheten deres og interaktivt jobbe med designen med dem.