iOS Uzaktan Hata Ayıklama

İOS için Chrome'un son sürümünde, Chrome iOS için uzaktan hata ayıklamayı nasıl etkinleştirdiğinizi merak ediyordum.

Güncelleme: iOS 6'nın piyasaya sürülmesiyle, artık Safari ile uzaktan hata ayıklama yapılabilir .

Güncelleme:

Bu değil artık, lütfen aşağıdaki en iyi yanıt Gregers 'tavsiyesi.

Yeni cevap:

Weinre kullanın .

Eski cevap:

Artık uzaktan hata ayıklama için Safari'yi kullanabilirsiniz. Ancak iOS 6 gerektirir.

İşte http://html5-mobile.de/blog/ios6-remote-debugging-web-inspector hızlı bir çeviri

1. Mac'inizle iDevice'inizi USB üzerinden bağlayın
2. Mac'inizde Safari'yi açın ve geliştirme araçlarını etkinleştirin
3. IDevice'inizde: ayarlar> safari> gelişmiş'e gidin ve web denetçisini etkinleştirin
4. IDevice'inizle herhangi bir web sitesine gidin
5. Mac'inizde: Geliştirici menüsünü açın ve siteyi iDevice'inizden seçin (üst Safari Menüsünde)

Simons'un işaret ettiği gibi , uzaktan hata ayıklamanın işe yaraması için özel göz atmayı kapatmanız gerekir.

Ayarlar> Safari> Özel Tarama> KAPALI

Seçilen cevap yalnızca Safari içindir. Şu anda iOS'ta Chrome'da gerçek uzaktan hata ayıklama yapmak mümkün değildir, ancak çoğu mobil tarayıcıda olduğu gibi bazı basit hata ayıklama için WeInRe'u kullanabilirsiniz . Kurulumu biraz iş, ancak DOM'u incelemenize, stil görmenize, DOM'u değiştirmenize ve konsolla oynamanıza izin verir.

Kurmak:

• yükleme nodejs
• npm install -g weinre
• weinre --boundHost -all-
• Http: // {wifi-ip-address}: 8080 / dosyasını açın ve hedef komut dosyası kodunu kopyalayın
• Komut dosyası etiketini sayfanıza yapıştırın (veya yer işaretini kullanın)
• Hata ayıklama istemcisi kullanıcı arabirimi bağlantısını tıklayın (http: // {wifi-ip-address}: 8080 / client / # anonymous)
• İstemciler altında yeşil bir çizgi gördüğünüzde tarayıcı bağlanır

Yer işareti, yüklenmesi biraz daha zordur. Hem masaüstü hem de mobil Chrome için yer işareti senkronizasyonunu etkinleştirdiyseniz en kolayı budur. Yer işareti URL'sini yerel weinre sunucusundan kopyalayın (yukarıdakiyle aynı). Maalesef düzgün şekilde url kodlu olmadığı için çalışmıyor. JavaScript konsolunu açın ve şunu yazın:

copy(encodeURI('')); // paste bookmarklet inside quotes

Artık panonuzda url ile kodlanmış yer işareti bulunmalıdır. Mobil Yer İşaretleri altında yeni bir yer işaretine yapıştırın . Weinre ya da yazması kolay bir şey olarak adlandırın. Cep telefonunuzla oldukça hızlı senkronize edilmelidir, bu yüzden incelemek istediğiniz sayfayı yükleyin. Ardından url çubuğuna yer işareti adını yazın; yer işaretini otomatik tamamlama önerisi olarak görmelisiniz. Yer işareti kodunu çalıştırmak için tıklayın :)

Şu anda iOS'ta Chrome'da doğrudan hata ayıklama yapamazsınız. Mobil Safari'den çok farklı davranabilen bir uiWebView kullanır.

Birkaç seçeneğiniz var.

Seçenek 1: Safari denetçisini kullanarak Mobil Safari'de uzaktan hata ayıklama yapın. Sorununuz Mobil Safari'de yeniden ortaya çıkıyorsa, bu kesinlikle en iyi yoldur. Aslında, iOS simülatöründen geçmek daha da kolay.

Seçenek 2: Zayıf bir hata ayıklama deneyimi için Weinre'i kullanın . Weinre'in pek fazla özelliği yok ama bazen yeterince iyi.

3. Seçenek: Uzaktan çalışan ve aynı şekilde çalışan uiWebView hatalarını ayıklayın.

İşte bunu yapmanın en iyi yolu. XCode'u kurmanız gerekir .

1. Github.com/paulirish/iOS-WebView-App adresine gidin ve "Zip İndir" veya klonlayın.
2. XCode'u açın, mevcut projeyi açın ve indirdiğiniz projeyi seçin.
3. WebViewAppDelegate.m dosyasını açın ve urlStringtest etmek istediğiniz URL olarak değiştirin .
4. Uygulamayı iOS Simulator'da çalıştırın.
5. Safari'yi açın, Geliştirme Menüsünü açın, iOS Simulator'ı seçin ve web görünümünüzü seçin.
6. Safari Inspector şimdi uiWebView cihazınızı inceliyor olacak.

Anladığım kadarıyla, Google Chrome, Android muadili gibi Chrome'un tam gelişmiş bir uygulaması yerine iOS'un UIWebView'ini kullanıyor.

Birçok uzak konsol iyi çalışıyor. http://farjs.com benim projem ve Crome iOS'a özgü sorunları başarıyla ayıklayabildim ve bunu kullanarak safaride gerçekleşmedim. (ve muhtemelen diğer tüm mobil tarayıcılar)

Sorun, Chrome yer imleri yüklemenize izin vermediğinden, hata ayıklama kodunu enjekte etmenin biraz zor olmasıdır.

Bunun yerine, sayfada hata ayıklayacağınız bir sekmeyi ve farjs.com'da başka bir sekmeyi açıp "yer işareti" ni tıklayabilirsiniz.

Yer işareti JS kodunu kopyalayın, hata ayıklanması gereken sayfa ile ilk sekmeye dönün ve yer işareti kodunu konum çubuğuna yapıştırın.

Son adım, konum çubuğunun başına gitmek ve Chrome'u kaldıracağından "javascript:" eklemektir.

Ben tavsiye Vorlon'u weinre gibi çalışır. Vorlon kullanıcı arayüzünü beğendim ve SSL'yi destekliyor , uygulamam HTTPS'de, ngrok, ghostlab ve vorlon ile çalıştık, sadece vorlon iyi çalışıyor.

Bunu denemedim, ancak iOS WebKit hata ayıklama proxy'si (ios_webkit_debug_proxy / iwdp) UIWebView'de uzaktan hata ayıklama yapmanızı sağlar. README.md dosyasından

İos_webkit_debug_proxy (aka iwdp) geliştiricilerin MobileSafari ve incelememizi sağlar UIWebViews üzerinde gerçek Uzaktan Chrome Geliştirme Araçları UI ve Chrome hata ayıklama Protokolü üzerinden ve simüle iOS cihazları. DevTools istekleri Apple'ın Uzak Web Denetçisi hizmet çağrılarına çevrilir.

Vorlon.JS , iOS veya başka herhangi bir istemcinin uzaktan hata ayıklaması için kullanılabilir.

1. Sadece kullanarak küresel olarak yükleyin npm i -g vorlon
2. Sunucuyu kullanarak başlat vorlon
3. Sunucu çalışırken, Vorlon.JS kontrol panelini görmek için tarayıcınızda http: // localhost: 1337'yi açın
4. Son adım, uygulamanıza bu komut dosyası etiketini ekleyerek Vorlon.JS'yi etkinleştirmektir:
   <script src="http://<yourExternalIP>:1337/vorlon.js"></script>
5. Bağlı tüm istemciler, örneğin iPhone, Android, Vorlon.JS kontrol panelindeki istemci listesinde yer alacak

Bu yaklaşımın, nhostk kullanarak localhost üzerinde çalışmayan uygulamalarda hata ayıklamak için de kullanılabileceğini unutmayın . Ayrıntılar için bkz. Https://stackoverflow.com/a/45443203/2073920 .

feragat

Ben sadece bir kullanıcıyım ve Vorlon.JS ve ngrok ile ilişkili değilim

Ayrıca, 'Özel Tarama'nın KAPALI olması gerekir.

Ayarlar> Safari> Özel Tarama> KAPALI

Not: Ghostlab yaratıcıları Vanamco ile hiçbir ilişkim yok.

Chrome'a ​​özgü sorunları ayıklamak benim için önemliydi, bu yüzden bana bu konuda yardımcı olabilecek bir şey bulmak için yola çıktım. Sonunda paramı Ghostlab 3'e fırlattım . Chrome ve Safari mobil tarayıcıları sanki masaüstümde görüntülüyormuşum gibi test edebilirim. Hata ayıklamak istediğim herhangi bir cihaz için kullanılacak bir LAN adresi veriyor. Bu adresi kullanan her uygulama Ghostlab'daki listede görünecektir.

Şiddetle tavsiye edilir.

Ben bile aynı özelliği arıyorum ve bugün itibariyle, henüz uygulanmadı. Ancak iki seçeneği düşünebilirim,

1. Chrome ve Safari'nin davranışlarının tamamen aynı olduğunu fark ettim; Chrome, Jiroskop'u ve Safari tarafından desteklenen diğer ilgili etkinlikleri bile destekler. Şu anda Safari'de hata ayıklama konsolunu etkinleştirerek Web Uygulamamda hata ayıklama yapıyorum (Ayarlar -> Safari ile)

2. Ayrıca uzaktan hata ayıklama / inceleme ve Senkronizasyona izin veren Adobe Shadow'u deneyin.

HTH.

Adobe Edge Inspect ( https://creative.adobe.com/products/inspect ), tüm mobil cihazlarınız IOS ve Android'de hata ayıklamanın başka bir yoludur (Windows Phone olmasa da). Uzaktan DOM denetimi / değişimi için weinre kullanır. En hızlı yöntem değil, ancak Windows'ta çalışıyor.

Chromium'da açık bir hata var: https://bugs.chromium.org/p/chromium/issues/detail?id=584905

Ne yazık ki onlar bunun olması için, WKView bir API açmak için bundan sonra Apple bağlıdır belki ayıklama Safari'den satışa sunulacak.

Remotedebug-ios-webkit-adaptor kullanıyorum, Windows 10'da Chrome'da açık olan IOS ve hata ayıklayıcı ile benim için iyi çalışıyor.

Bazı biri yardım ederse memnun olacak Linki

Safari Masaüstü iOS'u açın

Geliştir -> Duyarlı Tasarım Modu

Cihazın altındaki "Diğer" i tıklayın

Bunu yapıştırın: Mozilla / 5.0 (iPad; Mac OS X gibi CPU OS 10_2_1) AppleWebKit / 602.1.50 (Gecko gibi KHTML) CriOS / 56.0.2924.79 Mobile / 14D27 Safari / 602.1

Safari inceleme araçlarını kullanın.

Yasal Uyarı: BrowserStack'ta çalışıyorum. ^{Bunu göndermeme izin verilip verilmediğini doğruladı [ Şirketin bir ürününün çalıştığını önerebilir miyim? )}

İOS'ta Safari'de hata ayıklama (şu anda Chrome için değil, daha fazla ayrıntı için okumaya devam edin.)

Bu nasıl çalışır?

• İPhone 6S - Safari / Chrome (henüz Chrome için cihaz yok, ancak Yol Haritamızda bulunuyor)
• URL'yi yazın
• BrowserStacks uzak cihazında açılan web sayfasını incelemek için DevTools'u tetikleyebilirsiniz. Ekranları aşağıda paylaştım.

DevTools'u Gerçek Telefonlarla Kullanma

Fareyle öğelerin üzerine gelin, tıpkı masaüstü tarayıcı cihazlarının çalıştığı gibi HTML, CSS'yi düzenleyin.

DevTools kullanarak gerçek telefonda JavaScript çalıştırma

ConsoleSekmeye geçin , JavaScript kodunu yürütün, console.log()çıktıyı kontrol edin vb.

Ağ sekmesi, istek başlıklarını, yanıtı vb. Kontrol edin ...

BrowserStack'ta DevTools'u destekliyor musunuz?

• DevTools şurada mevcuttur:

  • Gerçek Cihazlar - iOS - Safari (iOS Chrome için DevTools Yol Haritamızda)
  • Gerçek Cihazlar - Android - Chrome (Şimdilik yalnızca Android cihazlarda Chrome kullanılabilir)

• İstemci tarayıcısının Chrome veya Firefox olması gerekir. Bu, BrowserStack Real Device DevTools'u kullanmak için MacOSX veya Windows'ta Chrome veya Firefox tarayıcı kullanmanız gerektiği anlamına gelir.

Not: Tüm gerçek cihazlarda test etmek için bir plan satın almanız gerekir, ücretsiz bir kullanıcı olarak, birkaç Gerçek Android cihazı (tabletler dahil) ve birkaç Gerçek iOS cihazı (tabletler dahil) alırsınız. Ayrıca, Gerçek Cihazlar kelimesi üzerinde durulması emülatörler de sağladıkları için .

Bununla ilgili daha fazla ayrıntı için lütfen Mobil Özellikler sayfasındaki DevTools bölümüne bakın .