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

Membangun laman web untuk peranti mudah alih atau menyahpasang aplikasi hibrid anda sering sukar. Tetapi bernasib baik untuk orang yang mereka bentuk pada iOS, bermula kembali dengan iOS 6, Apple menawarkan ciri pemeriksa web jauh di iOS.

Inspektor Web membenarkan pemaju aplikasi web dan mudah alih menggunakan MacOS dan OS X Alat Pengembang Safari untuk mengepam kandungan web atau aplikasi hibrid jauh di Safari mudah alih pada iPad atau iPhone.

Ini cara mudah dan praktikal untuk debug, mengoptimumkan dan mengubah suai laman web anda atau apl hibrid pada iOS.

Untuk mengakses alat pembangunan ini, aktifkan menu Kembangkan pada pilihan Advanced Mac Safari anda.

Ikut petua cepat ini untuk mendapatkan pemeriksa web yang berfungsi supaya anda boleh debug laman atau apl anda untuk Safari

  • Tetapkan semula tetapan lokasi dan privasi anda pada iPhone, iPad atau sentuhan iPod anda. Pergi ke Seting> Umum> Tetapkan semula> Tetapkan semula Lokasi & Privasi
  • Pastikan anda melog masuk ke Apple ID yang sama pada komputer seperti iPhone, iPad, atau iPod touch anda
  • Hidupkan penyegerakan Safari iCloud untuk kedua-dua komputer dan mana-mana iPhone, iPad, atau iPod touch
  • Pada iPhone atau iPad, pergi ke Tetapan> Safari> Lanjutan dan togol pada Inspektor Web
  • Pada komputer, buka Safari dan pergi ke menu Safari> Keutamaan> Papar dan tanda centang Show Show di menu bar

Mac Komputer Diperlukan

Maaf orang Windows tetapi Inspektor Web Safari hanya serasi dengan Mac!

Gunakan Sama Apple ID dan iCloud Sync!

Pastikan kedua-dua iDevice anda dan Mac anda telah masuk dengan Apple ID yang sama dan anda bertukar ke ON Safari dalam iCloud.

Untuk iDevice anda: Tetapan> Profil ID Apple> iCloud> Safari > bertukar ON

Untuk Mac anda: Menu Apple> Pilihan Sistem> ID Apple atau iCloud> Safari> Tanda Semula

Dan Semak Safari adalah Versi Sama Terlalu

Pastikan Safari pada Mac anda adalah versi yang sama dengan Safari pada iDevice anda. Anda mungkin perlu mengemas kini versi iOS anda atau versi Safari anda berjalan pada Mac anda.

Tetapkan semula tetapan lokasi dan privasi anda

  1. Pergi ke Tetapan> Umum
  2. Pilih Reset
  3. Pilih untuk Tetapkan Semula Lokasi & Privasi

Tip Keyboard Shortcut Pro pada Mac untuk Devs Web

Jika anda menekan CTRL + Command + R di Safari, anda dapat melihat bagaimana sebuah laman web akan melihat pada peranti tertentu dengan memilih peranti tersebut.

Togol pintasan papan kekunci untuk keluar dari pandangan dev web.

Gunakan Web Inspektor untuk mengecas Safari mudah alih

1. Pada iPad, iPhone atau iPod touch anda, ketik Tetapan> Safari> Lanjutan dan togol pada Inspektor Web. Dan aktifkan JavaScript jika belum lagi

2. Pada Mac anda, luncurkan Safari dan pergi ke menu Safari> Keutamaan> Lanjutan kemudian semak " Show Develop menu dalam menu bar " jika anda belum melakukannya

3. Sambungkan peranti iOS anda ke Mac anda dengan kabel USB. Ini penting-anda mesti menyambungkan peranti secara manual, menggunakan kabel. Ia tidak berfungsi melalui WiFi!

4. Kini pada iPad anda, buka laman web yang ingin anda debug, kemudian, pada Mac anda, buka Safari dan pergi ke menu " Membangun ". Anda kini melihat iDevice anda yang anda sambungkan dengan Mac anda. Jika anda tidak mempunyai apa-apa halaman yang terbuka pada iDevice anda, anda akan melihat mesej yang mengatakan "Tiada Aplikasi Yang Boleh Diamati."

5. Sekarang debug halaman yang terbuka pada Safari mudah alih sama seperti anda akan debug pada Mac, memeriksa elemen DOM, ubah suai CSS, mengukur prestasi halaman dan jalankan perintah Javascript.

Gunakan alat debugger untuk membantu anda mencari punca sebarang ralat JavaScript pada halaman web anda. Anda boleh menambah titik putus, debug javascript dan periksa nilai pembolehubah semasa runtime.

Safari juga harus mengesan sebarang ralat CSS, HTML, dan JavaScript. Dan anda akan melihat butiran setiap ralat dalam debugger.

iDevice Not Showing Up dalam Membangun Menu di Safari?

  • Kosongkan cache dan kuki Safari anda
  • Kemas kini Safari pada Mac dan iDevice anda jika kemas kini tersedia
    • Jika anda menjalankan beta iOS atau versi macOS, anda mungkin perlu menjalankan beta terkini pada semua peranti
  • Cuba kabel dan / atau port lain pada Mac anda. Pastikan kabel itu adalah kabel kilat Apple tulen atau MFI Certified (Made For iPhone)
  • Semak bahawa Inspektor Web ditumpuk ON. Kemas kini iOS kadang-kadang togol kembali ini ke tetapan lalai OFF. Jadi pastikan anda menyemak Tetapan> Safari> Advanced> Web Inspector
    • Cuba toggling Web Inspector Off, tunggu 10 saat, dan toggle kembali
  • Cuba pelayar Preview Teknologi Safari sebaliknya
  • Berhenti Safari pada Mac anda dan mulakannya semula. Lihat jika Safari Mac anda kemudian mengenali peranti anda dan membolehkan penyahpepijatan
  • Semak bahawa anda tidak menggunakan mod Pelayaran Persendirian Safari jika iDevice anda hanya muncul secara ringkas dalam menu Safari's Develop and then disappears
  • Monitor Aktiviti Terbuka dan periksa apa yang sedang berlaku dengan Safari

Petua Pembaca

  • Jika anda menggunakan iDevice yang lebih lama dengan iOS 6 atau lebih awal, pelayar web Safari peranti anda mempunyai Konsol Debug terbina dalamnya sendiri! Cuma akses Konsol Debug Safari dengan pergi ke Tetapan > Safari > Pemaju > Konsol Debug