Cara Menggunakan Web Inspector untuk Debug Mobile Safari (iPhone atau iPad)

Mengembangkan halaman web untuk perangkat seluler atau men-debug aplikasi hybrid Anda seringkali sulit. Tapi untungnya bagi orang-orang yang mendesain di iOS, memulai kembali dengan iOS 6, Apple menawarkan fitur inspektur web jarak jauh di iOS.

Web Inspector memungkinkan pengembang web dan aplikasi seluler menggunakan macOS dan Alat Pengembang Safari OS X untuk men-debug konten web atau aplikasi hibrida dari jarak jauh di Safari seluler di iPad atau iPhone.

Ini adalah cara mudah dan praktis untuk men-debug, mengoptimalkan, dan memodifikasi halaman web atau aplikasi hybrid Anda di iOS.

Untuk mengakses alat pengembangan ini, aktifkan menu Kembangkan di preferensi Lanjutan Safari Mac Anda.

Kiat cepat

Ikuti kiat cepat ini agar pemeriksa web berfungsi sehingga Anda dapat men-debug situs atau aplikasi Anda untuk Safari

• Atur ulang pengaturan lokasi dan privasi Anda di iPhone, iPad, atau iPod touch. Pergi ke Pengaturan > Umum > Atur Ulang > Atur Ulang Lokasi & Privasi
• Pastikan Anda masuk ke ID Apple yang sama di komputer dengan iPhone, iPad, atau iPod touch
• Aktifkan penyelarasan Safari iCloud untuk komputer dan semua iPhone, iPad, atau iPod touch
• Di iPhone atau iPad, buka Pengaturan > Safari > Lanjut dan aktifkan Inspektur Web
• Di komputer, buka Safari dan buka Menu Safari > Preferensi > Lanjutan dan tanda centang Tampilkan menu Kembangkan di bilah menu

Artikel Terkait

• Lihat Kode Sumber HTML Halaman Web di iPad atau iPhone. Tidak Diperlukan Aplikasi!
• Cara Melihat Kode Sumber HTML di Safari
• Cara Melihat Favicons di Safari untuk iPhone dan Mac

Diperlukan Komputer Mac

Maaf orang-orang Windows tetapi Inspektur Web Safari hanya kompatibel dengan Mac!

Gunakan ID Apple dan Sinkronisasi iCloud yang Sama!

Pastikan iDevice dan Mac Anda masuk dengan ID Apple yang sama dan Anda mengaktifkan Safari di iCloud.

Untuk iDevice Anda: Pengaturan > Profil ID Apple > iCloud > Safari > diaktifkan

Untuk Mac Anda: Menu Apple > Preferensi Sistem > ID Apple atau iCloud > Safari > Dicentang

Dan Periksa apakah Safari adalah Versi yang Sama Juga

Pastikan Safari di Mac Anda memiliki versi yang sama dengan Safari di iDevice Anda. Anda mungkin perlu memperbarui versi iOS atau versi Safari yang berjalan di Mac Anda.

Setel ulang pengaturan lokasi dan privasi Anda

1. Pergi ke Pengaturan > Umum
2. Pilih Mengatur ulang
3. Memilih untuk Atur Ulang Lokasi & Privasi

Tip Pintasan Keyboard Pro di Mac untuk Pengembang Web

Jika Anda menekan CTRL+Command+R di Safari, Anda dapat melihat tampilan situs web pada perangkat tertentu dengan memilih perangkat tersebut.

Gunakan Web Inspector untuk men-debug Safari seluler

1. Di iPad, iPhone, atau iPod touch, ketuk Pengaturan > Safari > Lanjut dan aktifkan Inspektur Web. Dan aktifkan JavaScript jika belum aktif

2. Di Mac Anda, luncurkan Safari dan buka Menu Safari > Preferensi > Lanjutan lalu periksa “Tampilkan menu Kembangkan di bilah menu”jika kamu belum melakukannya

3. Hubungkan perangkat iOS Anda ke Mac Anda dengan kabel USB. Ini sangat penting–Anda harus menghubungkan perangkat secara manual, menggunakan kabel. Ini tidak bekerja melalui WiFi!

4. Sekarang di iPad Anda, buka situs web yang ingin Anda debug, lalu, di Mac Anda, buka Safari dan buka "Mengembangkan" Tidak bisa. Anda sekarang melihat iDevice Anda yang terhubung dengan Mac Anda. Jika Anda tidak memiliki halaman apa pun yang terbuka di iDevice Anda, Anda akan melihat pesan yang mengatakan “No Inspectable Applications.”

5. Sekarang debug halaman yang terbuka di Safari seluler sama seperti Anda melakukan debug di Mac, memeriksa elemen DOM, memodifikasi CSS, mengukur kinerja halaman, dan menjalankan perintah Javascript.

Gunakan alat debugger untuk membantu Anda menemukan penyebab kesalahan JavaScript di halaman web Anda. Anda dapat menambahkan breakpoint, men-debug javascript dan memeriksa nilai variabel saat runtime.

Safari juga harus mendeteksi kesalahan CSS, HTML, dan JavaScript. Dan Anda akan melihat detail setiap kesalahan di debugger.

iDevice Tidak Muncul di Menu Kembangkan di Safari?

•  Bersihkan cache dan cookie Safari Anda
• Perbarui Safari di Mac dan iDevice Anda jika pembaruan tersedia.
  • Jika Anda menjalankan versi beta iOS atau macOS, Anda mungkin perlu menjalankan beta terbaru di semua perangkat
• Coba kabel dan/atau port lain di Mac Anda. Pastikan bahwa kabel adalah kabel petir Apple asli atau Bersertifikat MFI (Dibuat Untuk iPhone)
• Periksa apakah Web Inspector dalam keadaan AKTIF. Pembaruan iOS terkadang mengalihkan ini kembali ke pengaturan OFF default. Jadi pastikan untuk memeriksa Pengaturan > Safari > Lanjutan > Web Inspector
  • Coba matikan Inspektur Web, tunggu 10 detik, dan aktifkan kembali
• Coba browser Pratinjau Teknologi Safari sebagai gantinya
• Keluar dari Safari di Mac Anda dan mulai ulang. Lihat apakah Safari Mac Anda kemudian mengenali perangkat Anda dan memungkinkan debugging
• Pastikan Anda tidak menggunakan mode Penjelajahan Pribadi Safari if iDevice Anda hanya muncul sebentar di menu Kembangkan Safari dan kemudian menghilang
• Buka Monitor Aktivitas dan periksa apa yang terjadi dengan Safari

Kiat Pembaca 

• Jika Anda menggunakan iDevice lama dengan iOS 6 atau lebih lama, browser web Safari perangkat Anda memiliki Konsol Debug bawaan! Cukup akses Konsol Debug Safari dengan membuka Pengaturan > Safari > Pengembang > Konsol Debug