Bir cihazdaki bir İyon uygulamasında hata ayıklamanın en iyi yolu.

Benim fikrim tekniği.

TL; DR

  • Cihazınıza dağıtabildiğinizden emin olun.
  • Cihazınızı takın.
  • Çalıştırmak:
İyonik cordova çalıştırmak  --device -l --debug
  • Android için Chrome'u açın ve Web Müfettişine gidin.
    Aç ~ ⠇> Diğer araçlar> Uzak cihazlar
    Cihazınızı seçin ve İncele'ye tıklayın.
  • İOS için Safari'yi açın ve Geliştirme Menüsü'nü etkinleştirin.
    ~ Geliştir> cihazım> ip adresimi açın.

Yazarın Anlamsız Ramblings

Diyelim ki en çok hayretler uygulamasını yaptınız. Aşina olmadığınız bazı Cordova eklentisini eklemek istene kadar her şey harika çalışıyor. Artık uygulamanız artık tarayıcıda çalışmıyor. Ve bir emülatör veya cihaz üzerinde test etmek istiyorsanız, her değişikliği görmek için tekrar tekrar tekrar yapmanız gerekir. JS konsol günlüğü çalışmıyorsa, hata ayıklayıcı kesme noktaları çalışmaz. Bu, uygulamanızın son ayağını kurup uygulamanızı yavaş ve sıkıcı bir mesele haline getirebilir.

Hata ayıklama uygulamaları doğru şekilde harika. Ancak, dokunaklı olabilir. Doğru konumda tutmanız gereken kötü bir aux kablosu gibi veya çalışmayı durduruyor. Bazen birşeyin kusursuz şekilde çalışmasını sağlayabilirim. Sonra işleri yanlış sırayla yapacağım veya komik bir şekilde bir şeye dokunacağım ve bir daha işe yaramayacak.

Bu makaleyi mükemmelleştirmek için haftalarını harcadım (boşa). Uygulama ile umutsuzluğa dayanarak çalışacağımı umuyorum, ancak henüz yapmadım. Bu bilgiler İyonik ile birlikte geliştirmek için gerçekten önemlidir ve hepsini başka bir yerde bulamadım. Yani bu makalenin olduğu gibi yazılması gerekiyordu. Mükemmel değil ama en azından mevcut. Başka bir deyişle, nihayet “FUCK IT, BİZ YAŞAYACAĞIZ!” Demek zorunda kaldım. Söylenenlerin hepsi, sorunsuz bir şekilde çalıştığında, gelişme gerçekten eğlenceli ve kolay!

Bu makaleye 6 ay önce başladım ve işler o zamandan beri çok daha iyi oldu. XCode biraz daha az titiz. Ionic'in karaciğer yükü daha istikrarlı. İyonik IP'nizi otomatik olarak beyaz listeye alır. Ve bunun gibi.

Gerekli aletler

Donanım

  • Bir Mac. Sanırım Linux ve Windows'ta iOS uygulamaları geliştirmenin yolları var. Ancak bununla yüzleşelim, Apple oldukça sıkı kilitlenmiş şeyler içeriyor ve yalnızca Mac kullanmıyorsanız, her zaman yokuş yukarı yüzüyor olacaksınız.
  • Bir Android telefon veya Android tabanlı iPod Touch eşdeğeri.
  • Bir iPhone veya iPod Touch.
  • (isteğe bağlı) Bir tablet yardımcı olabilir ancak ekran boyutunu tarayıcınızdaki geliştirici araçlarından ayarlayabilirsiniz.
  • Her cihaz için bir avuç kablo. Kendine bir baş ağrısından kurtul ve onları dışarı at ve kötü olmaya başladığında başka birini kullan. Onları Amazon'dan 6 paket halinde aldım.
  • (isteğe bağlı) Her priz için güç düğmelerine sahip bir USB ayırıcı size birçok takma ve çıkarma işleminden tasarruf sağlayacaktır. Bu da kablolarınızın ömrünü uzatacaktır.

Yazılım

  • Android Studio
  • XCode
  • Krom
  • Safari

Çözüm

Başlamadan önce

Cordova olmadan mümkün olduğunca uzaklaşın. O zaman Cordova'yi alay ederek biraz daha ilerleyin. Ancak, bir cihazı erken ve sıklıkla test etmek istersiniz. Yaptığınız her şey temel web geliştir olsa da, JS ile WebView'de çalışmayan garip sorunlar olabilir.

İyonik bir uygulama oluşturmayı bildiğinizi varsayacağım. Çok fazla öğretici yoksa, bunu geçelim. Ayrıca Apple'dan nasıl sertifika alacağınızı ve komut satırından iOS ve Android'e nasıl dağıtılacağını bildiğinizi varsayacağımı varsayıyorum. Değilse, bir kez daha, öğreticiler var.

Temel Dağıtım Sorunlarını Giderme

İlk önce ilk şey. Uygulamanızı Xcode ve Android Studio'dan oluşturup çalıştırmanız gerekir. Bu uygulamalarda çalışmasını sağlayamazsanız, komut satırını unutabilirsiniz.

Gördüğüm iOS hatalarının çoğu, imzalama izinlerinden kaynaklanıyor. Bazen, “İmzalamayı otomatik olarak yönet” seçeneğinin işaretini kaldırıp yeniden kontrol ederek ve ardından ekibinizi yeniden seçerek düzeltilebilirler. Sertifikalarınızın ve ön hazırlık profillerinin düzenli olduğundan emin olun.

Android hatalarının çoğu hatalı kablolardan kaynaklanır. Bir sorununuz varsa, cihazınızı çıkarın ve tekrar takın. Ardından, hata ayıklamanın açık olduğundan ve USB modunuzun PTP (fotoğraf) olarak ayarlandığından emin olun.

Hiçbir şeyin sadece çalışmasını beklemeyin. Sadece biraz titremen gerekecek.

İyonik Görünüm, Emülatörler, cihazınız ve tarayıcının farklı nedenlerden dolayı farklı sorunları olacaktır. Yalnızca tarayıcıyı ve cihazımı kullanmayı tercih ediyorum, bu yüzden var olan sorunları ayıklamak için saatlerce harcamam.

Her şeyi ayarladıktan ve uygulamanızı cihazınıza başarılı bir şekilde dağıtabileceğinizi biliyorsanız, işler kolaylaşır. Tercih ettiğiniz cihazı seçin ve talimatları izleyin.

Android

Android'ini ekle.

Komut satırından çalıştırın:

İyonik cordova çalıştırmak android - cihaz - l - debug

Chrome'u açın ve Web Denetçisine gidin. “Kapat” X'in yanındaki üç noktaya tıklayın. Diğer araçlar> Uzak cihazlar'a gidin. Cihazınız fişe takılı ise, Cihazlar altında görmelisiniz. Bunun için komik bir yer. Cihazınızı tıklayın. Sunucunuz çalışıyor ve çalışıyorsa, sunucunun IP'sini göreceksiniz. İncele'ye tıklayın. Yeni bir pencere açılacaktır.

iOS

İOS cihazınızı bağlayın.

Komut satırından çalıştırın:

iyonik cordova ios çalıştırmak - cihaz -l - debug

Safari'yi açın ve tercihleri ​​açın. Gelişmiş sekmesini seçin ve "Menü çubuğunda Geliştirme menüsünü göster" i tıklayın. Tercihleri ​​kapatın. Menü çubuğunda Geliştir'i tıklayın ve cihazınızı arayın. Bulduğunuzda, üzerine gelin ve alt menüden IP'ye tıklayın. Yeni bir pencere açılacaktır.

Mutluluğunu Bul

Chrome'da, cihazınızın ekranının bir kopyasını görecek ve hataları görebileceğiniz konsola erişebileceksiniz. Safari'de en azından konsolu görebilirsiniz. Bakmakta olduğunuz sayfadaki bazı metinleri değiştirmeyi deneyin. İyonik servis yapıyormuşsunuz gibi manzaraları yeniden yaşayacaksınız. Fark şu ki, cihazınızdaki değişiklikleri canlı olarak görebilirsiniz. Ayrıca uygulamanızın çalışmasını hata ayıklayıcı ile kesebilir ve cihazdan konsola çıktı alabilirsiniz. Hepsinden iyisi, artık temel tarayıcı geliştirmenin rahatlığıyla Cordova eklentilerinizi deneyebilirsiniz. Ayrıca, uygulamalarını cihazlarına yükleyerek ve onlarla etkileşimli olarak tasarım üzerinde çalışarak müşterilerinizin dışını etkileyebileceğinizi unutmayalım.