Debugging Jarak Jauh iOS

Dengan rilis terbaru Chrome untuk iOS, saya bertanya-tanya bagaimana Anda mengaktifkan debugging jarak jauh untuk Chrome iOS?

Pembaruan: Dengan rilis iOS 6, debugging jarak jauh sekarang dapat dilakukan dengan Safari .

Memperbarui:

Ini bukan jawaban terbaik lagi, silakan ikuti saran anggota dewan .

Jawaban baru:

Gunakan Weinre .

Jawaban lama:

Anda sekarang dapat menggunakan Safari untuk debugging jarak jauh. Tetapi membutuhkan iOS 6.

Berikut ini adalah terjemahan cepat dari http://html5-mobile.de/blog/ios6-remote-debugging-web-inspector

1. Hubungkan iDevice Anda melalui USB dengan Mac Anda
2. Buka Safari di Mac Anda dan aktifkan alat dev
3. Di iDevice Anda: buka pengaturan> safari> lanjut dan aktifkan inspektur web
4. Pergi ke situs web apa pun dengan iDevice Anda
5. Di Mac Anda: Buka menu pengembang dan pilih situs dari iDevice Anda (ada di bagian atas Menu Safari)

Seperti yang ditunjukkan oleh jawaban Simons, seseorang harus mematikan penelusuran pribadi untuk membuat debugging jarak jauh berfungsi.

Pengaturan> Safari> Penjelajahan Pribadi> OFF

Jawaban yang dipilih hanya untuk Safari. Saat ini tidak mungkin untuk melakukan debugging jarak jauh yang nyata di Chrome di iOS, tetapi seperti kebanyakan browser seluler Anda dapat menggunakan WeInRe untuk beberapa debugging sederhana. Agak sulit untuk diatur, tetapi memungkinkan Anda memeriksa DOM, melihat gaya, mengubah DOM dan bermain dengan konsol.

Untuk mengatur:

• Instal nodejs
• npm install -g weinre
• weinre --boundHost -all-
• Buka http: // {wifi-ip-address}: 8080 / dan salin kode skrip target
• Rekatkan tag skrip ke halaman Anda (atau gunakan bookmarklet)
• Klik tautan ke antarmuka pengguna klien debug (http: // {wifi-ip-address}: 8080 / client / # anonymous)
• Ketika Anda mendapatkan garis hijau di bawah Klien , browser terhubung

Bookmarklet sedikit lebih merepotkan untuk dipasang. Paling mudah jika sinkronisasi bookmark dinyalakan untuk Chrome desktop dan seluler. Salin URL bookmarklet dari server lokal kami (sama seperti di atas). Sayangnya itu tidak berfungsi karena tidak di-url dengan benar. Jadi buka konsol JavaScript dan ketik:

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

Anda sekarang harus memiliki bookmarklet yang dikodekan-url di clipboard Anda. Rekatkan ke bookmark baru di bawah Penanda Seluler . Sebut saja weinre atau sesuatu yang sederhana untuk diketik. Itu harus disinkronkan ke ponsel Anda cukup cepat, jadi muat halaman yang ingin Anda periksa. Kemudian ketikkan nama bookmark di bilah-url, dan Anda akan melihat bookmarklet sebagai saran lengkapi-otomatis. Klik untuk menjalankan kode bookmarklet :)

Anda tidak dapat secara langsung me-remote debug Chrome di iOS saat ini. Ini menggunakan uiWebView yang mungkin bertindak sedikit berbeda dari Mobile Safari.

Anda punya beberapa pilihan.

Opsi 1: Men-debug Mobile Safari menggunakan inspektur Safari. Jika masalah Anda mereproduksi di Mobile Safari, ini jelas merupakan cara terbaik untuk melakukannya. Bahkan, melalui simulator iOS bahkan lebih mudah.

Opsi 2: Gunakan Weinre untuk pengalaman debugging ramping . Weinre tidak memiliki banyak fitur tetapi kadang-kadang itu cukup bagus.

Opsi 3: Men-debug jarak jauh uiWebView yang berfungsi dengan baik.

Inilah cara terbaik untuk melakukan ini. Anda harus menginstal XCode .

1. Pergi ke github.com/paulirish/iOS-WebView-App dan "Unduh Zip" atau klon.
2. Buka XCode, buka proyek yang ada, dan pilih proyek yang baru saja Anda unduh.
3. Buka WebViewAppDelegate.m dan ubah urlStringmenjadi URL yang ingin Anda uji.
4. Jalankan aplikasi di iOS Simulator.
5. Buka Safari, Buka Menu Kembangkan , Pilih Simulator iOS dan pilih tampilan web Anda.
6. Safari Inspector sekarang akan memeriksa uiWebView Anda.

Dari pemahaman saya, Google Chrome menggunakan UIWebView iOS daripada implementasi penuh Chrome seperti mitra Android.

Banyak konsol jarak jauh berfungsi dengan baik. http://farjs.com adalah proyek saya, dan saya berhasil men-debug masalah khusus untuk Crome iOS dan tidak terjadi di safari menggunakannya. (dan mungkin semua peramban seluler lainnya)

Masalahnya adalah bahwa menyuntikkan kode debug sedikit rumit karena Chrome tidak memungkinkan Anda menginstal bookmarklet.

Alih-alih, Anda bisa membuka satu tab pada halaman yang akan Anda debug, dan satu lagi di farjs.com lalu klik "bookmarklet"

Salin kode JS bookmarklet, kembali ke tab pertama, dengan halaman yang harus didebug, dan rekatkan kode bookmarklet di bilah lokasi.

Langkah terakhir adalah menggulir ke awal bilah lokasi dan menambahkan "javascript:", karena Chrome akan menghapusnya.

Saya merekomendasikan Vorlon , bekerja seperti weinre. Saya suka UI Vorlon, dan mendukung SSL , aplikasi saya ada di HTTPS, saya mencoba weinre dengan ngrok, ghostlab dan vorlon, hanya vorlon yang berfungsi dengan baik.

Saya belum mencobanya, tetapi proksi debug iOS WebKit (ios_webkit_debug_proxy / iwdp) diduga memungkinkan Anda melakukan debug jarak jauh UIWebView. Dari README.md

Ios_webkit_debug_proxy (alias iwdp) memungkinkan pengembang untuk memeriksa MobileSafari dan UIWebViews pada perangkat iOS nyata dan disimulasikan melalui Chrome DevTools UI dan Chrome Remote Debugging Protocol. Permintaan DevTools diterjemahkan ke dalam panggilan layanan Inspektur Web Jarak Jauh Apple.

Vorlon.JS dapat digunakan untuk debugging jarak jauh iOS atau klien lain.

1. Cukup instal secara global menggunakan npm i -g vorlon
2. Mulai server menggunakan vorlon
3. Dengan server berjalan, buka http: // localhost: 1337 di browser Anda untuk melihat dasbor Vorlon.JS
4. Langkah terakhir adalah mengaktifkan Vorlon.JS dengan menambahkan tag skrip ini ke aplikasi Anda:
   <script src="http://<yourExternalIP>:1337/vorlon.js"></script>
5. Semua klien yang terhubung misalnya iPhone, Android akan tersedia dalam daftar klien di dasbor Vorlon.JS

Perhatikan bahwa pendekatan ini juga dapat digunakan untuk men-debug aplikasi yang tidak berjalan di localhost menggunakan ngrok . Lihat https://stackoverflow.com/a/45443203/2073920 untuk detailnya.

Penolakan

Saya hanya pengguna dan saya tidak berafiliasi dengan Vorlon.JS dan ngrok

Anda juga harus mematikan 'Penjelajahan Pribadi'.

Pengaturan> Safari> Penjelajahan Pribadi> OFF

Bahkan saya mencari fitur yang sama, dan sampai hari ini, belum diimplementasikan. Namun saya dapat memikirkan dua opsi,

1. Saya perhatikan bahwa perilaku Chrome dan Safari cukup identik; Chrome bahkan mendukung Giroskop dan acara terkait lainnya yang didukung oleh Safari. Saat ini saya sedang men-debug Aplikasi Web saya dengan mengaktifkan konsol debug di Safari (Melalui Pengaturan-> Safari)

2. Coba juga Adobe Shadow, yang memungkinkan debugging jarak jauh / inspeksi dan Sinkronisasi.

HTH.

Adobe Edge Inspect ( https://creative.adobe.com/products/inspect ) adalah cara lain untuk men-debug semua perangkat seluler Anda iOS dan Android (tidak ada Windows Phone sekalipun). Menggunakan weinre untuk inspeksi / pengubahan DOM jarak jauh. Ini bukan metode tercepat, tetapi bekerja pada Windows.

Ada bug terbuka di Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=584905

Sayangnya mereka bergantung pada Apple untuk membuka API di WKView agar hal ini terjadi, setelah itu mungkin debugging akan tersedia dari Safari.

Saya menggunakan remotedebug-ios-webkit-adapter, bekerja dengan baik untuk saya dengan iOS dan debugger terbuka di Chrome pada Windows 10.

Akan senang jika membantu seseorang Tautan

Catatan: Saya tidak memiliki afiliasi dengan pencipta Ghostlab, Vanamco.

Penting bagi saya untuk dapat men-debug masalah khusus Chrome, jadi saya mencari sesuatu yang dapat membantu saya. Saya dengan senang hati membuang uang saya di Ghostlab 3 . Saya dapat menguji browser seluler Chrome dan Safari seolah-olah saya melihatnya di desktop saya. Itu hanya memberi saya alamat LAN untuk digunakan untuk perangkat apa pun yang ingin saya debug. Setiap aplikasi yang menggunakan alamat itu akan muncul dalam daftar di Ghostlab.

Sangat dianjurkan.

Buka Safari Desktop iOS

Kembangkan -> Mode Desain Responsif

Klik "Lainnya" di bawah perangkat

Rekatkan ini: Mozilla / 5.0 (iPad; CPU OS 10_2_1 seperti Mac OS X) AppleWebKit / 602.1.50 (KHTML, seperti Gecko) CriOS / 56.0.2924.79 Mobile / 14D27 Safari / 602.1

Gunakan alat inspeksi Safari.

Penafian: Saya bekerja di BrowserStack. ^{[Dikonfirmasi] bahwa apakah saya diperbolehkan memposting ini ( Dapatkah saya menyarankan produk perusahaan yang sedang bekerja? )}

Debug Safari di iOS (bukan untuk Chrome seperti sekarang, baca lebih lanjut untuk detail lebih lanjut.)

Bagaimana ini bekerja?

• Anda harus memulai sesi di perangkat nyata (ada emulator tetapi Anda harus memulai sesi di perangkat nyata) di BrowserStack, katakanlah iPhone 6S - Safari / Chrome (belum ada devtools untuk Chrome, tetapi ini ada di Peta Jalan kami)
• Ketikkan URL
• Anda dapat memicu DevTools untuk memeriksa halaman web yang dibuka pada perangkat jarak jauh BrowserStacks. Saya telah berbagi layar untuk hal yang sama di bawah ini.

Menggunakan DevTools dengan Ponsel Sungguhan

Arahkan kursor ke elemen, edit HTML, CSS seperti halnya browser desktop devtools berfungsi.

Menjalankan JavaScript di ponsel asli menggunakan DevTools

Beralih ke Consoletab, jalankan kode JavaScript, periksa console.log()output dan seterusnya ...

Tab jaringan, periksa tajuk permintaan, respons, dan sebagainya ...

Dukungan untuk DevTools di BrowserStack?

• DevTools tersedia di:

  • Perangkat Nyata - iOS - Safari (DevTools untuk iOS Chrome ada di Roadmap kami)
  • Perangkat Nyata - Android - Chrome (Hanya Chrome yang tersedia di perangkat Android untuk saat ini)

• Browser klien harus Chrome atau Firefox. Itu berarti Anda perlu menggunakan browser Chrome atau Firefox di MacOSX atau Windows untuk menggunakan BrowserStack Real Device DevTools.

Catatan: Anda harus membeli paket untuk menguji pada semua perangkat nyata, sebagai pengguna gratis, Anda akan mendapatkan beberapa perangkat Android Nyata (termasuk tablet) dan beberapa perangkat iOS Nyata (termasuk tablet). Juga, menekankan pada kata Perangkat Nyata karena mereka memberikan emulator juga.

Lebih detail tentang ini, silakan merujuk ke bagian DevTools pada halaman Fitur Mobile .