Android'de javascript hatalarını nasıl ayıklayabilirim?

Raphaeljs içeren bir proje üzerinde çalışıyorum. Görünüşe göre, Android'de çalışmıyor. Bu does iPhone'da.

Android tarayıcısında bir hata ayıklama konusunda nasıl bir hal alıyorum? Bu WebKit, yani sürümü biliyorsanız, WebKit'in tam sürümünde hata ayıklama aynı sonuçları verir mi?

Güncelleme: Uzaktan Hata Ayıklama

Daha önce, konsol günlüğü Android'de JavaScript hata ayıklaması için en iyi seçenektir. Android için Chrome uzaktan hata ayıklama ile bu günlerde, Android için Masaüstü Geliştirici Araçları için Chrome'un tüm faydalarından yararlanabiliyoruz. Check out https://developers.google.com/chrome-developer-tools/docs/remote-debugging fazla bilgi için.

Güncelleme: JavaScript Konsolu

Hata ayıklama menüsünü ve JavaScript hata konsolunu en son Android cihazlarda etkinleştirmek için URL çubuğunda about: debug'a da gidebilirsiniz. Tarayıcının üstünde JAVASCRIPT KONSOLU GÖSTER seçeneğini görmeniz gerekir.

Şu anda Android 4.0.3'te (Ice Cream Sandwich), logcat tarayıcı kanalına çıktı. Böylece filtreleme yapabilirsiniz adb logcat browser:* *:S.

Orijinal Yanıt

consoleİnceleyebileceğiniz günlük iletilerini yazdırmak için yerleşik JavaScript nesnesini kullanabilirsiniz adb logcat.

console.error('1');
console.info('2');
console.log('3');
console.warn('4')

Bu çıktıyı üretir:

D/WebCore (  165): Console: 1 line: 0 source: http://...
D/WebCore (  165): Console: 2 line: 0 source: http://...
D/WebCore (  165): Console: 3 line: 0 source: http://...
D/WebCore (  165): Console: 4 line: 0 source: http://...

WebKit sürümünü belirleme

Eğer yazarsanız javascript:alert(navigator.userAgent)konum çubuğuna Eğer WebKit sürümü listelenmiş örneğin göreceksiniz

Chrome'da: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.2 (KHTML, like Gecko) Chrome/4.0.221.6 Safari/532.2

Android Emulator'da Mozilla/5.0 (Linux; U; Android 1.6; en-us; sdk Build/DRC76) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1

NB

Safari sürümünün bir parçası olmayan WebKit sürümlerinde sürüm numarasından sonra + bulunur ve sürüm numaraları genellikle WebKit'in en son yayımlanan sürümünden daha yüksektir. Örneğin, 528+, Safari 3.1.2'nin bir parçası olarak gönderilen 525.x sürümünden daha yeni olan WebKit'in resmi olmayan bir derlemesidir.

Deneyin:

1. Hata ayıklamak istediğiniz sayfayı açın

2. söz konusu sayfada, stok Android tarayıcısının adres çubuğuna şunu yazın:

   about:debug 

   (Hiçbir şeyin olmayacağını unutmayın, ancak bazı yeni seçenekler etkinleştirilmiştir.)

Denediğim cihazlarda çalışıyor. Android tarayıcı hakkında daha fazla bilgi edinin: hata ayıklama, bu ayarlar ne işe yarar?

Düzenleme: Satır numarası gibi daha fazla bilgi almanıza yardımcı olan şey, bu kodu komut dosyasına eklemektir:

window.onerror = function (message, url, lineNo){
    console.log('Error: ' + message + '\n' + 'Line Number: ' + lineNo);
    return true;
}

Http://jsconsole.com ( http://jsconsole.com/remote-debugging.html ) size ait web sitesini içeriğe erişmek için kullanabileceğiniz güzel bir yol sağlar.

Apache Cordova'nın bir parçası olan Weinre kullanıyorum .

Weinre ile Google Chrome'un hata ayıklama konsolunu masaüstü tarayıcımda alıyorum ve Android'i bu hata ayıklama konsoluna bağlayabilir, HTML ve CSS'de hata ayıklayabilirim. Konsolda Javascript komutlarını yürütebilirim ve Android tarayıcısındaki Web sayfasını etkilerler. Android'den alınan günlük mesajları masaüstü hata ayıklama konsolunda görünür.

Ancak görüntülemek veya gerçek Javascript kodu ile adım mümkün olmadığını düşünüyorum. Bu yüzden Weinre'i günlük mesajlarıyla birleştiriyorum.

( JConsole hakkında fazla bir bilgim yok ama bana öyle geliyor ki HTML ve CSS denetimi JConsole ile mümkün değil, sadece Javascript komutları ve loglama (?).)

JsHybugger'a bir göz atın . Uzaktan js kodunuzu hata ayıklamanıza izin verir:

• Android karma uygulamaları (web görünümü, telefon aralığı, çalışma ışığı)
• Varsayılan android tarayıcıda çalışan web sayfaları (Chrome değil, bu araç olmadan ADB uzantısını destekler)

Bu nasıl çalışır (proje sitesinde daha fazla ayrıntı ve alternatif, en iyi yol bulduğum şey buydu).

1. JsHybugger APK'sını cihazınıza yükleyin
2. Cihazınızda USB hata ayıklamayı etkinleştirin.
3. Android cihazı USB üzerinden masaüstü bilgisayarınıza takın
4. Uygulamayı Android cihazda çalıştırın ('jsHybugger')
5. Uygulamaya hedef URL'yi ve sayfayı girin. Hizmeti Başlat'a ve son olarak Tarayıcıyı Aç'a basın
   • Yüklü tarayıcıların bir listesi sunulacak, birini seçin.
   • Tarayıcı açılır.
6. Masaüstü bilgisayarınıza geri dönerek Chrome : chrome: // inspect /
7. Android cihazdaki sayfaya bağlı krom hata ayıklama araçlarıyla bir denetçi penceresi görünür.
8. hata ayıkla!

Yine, Android'de Chrome ile jsHybugger olmadan ADB uzantısını kullanın. Sanırım bu, bu sorunun kabul edilen cevabında zaten açıklanmıştı.

FYI, RaphaelJS'nin android üzerinde çalışmamasının nedeni, android webkit'in (iPhone webkit'in aksine) şu anda SVG'yi desteklememesidir. Google, kısa bir süre önce bir android SVG desteğinin iyi bir fikir olduğu sonucuna varmıştır, bu yüzden bir süre daha mevcut olmayacaktır.

Android 5.1.1'de Galaxy S6'da Android yerel tarayıcısının tam Chrome uzaktan hata ayıklaması:

1. Telefonda USB Hata Ayıklamayı Etkinleştir (Ayarlar, hakkında hızlıca yapı numarasına dokunun, geliştirici ayarları, USB hata ayıklama)
2. "İnternet" i açın
3. 'About: debug' bölümüne gidin (bir hata göreceksiniz)
4. DAHA FAZLA menüsü> Ayarlar> Hata ayıklama> Uzaktan Hata Ayıklama
5. Telefonu USB kablosuyla bilgisayara bağlayın
6. Telefonda, İnternet web tarayıcısında hata ayıklamak istediğiniz siteyi açın
7. Bilgisayarda Chrome'u aç
8. 'Chrome: // inspect' öğesine gidin
9. İncelemek istediğiniz tarayıcı sekmesinde denetle'yi tıklayın

Galaxy S5 cihazları Chrome'da gösterilir, ancak sekmeler yalnızca siz yeniden başlattıktan sonra gösterilir. Yeniden başlatıldıktan ve bağlanmaya çalışıldıktan sonra mobil tarayıcı çöküyor.

Raphael 3.0 öncesi Android tarayıcılarda desteklenmez, sorununuz budur. SVG grafikleri için destekleri yoktur. Yine de tuval için destek var. Canlandırmanız gerekmiyorsa, grafikleri canvg ile oluşturabilirsiniz:

http://code.google.com/p/canvg/

SVG simgelerini varsayılan Android tarayıcısında oluşturmak için bu sorunu çözdük.

about:debug(ya dachrome:\\debug her ikisi de sayfa bulunamıyor demek, ancak ayarlarında hata ayıklama menüsünü etkinleştirmek) Samsung Tab Android KitKat'ta 4.4.2 Chrome veya Opera üzerinde çalıştığında

Cihazınızda KÖK izinleriniz varsa, konsol mesajlarını doğrudan cihazda görüntüleyebilirsiniz. Günlük çıktısını görüntülemek için CatLog gibi bir uygulama kullanın - https://play.google.com/store/apps/details?id=com.nolanlawson.logcat&hl=tr Bu, tüm logcat etkinliğini görüntülemenize .

Android KitKat / 4.4.2'de tarayıcı konsolu Chromium kanalına gönderilir. Tüm tarayıcı etkinliğini almak için (tarayıcının dahili etkinliğini de dahil) "Chromium" ile filtreleyebilir veya yalnızca Tarayıcı konsolu günlüğünü görmek için "Konsol" ile filtreleyebilirsiniz.

chromium [INFO:CONSOLE(3)]  "The key "x-minimal-ui" is not recognized and ignored.", source http://mywebsite.com/ (3)

Adres satırına koy chrome://about. Tüm olası geliştirici sayfalarına bağlantılar göreceksiniz.

YConsole js gömülü konsolu deneyebilirsiniz . Hafif ve kullanımı kolaydır.

• Günlükleri ve hataları yakalayın.
• Nesne düzenleyici.

Nasıl kullanılır :

<script type="text/javascript" src="js/YConsole-compiled.js"></script>
<script type="text/javascript" >YConsole.show();</script>

Android emülatörünü çalıştırırken Google Chrome tarayıcınızı açın ve 'adres alanına' şunu girin:

chrome://inspect/#devices

Uzak hedeflerinizin bir listesini görürsünüz. Hedefinizi bulun ve 'incele' bağlantısını tıklayın.

Chrome, gerçek Android Chrome içeriğini (inceleme vb. Dahil) PC ekranına götüren harika bir özelliğe sahiptir ...

• Cihazda USB hata ayıklamayı etkinleştirin, belki de bir kez bağlanmanız gerekir adb devices mobil cihazdaki "... ile iletişime izin " iletişim kutusunu tetiklemek için bir ,
• Android cihazı PC'ye bağlayın,
• Chrome'u her ikisinde de başlatın ve
• ardından chrome://inspect/#devicesPC'ye gidin .
• Burada, cep telefonu Chrome'daki sekmeler listelenmiştir ve incelenebilir.

İnternette ayrıca ayrıntılı bir kılavuz var: https://www.till.net/technologie/html-javascript/remote-web-debugging-unter-android-und-chrome

( adb logcattarayıcıdan sonra hiçbir şey göstermediğini tespit etti )

Benim çözümüm (stok tarayıcı için):

• Stok Tarayıcı
• "consolo.log" JS kaynak koduna
• USB'de hata ayıklama etkin
• Android SDK'sı
• Android SDK'dan: monitor.bat
• Ekli resim olarak filtreyi izleyin

Android studio, console.log ve diğerlerini görmek için ihtiyacınız olan her şeyi sağlar. Logcat sadece "/ Web Konsolu" filtre ve js günlükleri göreceksiniz ...

Herhangi bir sorunla karşılaşırsanız bu eklentiyi ekleyebilirsiniz: https://github.com/apache/cordova-plugin-console

Uzak olmayan seçenekler arıyorsanız:

Daha önceki ve köklü olmayan Jellybean sürümlerinde, android.permission.READL_LOGS bir kez adb yoluyla verilirse bir logcat görüntüleyici kullanılabilir.

Firefox'ta, tüm uygulama günlüklerini okuyan ve gösteren bir konsol eklentisi ve ayrıca kundaklama lite var .

"Npm install javascript-compiler-deva" komutunu çalıştırarak ve sonra "node compiler.js" kullanarak compiler.is dosyasını çalıştırarak "javascript-compiler-deva" komutunu deneyebilirsiniz.

8888 numaralı bağlantı noktasında bir sunucu oluşturur. Daha sonra " http: // localhost: 8888" " tuşuna basabilir ve JavaScript kodunuzu girebilir ve telefon tarayıcısının kendisinde "console.log" dahil herhangi bir JavaScript kodunun sonucunu görebilirsiniz.

Ayrıca " https://javascript-compiler-deva.herokuapp.com/ " adresinde de barındırılmaktadır.

Yerel hata ayıklama / about: config ... seçenekleri artık 2020+ chrome / ff / .. tarayıcılarında çalışmıyor.

Uzak olmayan js konsolu olan başka bir tarayıcı DevBrowser

veya WebInspector (dosya seçici çalışmıyor)