Cara Menggunakan Inspektur Web ke 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, mulai dari iOS 6, Apple menawarkan fitur pengawas web jarak jauh di iOS.

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

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

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

Ikuti kiat cepat ini agar inspektur 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 Anda. Buka Pengaturan> Umum> Atur Ulang> Atur Ulang Lokasi & Privasi
  • Pastikan Anda masuk ke ID Apple yang sama di komputer seperti iPhone, iPad, atau iPod touch Anda
  • Aktifkan penyelarasan Safari iCloud untuk komputer dan iPhone, iPad, atau iPod touch
  • Pada iPhone atau iPad, buka Pengaturan> Safari> Tingkat Lanjut dan beralih di Web Inspektur
  • Di komputer, buka Safari dan buka menu Safari> Preferences> Advanced dan centang centang Show Develop menu di bilah menu

Diperlukan Komputer Mac

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

Gunakan ID Apple yang Sama dan Sinkronisasi iCloud!

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

Untuk iDevice Anda: Pengaturan> Profil ID Apple> iCloud> Safari > toggled ON

Untuk Mac Anda: Apple Menu> System Preferences> Apple ID atau iCloud> Safari> Checkmarked

Dan periksa apakah Safari juga versi yang sama

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

Setel ulang pengaturan lokasi dan privasi Anda

  1. Buka Pengaturan> Umum
  2. Pilih Reset
  3. Pilih untuk Mengatur Ulang Lokasi & Privasi

Tip Shortcut Keyboard Pro pada Mac untuk Pengembang Web

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

Alihkan pintasan keyboard untuk keluar dari tampilan dev web.

Gunakan Web Inspector untuk men-debug Safari seluler

1. Di iPad, iPhone atau iPod touch Anda, ketuk Pengaturan> Safari> Tingkat lanjut dan beralih di Web Inspektur. Dan aktifkan JavaScript jika belum aktif

2. Di Mac Anda, luncurkan Safari dan buka menu Safari> Preferensi> Tingkat Lanjut lalu centang “ Tampilkan menu Kembangkan di bilah menu ” jika Anda belum melakukannya

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

4. Sekarang di iPad Anda, buka situs web yang ingin Anda debug, lalu, di Mac Anda, buka Safari dan buka menu " Develop ". Anda sekarang melihat iDevice Anda yang terhubung dengan Mac Anda. Jika Anda tidak memiliki halaman apa pun terbuka di iDevice Anda, Anda melihat pesan yang mengatakan "Tidak Ada Aplikasi yang Dapat Diperiksa."

5. Sekarang debug halaman yang terbuka di Safari seluler sama seperti Anda akan debug pada Mac, periksa elemen DOM, modifikasi CSS, ukur kinerja halaman dan jalankan perintah Javascript.

Gunakan alat debugger untuk membantu Anda menemukan penyebab kesalahan JavaScript di halaman web Anda. Anda dapat menambahkan breakpoints, 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 dalam 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 tersebut adalah kabel petir Apple asli atau MFI Certified (Made For iPhone)
  • Periksa apakah Inspektur Web dimatikan. Pembaruan iOS terkadang mengubah ini kembali ke pengaturan OFF default. Jadi pastikan untuk memeriksa Pengaturan> Safari> Lanjutan> Inspektur Web
    • Coba matikan Web Inspector Off, tunggu 10 detik, dan hidupkan kembali
  • Coba browser Safari Technology Preview
  • 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 jika iDevice Anda hanya muncul sebentar di menu Kembangkan Safari dan kemudian menghilang
  • Buka Activity Monitor dan periksa apa yang terjadi dengan Safari

Kiat Pembaca

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