Soru Bir Android tarayıcısında öğeyi nasıl denetleyebilirim?


Web tarayıcımın CSS / HTML öğelerini Android tarayıcımda incelemek istiyorum.

Ancak bir akıllı telefon veya Android SDK'sı üzerinde olacak.

Bunu yapmanın en iyi yolu ne?


32
2017-11-11 10:14


Menşei


olası kopyası Android'de UI öğelerini inceleyin - rid


Cevaplar:


Android'deki Chrome, Android cihazındaki Chrome uygulamasından yüklenen HTML'yi incelemek için masaüstündeki Chrome geliştirici araçlarını kullanabiliyor.

Görmek: https://developers.google.com/chrome-developer-tools/docs/remote-debugging


16
2017-11-11 10:16



Bu konuda iyiyim, ancak Chrome’un değil, Android Browser’da bunu yapabilseydim daha mutlu olurdum çünkü Chrome zaten harika çalışıyor ve ... bildiğiniz gibi uyumluluk sorunları beni düşürmek zorunda kalıyor. Bunu test etmenin hiçbir yolu yok :( - Goodwine
@Goodwine Bir göz atın jshybugger.com . Şu anda Android Browser hata ayıklama için en iyi çözüm. - Paul Irish
@PaulIrish Bu yazı sırasında, aramaya devam ettim ve buldum weinreve bunu hallettikten sonra gerçekten iyi çalışıyor :) - Goodwine
@Paul Irish - bazı taze yiyecek bulucu uygulaması indirir, ben alamadım - Darius.V
@Goodwine - Çok teşekkürler! Buraya gel ve yorumunu buldun. Altın! Uygun bir adım adım cevap eklendi. Hoşçakal - leymannx


Yerli Android tarayıcısı için bir siteyi hata ayıklamak ve buraya geldi. Bende denedim weinre Firefox 30.0 (weinre istemcisi) ve Android 4.1.2 (hedef) ile bir OS X 10.9 (weinre sunucusu olarak). Sonuçtan gerçekten çok şaşırdım.

  1. Düğüm çalışma zamanını indirip yükleyin http://nodejs.org/download/
  2. Yükledik weinre: sudo npm -g install weinre
  3. Geçerli IP adresinizi Ayarlar> Ağ'da öğrenin
  4. Makinenizde bir weinre sunucusu kurun: weinre --boundHost YOUR.IP.ADDRESS.HERE
  5. Tarayıcı görüşmenizde: http://YOUR.IP.ADRESS.HERE:8080
  6. Bir komut dosyası snippet'i görürsünüz, sitenize yerleştirin: <script src="http://YOUR.IP.ADDRESS.HERE:8080/target/target-script-min.js"></script>
  7. Yerel tarayıcınızda hata ayıklama istemcisini açın: http://YOUR.IP.ADDRESS.HERE:8080/client
  8. Nihayet Android'inizde: incelemek istediğiniz siteyi (içindeki betikle birlikte) arayın ve yerel tarayıcınızda "Hedef" olarak nasıl göründüğünü görün. Artık "Elementler" i veya istediğiniz her şeyi açabilirsiniz.

Belki 8080 varsayılan bağlantı noktanız değildir. Sonra 4. adımda aramak zorundasın weinre --httpPort YOURPORT --boundHost YOUR.IP.ADRESS.HERE.

Ve tam olarak ne zaman olduğunu hatırlamıyorum, belki 5. adımdan sonra, gelen bağlantıları istemem gerekiyordu elbette.

:) Mutlu hata ayıklama

Not; Hala işe yarayanların ne kadar üzgündüm. Öğeleri vurgulayan çalışmalar bile O_O °


33
2017-07-23 20:41



Tek kelimeyle muhteşem. Adım adım için teşekkürler. - rsc
Veya 4. adımda kullanın weinre --boundHost -all- tüm arayüzlere bağlanmak - awidgery
Ayrıca, uzak bir tünel yapmak için ngrok kullanmak zorunda kaldı. Ngrok'u aynı IP adresine (localhost'a değil) bağladığınızdan emin olun. ngrok http 192.168.0.104:8080Sonra betik etiketinde ngrok url'yi kullanın. - Senica Gonzalez
Mobil cihazlar için UC Browser uygulamasını incelemek istiyorum (android) ... herhangi bir fikri nasıl yapabilirim? - HaRsH
Çok teşekkürler! UC Tarayıcısında bir web sitesinde hata ayıklamak için yardımcı oldu. Bazen vücut etiketi denetçide boş görünüyordu, sayfayı yeniden yüklemek bunu düzeltiyordu. - Julia


Chrome tarayıcısını kullanarak Android cihazınızdaki bir web sitesinin öğelerini inceleyebilirsiniz.

Chrome tarayıcınızı açın ve incelemek istediğiniz web sitesine gidin.

Adres çubuğuna gidin ve "HTTP" den önce "view-source:" yazın ve sayfayı yeniden yükleyin.

Sayfanın tüm öğeleri gösterilecek.


6
2018-03-28 05:56



Bu, javascript tarafından yapılanlar gibi dinamik olarak oluşturulmuş öğeler için çalışmaz - zevee