Debugging Jarak Jauh iOS


199

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 .


2
Remote debugging sekarang dapat dilakukan dengan Safari di Mac. Tetapi jika Anda mengembangkan di Linux atau Windows Anda masih harus menggunakan weinre (seperti yang dinyatakan dalam jawabanregreg).
Dehalion

3
Debugging jarak jauh dengan Safari hanya mendukung Mobile Safari, bukan iOS Chrome.
Matt Jensen

Jawaban:


111

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


11
Yap, saya sudah menggunakan yang ini. Akhirnya! Ini menyebalkan bahwa versi windows Safari tidak memilikinya sekalipun.
Hyangelo

5
Saya berharap Chrome akan segera mengaktifkan fitur yang sama, sehingga berfungsi di semua OS.
F Lekschas

49
Ya - tentu akan menyenangkan jika ini menjawab pertanyaan yang diajukan!
Irene Knapp

4
Menonaktifkan penelusuran pribadi tidak lagi menjadi persyaratan.
Miles

3
Alasan downvote: Pertanyaan meminta Chrome bukan Safari.
NickG

230

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.

masukkan deskripsi gambar di sini

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 :)

masukkan deskripsi gambar di sini


27
Ini adalah satu-satunya jawaban yang benar, semua yang lain berhubungan dengan Safari (berjalan di taman)
Mars Robertson

2
Instruksi sangat membantu! Saya hanya akan menambahkan itu, untuk menginstal bookmarklet, alih-alih melakukan salin, Anda cukup menyeret tautan bookmarklet "weinre target debug" yang disediakan ke bilah alat bookmark Anda (buat bilah alat terlihat dengan Ctrl-Shift-Bjika tidak terlihat).
Kai Carver

Saya perlu menyegarkan peramban setelah menginstal bookmarklet agar berfungsi.
ooolala

npm install -g weinretidak bekerja untuk saya. Jadi saya harus menjalankannya dengan versi npm install -g weinre@2.0.0-pre-I0Z7U9OV. periksa versi terbaru di sini npmjs.com/package/weinre .
vinesh

1
FWIW, weinre saat ini tidak mendukung bayangan dom - itu hanya menunjukkan elemen tingkat atas dan dom cahaya mereka. Ini juga tidak berfungsi untuk dom teduh selain dari elemen tingkat atas dan dom teduh mereka (dan dom cahaya juga).
Max Waterman

52

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.

masukkan deskripsi gambar di sini

masukkan deskripsi gambar di sini

masukkan deskripsi gambar di sini


7
Bagaimana cara memeriksa iOS (iPhone / iPad) pada Windows menggunakan chrome? Apakah ada metode untuk itu?
Surjith SM

@ SurjithSM Jawaban ini tidak akan membantu dengan windows sementara Anda tidak dapat menginstal XCode di windows dan membuat aplikasi ios. Coba ini sebagai ganti stackoverflow.com/a/22047495/1737158
Lukas Liesis

Saya sudah memiliki pengalaman dengan github.com/google/ios-webkit-debug-proxy yang merupakan alat yang luar biasa, dan kemarin mencoba men- debug Google Chrome dengan iOS Emulator - ini pengalaman yang paling menakjubkan. Terima kasih untuk # 3
Oleg Andreyev

10

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


1
Ya, menemukan itu setelah saya mengajukan pertanyaan ini. Sungguh memalukan bagi apel. Saya membiarkan pertanyaan ini terbuka jika seseorang menemukan cara untuk melakukannya.
Hyangelo

4

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.


4

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.


3

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.


1
Dukungan untuk webview Chrome secara teoritis diimplementasikan melalui: github.com/RemoteDebug/remotedebug-ios-webkit-adapter yang dibangun di atas proxy debug webkit iOS. Sejauh ini saya sendiri sudah berhasil dengan proyek itu, tetapi saya berharap itu akan menjadi lebih baik.
Matt Jensen

3

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 masukkan deskripsi gambar di sini

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


Saya mengikuti semua langkah tetapi pandangan iPhone saya tidak terdeteksi di VorlonJS yang berjalan di Mac
Amarjit Singh

2

Anda juga harus mematikan 'Penjelajahan Pribadi'.

Pengaturan> Safari> Penjelajahan Pribadi> OFF


tidak yakin mengapa turunkan jawaban ini. penjelajahan pribadi memang perlu dimatikan untuk memungkinkan debugging jarak jauh.
basecode

14
@basecode Karena ini adalah jawaban pelengkap yang seharusnya ada di komentar.
GusDeCooL

2
@GusDeCooL saya mengerti, terima kasih! Sebuah komentar oleh downvoter yang menjelaskan ini akan sangat membantu.
basecode

0

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.


0

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.


Adobe Edge Inspect tidak lagi terdaftar di Adobe Creative Cloud. Lihat adobe.com/products/edge-inspect.html .
Ron Inbar

Benar, namun Anda masih dapat mengunduhnya dengan berlangganan saat ini, meskipun faktanya tidak lagi dalam pengembangan. Lihat bagaimana melakukannya di sini: helpx.adobe.com/creative-cloud/kb/…
HumbleBeginnings

Namun, aplikasi iOS tidak lagi tersedia. Masih bekerja di Android, tetapi tidak ada lagi iOS: itunes.apple.com/app/id498621426
bg17aw


0

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


0

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.

masukkan deskripsi gambar di sini

masukkan deskripsi gambar di sini

Sangat dianjurkan.


-2

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.


-3

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.

DevTools di ponsel asli, debugging situs web responsif.


Menjalankan JavaScript di ponsel asli menggunakan DevTools

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

jalankan JavaScript di ponsel asli menggunakan devtools


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

Tab jaringan untuk memeriksa permintaan


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 .


3
Dia meminta debug chrome di iOS. Saya adalah pelanggan yang menggunakan browser dan memiliki Mac sehingga debugging Safari di iOS dimungkinkan, tetapi chrome tidak menutup kemungkinan untuk debugable dari jarak jauh
fabs

@fab Kami memilikinya di peta jalan kami. Juga, saya telah menyebutkan bahwa itu hanya berfungsi pada Safari - perangkat iOS, dan Chrome untuk perangkat Android :)
Tn. Alien

Untuk masalah tata letak, ini seharusnya tidak menjadi masalah karena mesin tata letak kedua browser adalah webkit. Dikombinasikan dengan fitur Pengujian Server Lokal ini tidak memerlukan pengaturan tambahan untuk debug localhost.
Tim Vermaelen

1
Jawabannya tidak menjawab pertanyaan itu. Meskipun Browserstack memang menyediakan layanan yang hebat, jawaban ini sepenuhnya di luar topik.
Matt Jensen
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.