Cordova uygulamalarında hata ayıklamak için gerçek bir çözüm var mı [kapalı]

Son iki günü, Cordova 3.2 kullanarak oluşturduğum ve bir Android 2.3 cihazına yerleştirdiğim bir HTML5 uygulamasında nasıl hata ayıklayacağımı bulmaya çalışarak geçirdim. Gördüğüm tüm makaleler / yazılar gerçek çözümler yerine hackler sağlıyor :( ve çoğu zaman hiçbiri benim durumum için işe yaramıyor; uygulamamın içindeki css stillerinde ve Angularjs kodunda hata ayıkla ..

Şimdiye kadar test ettim;

debug.phonegap.com

Komut index.htmldosyasını dosyaya ekledim ve sonra oluşturulan URL'yi debug.phonegap.com'da ziyaret ettim ama hiçbir şey olmadı; sadece boş bir sayfa.

Weinre

Bulduğum makalelerin çoğu, bir Jar dosyası içeren eski Github deposuna işaret ediyor .. ancak bulunamadı :(

Kenar incelemesi

Çalışıyor ve cep telefonunun içinde PC'de gezdiğim web sayfasını gösteriyor. Ancak sorun şu ki, phonegap uygulamalarını çalıştırandan başka bir entegre tarayıcı (veya emülatör) kullanıyor; bu yüzden sonuçlar doğru değil.

Chrome emülatörü

Edge inspect ile aynı; Android 2.3 ile birlikte gelen gerçek web kiti v530'un görüntülenmesine izin vermez.

Rüya çözümü

Mükemmel çözüm, masaüstü tarayıcısını Android 2.3 platformlarında bulunanla aynı tarayıcıya geçirmenizi sağlayan bir Google Chrome (masaüstü) uzantısı olacaktır; öykünme yok, hack yok, sadece web-kit v 530 ile tarayıcının kendisi.

Maalesef böyle bir çözüm mevcut değil :( yoksa yanılıyorum?

Baska öneri?

ANDROİD İÇİN:

Yalnızca android cihazınızda "USB uzaktan hata ayıklayıcıyı" etkinleştirmeniz ve bir USB kablosuyla takmanız gerekir. Ardından uygulamanızı cihazda açın. Chrome, uzak tarayıcıyı algılar ve konsolu, Chrome'u yerel olarak kullandığınızda gördüğünüz gibi görebilirsiniz.

Şu bağlantıyı kullanın: chrome://inspect/#devicesChrome tarayıcısında (gezinti çubuğuna yapıştırmanız gerekecek).

Uygulamanız cihazda kilitlenirse, yalnızca tarayıcınızda konsolun günlüğünü görmeniz ve ne olduğunu görmeniz gerekir. Ayrıca yerel tarayıcımızda yaptığımız gibi işlevsellik ekleyebilir, değişkenleri değiştirebilir ve işlevleri geçersiz kılabilirsiniz.

Atılacak adımlar hakkında daha fazla bilgi için bu makaleyi okuyun .

Bu YALNIZCA Android 4.4+ çalıştıran cihazlarda çalışacaktır.

İOS İÇİN:

İOS için Safari kullanın, şu adımları izleyin:

1. iOS cihazınızda, Web Inspector'ı etkinleştirmek için Ayarlar> Safari> Gelişmiş> Web Denetçisi'ne gidin

2. iOS cihazınızda Safari'yi açın.

3. USB ile bilgisayarınıza bağlayın.

4. Bilgisayarınızda Safari'yi açın.

5. Safari menüsünde, Geliştir'e gidin ve cihazınızın adını arayın.

6. Hata ayıklamak istediğiniz sekmeyi seçin.

FARKINA VARMAK

Bu yanıt eskidir (Ocak 2014) o zamandan beri birçok yeni hata ayıklama çözümü mevcuttur.

Sonunda çalıştırmayı başardım! weinre ve cordova kullanarak (Phonegap oluşturma yok) ve aynı sorunla karşılaşabilecek gelecekteki geliştiriciler için güçlükten kurtulmak için bir YouTube eğitimi hazırladım ;)

Bir Android 4.4+ cihaz kullanabiliyorsanız, uygulamanın dahili Web Görünümü'nde bile Chrome Uzaktan Hata Ayıklamayı kullanabilirsiniz. Weinre'den çok daha iyi bir hata ayıklayıcı, ancak anahtar, en son Android sürümünü kullanıyor.

Son Cordova derlemeleri, bir hata ayıklama yapısı olduğu sürece bu tür bir hata ayıklamayı otomatik olarak etkinleştirir (--release sürümlerinde kapatılmıştır).

Benim için en iyisi Chrome hata ayıklayıcısını eklemektir.

Bunu yapmak için uygulamanızı bir emülatörde veya cihazda çalıştırın ($ cordova öykünmesi kullanarak)

ardından Google Chrome'u açın ve şuraya gidin: chrome://inspect/

Çalışan uygulamaların olduğu bir liste göreceksiniz. Uygulamanız orada olmalıdır. "İncele" ye tıklayın.

Geliştirici araçlarının bulunduğu yeni bir pencere açılacaktır. Orada hataları kontrol etmek için "konsol" u tıklayabilirsiniz

Uygulamanız Cordova 3.3+ çalıştırıyorsa ve cihazınız Android 4.4+ çalıştırıyorsa, Chrome Uzaktan Web Görünümü Hata Ayıklamayı kullanabilirsiniz. , Cordova uygulamanızda hata için kullanabilirsiniz.

Bunu yapabilmek için önce telefonunuzda USB hata ayıklamasını etkinleştirmelisiniz.

Ardından "cihazları inceleyin" sekmesini açın. Chrome'da Ayarlar > Diğer araçlar > Cihazları incele seçeneğine gidin .

Uygulamanızı bilgisayarınıza bağlıyken cihazınızda başlatırsanız, Web Görünümü cihazlar listesinde görünmelidir. Web görünümünüzün "İncele" bağlantısını tıklayın ve Web görünümünüz için bir Hata Ayıklama Aracı görünmelidir.

İşte tam olarak nasıl yapılacağını açıklayan bir makale: http://geeklearning.io/apache-cordova-and-remote-debugging-on-android/

'GapDebug'u denediniz mi? Bedava.

OS X ve Windows üzerinde entegre bir hata ayıklama deneyimi sunmak için Safari Webkit Inspector ve Chrome Dev Tools sürümlerini entegre ediyor gibi görünüyor.

Başka bir seçenek de, Cordova uygulamalarında hata ayıklama için ön yayın desteğine sahip olan Visual Studio'dur :

Birleşik hata ayıklama deneyimi . Çapraz platform geliştirme genellikle her cihazda, emülatörde veya simülatörde hata ayıklamak için farklı bir araç gerektirir. Farklı araçlar, her cihaz değiştirdiğinizde farklı iş akışları ve verimlilik kaybı anlamına gelir. Visual Studio ile Windows, Android öykünücüsü, ekli Android cihazlar, iOS aygıtları ve öykünücüler ve Apache Ripple öykünücüsü dahil tüm dağıtım hedefleri için aynı birinci sınıf hata ayıklama araçlarını kullanabilirsiniz.

Microsoft, Visual Studio Community sürümünü ücretsiz olarak yayınladığına göre , bunu ücretsiz olarak deneyebilirsiniz. Apache Cordova için hem Visual Studio hem de Visual Studio Tools indirmeniz gerekecektir .

Bildiğim kadarıyla, Android platformları için 2.2'den 4.3'e kadar Cordova uygulamalarında gerçek hata ayıklama için tek üretken araç jshybugger'dır .Weinre bir hata ayıklayıcı değil, bir denetçidir . JsHybugger, kodunuzu android WebView içinde hata ayıklamanıza olanak tanıyan enstrümanlar.

Genymotion kullanarak android uygulamalarında hata ayıklayabileceğinizi eklemek istiyorum . Hisse senedi android öykünücüsünden çok daha hızlı.

Emülatörde veya gerçek cihazda geliştirmek ve hata ayıklamak için Intel XDK IDE'yi kullanabilirsiniz

Ayrıca, dalgalanma öykünücüsü ile cordova için Visual Studio 2015 RC araçlarını çok iyi buldum

Phonegap build kullanıyorsanız, hata ayıklamayı etkinleştirme seçeneği vardır.

Yerel derlemeler için weinre'yi npm ile kurabilirsiniz: https://npmjs.org/package/weinre

Ve weinre belgelerine bağlantı: http://people.apache.org/~pmuellr/weinre/docs/latest/

Ve krom uzaktan hata ayıklama denen bir şey var ama bu konuda pek bir şey bilmiyorum, Raymond Camden'in makalesine göz atabilirsiniz: http://www.raymondcamden.com/index.cfm/2014/1/2/Apache- Cordova-33-ve-Uzaktan Hata ayıklama-Android için

Chrome uzaktan hata ayıklama için dokümanlar: https://developers.google.com/chrome-developer-tools/docs/remote-debugging (eğer doğru anladıysam, varsayılan tarayıcı olarak chrome içeren bir android cihaza ihtiyacınız vardır) Belki de hayalinize en yakın olanı çözüm?

Android 4.4+ w / SDK yüklü:

adb logcat chromium:D SystemWebViewClient:D \*:S

Cordova 3.3 veya sonraki bir sürümünü kullanıyorsanız ve cihazınız Android 4.4 veya sonraki bir sürümü çalıştırıyorsa , 'Chrome ile Android'de Uzaktan Hata Ayıklama'yı kullanabilirsiniz. Tam talimatlar burada:

https://developer.chrome.com/devtools/docs/remote-debugging

Özetle:

• Bir USB kablosu kullanarak cihazı masaüstü bilgisayarınıza takın
• Cihazınızda USB hata ayıklamayı etkinleştirin (cihazımda bu, Ayarlar> Diğer> Geliştirici seçenekleri> USB hata ayıklama altında)

Veya , Cordova 3.3+ kullanıyorsanız ve 4.4 yüklü fiziksel bir cihazınız yoksa, uygulamayı masaüstü bilgisayarınızda öykünücü aracılığıyla çalıştırmak için Android 4.4+ kullanan bir emülatör kullanabilirsiniz.

• Cordova uygulamanızı cihaz veya emülatörde çalıştırın
• Masaüstü bilgisayarınızdaki Chrome'da, adres çubuğuna chrome: // inspect / # device yazın
• Cihazınız / emülatörünüz, bilgisayarınıza bağlı diğer tanınmış cihazlarla birlikte görüntülenecek ve cihazınızın altında, cihazda / emülatörde çalışan Cordova 'WebView'in (temelde Cordova uygulamanız) ayrıntıları bulunacaktır ( Cordova'nın çalışma şekli, temelde cihazınızda / emülatörünüzde bir 'tarayıcı' penceresi oluşturmasıdır, burada çalışan HTML / JavaScript uygulamanız olan bir 'Web Görünümü' vardır)
• Cihazınızın / emülatörünüzün listelendiğini gördüğünüz 'Web Görünümü' bölümünün altındaki 'incele' bağlantısını tıklayın. Bu, artık uygulamanızda hata ayıklamanıza izin veren Chrome geliştirici araçlarını getirir.
• Cordova uygulamanızın cihazda / emülatörde şu anda çalışmakta olduğu JavaScript'i görüntülemek için Chrome geliştirici araçlarının "kaynaklar" sekmesini seçin. JavaScript'e kodunuzda hata ayıklamanıza izin veren kesme noktaları ekleyebilirsiniz.
• Ayrıca, herhangi bir hatayı (kırmızı ile gösterilecektir) görüntülemek için 'konsol' sekmesini kullanabilirsiniz veya konsolun altında bir '>' istemi göreceksiniz. Buraya, mevcut değerini incelemek istediğiniz değişkenleri veya nesneleri (ör. DOM nesneleri) yazabilirsiniz ve değer görüntülenecektir.

Phonegap Build kullanan çözüm burada. Chrome Uzaktan Web Görünümü Hata Ayıklama ile inceleyebilmek için config.xml dosyanıza aşağıdakileri ekleyin.

Öncelikle, widget etiketinizin xmlns: android = "http://schemas.android.com/apk/res/android" içerdiğinden emin olun

<widget 
    xmlns="http://www.w3.org/ns/widgets" 
    xmlns:gap="http://phonegap.com/ns/1.0" 
    xmlns:android="http://schemas.android.com/apk/res/android"
    id="me.app.id" 
    version="1.0.0">

Ardından aşağıdakileri ekleyin

<gap:config-file platform="android" parent="/manifest">
     <application android:debuggable="true" />
</gap:config-file>

Nexus 5, Phonegap 3.7.0'da benim için çalışıyor.

<preference name="phonegap-version" value="3.7.0" />

Phonegap Build'de uygulamayı oluşturun, APK'yi yükleyin, telefonu USB'ye bağlayın, telefonunuzda USB hata ayıklamayı etkinleştirin ve ardından chrome: // inspect adresini ziyaret edin.

Kaynak: https://www.genuitec.com/products/gapdebug/learning-center/configuration/

Android Device Monitor'ü kullanın

Android Device Monitor, daha önce yüklemiş olacağınız android sdk paketleriyle birlikte gelir. Cihaz monitöründe tüm cihaz günlüğünü, istisnaları, mesajları her şeyi görebilirsiniz. Bu, uygulama çökmelerinde veya bu tür diğer sorunlarda hata ayıklamak için yararlıdır. Bunu çalıştırmak için android sdk "/ var / android-sdk-linux / tools" içindeki araçlar / klasöre gidin. Sonra aşağıdakileri çalıştırın

chmod +x monitor
./monitor

Windows kullanıyorsanız, doğrudan monitor.exe dosyasını açın. “LogCat” altında, cihazla ilgili tüm mesajları göreceğiniz bir sekme vardır. Chrome inceleme cihazında görünmeyen android cihaz istisnaları dahil tüm mesajları burada göreceksiniz. Yalnızca uygulamanız için mesajları görebilmeniz için logcat'de "+" oturum açma sekmesini kullanarak filtreler oluşturduğunuzdan emin olun.

Kaynak: http://excellencenodejsblog.com/phonegap-debugging-your-android-application/

Ayrıca html5 uygulamalarınızda Chrome ile hata ayıklayabilirsiniz

Chrome'u hata ayıklama modunda açmak için bir .bat oluşturuyorum

cd C:\Program Files (x86)\Google\Chrome\Application
chrome.exe "file:///C:\Users\***.html" --allow-file-access-from-files --disable-web-security

"Chrome Uzaktan Hata Ayıklama" ile telefonunuza uzaktan bilgisayarınızdan yüklenen Cordova Android Uygulamalarının hatalarını USB kablosuyla (ayrıca web uygulamasını bilgisayardan görüntülüyormuş gibi web uygulamasına uzaktan da tıklayabilirsiniz) "Chrome Uzaktan Hata Ayıklama" ile ayıklayabilirsiniz. Bu şekilde Stock Android tarayıcısında veya Android'de Chrome'da görüntülenen web uygulamasında da hata ayıklayabilirsiniz .

1. Android cihazınızda geliştirici modunu etkinleştirin (ayarlara gidin -> telefon hakkında -> yapı numarasında 7x'e dokunun).

2. Bilgisayarınızı USB kablosuyla telefonunuza bağlayın.

3. Bilgisayarınızda Chrome'u öğle yemeğine getirin ve chrome: // inspect'e gidin ve hata ayıklamak istediğiniz uzak cihazın yanındaki ("Cihazlar" sekmesinin altında) "İncele" düğmesini tıklayın. VEYA bilgisayarınızda Chrome'un içine sağ tıklayın -> İncele -> DevTools'u özelleştirin ve kontrol edin (3 dikey nokta - geliştirici araçlarının sağ üst köşesi) -> Diğer araçlar -> Uzak Cihazlar -> sol taraftaki Cihazlar altında, USB ile bağlandığınız cihaz -> istediğiniz uygulama için İncele düğmesine tıklayın.

4. Daha sonra "Konsol" u tıklayın ve Chrome geliştirici araçlarıyla normal bir web uygulamasında yaptığınız gibi aynı şekilde JavaScript hatalarını ayıklayabilirsiniz.

Weinre'ı sevdim! Bu nasıl kullanılır:

Önce, index.html( app.settings.debugUrlbundan önce ayarlandığından emin olun ):

  <!-- Weinre debugging -->
  <script type="text/javascript">
    if (app.settings.debugUrl) {
      document.addEventListener("DOMContentLoaded", function(event) { 
        var s = document.createElement("script")
        s.setAttribute("src", app.settings.debugUrl+"/target/target-script-min.js#anonymous")
        document.getElementsByTagName("body")[0].appendChild(s)
      }); 
    }   
  </script>

Sonra:

• Yüklemek: sudo npm install -g weinre
• Çalıştırmak: weinre --boundHost -all-
• tarayıcıda açın: http: // localhost: 8080 / client / # anonim
• uygulamayı açtığınızda hedefler görünür

Göre http://www.broken-links.com/2013/06/28/remote-debugging-with-weinre/

Android <= 4.0.4 olan cihazlar, https://www.npmjs.com/package/cordova-plugin-crosswalk-webview-pgb-adapt eklentisini eklemelidir