Dalam panduan ini, saya ingin memberi Anda gambaran mendalam tentang cara menggunakan alat pengembang Safari. Meskipun alat pengembang di Safari memiliki beberapa perbedaan dibandingkan dengan yang ada di Chrome dan Firefox, prinsip dasarnya tetap sama. Anda akan mempelajari cara mengaktifkan alat pengembang, menggunakan berbagai area dan fungsi, serta mengimplementasikan proses debugging yang penting. Mari kita mulai dengan wawasan yang paling penting.
Temuan paling penting
- Alat Pengembang di Safari tidak dapat diakses dengan mudah seperti di peramban lain, karena harus diaktifkan melalui pengaturan.
- Antarmuka pengguna dan fitur-fitur Alat Pengembang serupa dengan peramban lain, tetapi implementasi spesifiknya berbeda-beda.
- Debugging pada perangkat iOS dapat dilakukan dengan Safari dengan menyambungkan perangkat melalui USB.
Petunjuk langkah demi langkah
1. Aktifkan Alat Pengembang di Safari
Untuk mengaktifkan Alat Pengembang di Safari, Anda perlu menyesuaikan pengaturan Safari. Mulai Safari dan buka bar menu. Pilih "Safari" lalu "Preferensi".
Beralih ke tab "Advanced" di bagian paling kanan. Di sana Anda akan menemukan opsi "Tampilkan fitur pengembangan untuk pengembang web". Aktifkan opsi ini untuk mengaktifkan Alat Pengembang.
2. Akses ke Alat Pengembang
Setelah Developer Tools diaktifkan, Anda dapat membukanya melalui menu "Develop" pada menu bar atau dengan menggunakan kombinasi tombol tertentu. Akses langsung melalui tombol F12 atau Alt-Cmd-I tidak berfungsi, tetapi Anda dapat, misalnya, klik kanan pada elemen dan pilih "Periksa elemen".
Anda juga dapat menggunakan kombinasi tombol Cmd+Option+C untuk membuka konsol dan beralih bolak-balik di antara tampilan yang berbeda.
3. Navigasi melalui Alat Pengembang
Meskipun antarmuka pengguna Developer Tools terlihat mirip dengan apa yang biasa Anda gunakan di browser lain, namun ada beberapa perbedaan khusus. Di bilah sisi kiri, Anda dapat beralih di antara tab "Elemen", "Konsol", "Sumber", "Jaringan", dan lainnya.
Di sini Anda bisa mempelajari lebih lanjut tentang elemen-elemen situs web untuk melihat dan mengedit gaya dan tata letaknya. Anda dapat mengedit setiap gaya hanya dengan mengeklik aturan CSS yang sesuai.
4. Bekerja dengan konsol
Konsol di Safari memungkinkan Anda untuk menjalankan kode JavaScript dan menampilkan output yang diinginkan. Aspek yang menarik adalah pemformatan output berbeda di sini. Argumen pertama ditampilkan sebagai teks, sedangkan semua argumen berikutnya ditampilkan sebagai objek JavaScript.
Jika Anda menampilkan pesan log tambahan, pastikan tampilan tidak memiliki spasi di antara masing-masing argumen, tetapi dipisahkan dengan tanda hubung. Hal ini penting untuk menghindari kesalahpahaman selama debugging.
5. Mengatur kode sumber dan breakpoint
Pada tab "Sources", Anda bisa melihat berkas asli dan berkas yang di-translate dari situs web Anda. Anda juga dapat mengatur breakpoints di sini untuk mempermudah debugging. Untuk melakukannya, cukup klik pada baris kode yang sesuai.
Jangan lupa untuk menggunakan berbagai kontrol untuk mempermudah Anda melangkah di dalam kode. Di Safari, pintasan untuk melangkah berbeda; gunakan ikon tertentu sebagai gantinya.
6. Melakukan analisis jaringan
Tab "Jaringan" memberi Anda informasi lengkap tentang semua permintaan yang dibuat halaman Anda selama waktu pemuatan. Di sini Anda bisa melihat permintaan yang dikirim dan diterima, serta tajuk dan pratinjau.
Fitur yang menarik di sini adalah perbedaan antara header dan pengaturan waktu, yang memberi Anda wawasan lebih dalam tentang kinerja situs Anda.
7. Gunakan pengukuran kinerja dan garis waktu
Pada tab "Garis Waktu", Anda bisa melakukan analisis performa yang ekstensif dan membuat rekaman untuk lebih memahami kecepatan dan proses pada situs Anda.
Fungsi ini bekerja dengan cara yang mirip dengan profil kinerja di peramban lain, tetapi Anda mungkin harus membiasakan diri dengan beberapa perbedaan tampilan dan penamaan.
8 Melakukan debug pada perangkat seluler
Sorotan khusus dari Alat Pengembang Safari adalah kemampuan untuk men-debug situs web di iPhone atau iPad Anda. Hubungkan perangkat Anda melalui USB dan aktifkan opsi debugging yang sesuai di pengaturan perangkat.
Kemudian buka menu "Develop" dan pilih perangkat yang terhubung untuk mendapatkan akses ke jendela yang terbuka dan Alat Pengembangnya.
Ringkasan
Dalam panduan terperinci ini, Anda telah mempelajari cara mengaktifkan Alat Pengembang Safari, menggunakan berbagai fungsi dan tab, serta melakukan debugging pada perangkat seluler. Sebagian besar fungsinya mirip dengan alat di peramban lain, tetapi ada perbedaan spesifik, terutama dalam antarmuka pengguna dan pintasan. Setelah Anda membiasakan diri dengan semua ini, Anda akan segera dapat melakukan debug di Safari.
