Menjadi pengembang web di dunia saat ini berarti mendukung perkumpulan perangkat dan platform, yang terkadang terbukti menjadi tugas yang menakutkan. Bahkan dengan kode yang dirancang paling baik mengikuti standar web terbaru, Anda masih dapat menemukan bahwa bagian dari situs web Anda mungkin tidak terlihat atau bertindak seperti yang Anda inginkan pada perangkat atau resolusi tertentu. Ketika dihadapkan pada tantangan untuk mendukung beragam skenario, memiliki alat simulasi yang tepat yang dapat Anda gunakan sangat berharga.
Jika Anda adalah salah satu dari banyak programmer yang menggunakan Mac, toolset pengembang Safari selalu berguna. Dengan diluncurkannya Safari 9, luasnya fungsi ini telah berkembang pesat, terutama karena Mode Desain Responsif, yang memungkinkan Anda untuk meninjau bagaimana situs Anda akan ditampilkan pada berbagai resolusi layar serta pada iPad, iPhone dan iPod touch yang berbeda.
Tutorial ini menjelaskan cara mengaktifkan Mode Desain Responsif serta cara memanfaatkannya untuk kebutuhan pengembangan Anda.
Preferensi Safari
Pertama, buka peramban Safari Anda.
Klik Safari di menu browser, yang terletak di bagian atas layar. Ketika menu drop-down muncul, pilih Preferensi pilihan dilingkari dalam contoh yang ditunjukkan.
Catatan: Anda dapat menggunakan pintasan keyboard berikut sebagai pengganti item menu yang disebutkan di atas: COMMAND + COMMA (,)
02 dari 05Tampilkan Menu Pengembangan
Dialog Preferensi Safari sekarang harus ditampilkan, overlay jendela browser Anda. Pertama, klik pada Maju ikon diwakili oleh roda gigi dan terletak di sudut kanan atas jendela.
Preferensi Lanjutan browser sekarang seharusnya sudah terlihat. Di bagian bawah adalah opsi yang disertai dengan kotak centang, berlabel Tampilkan menu Kembangkan di bilah menu dan dilingkari pada contoh di atas. Klik pada kotak centang sekali untuk mengaktifkan menu ini.
03 dari 05Masukkan Mode Desain Responsif
Opsi baru sekarang harus tersedia di menu Safari Anda, yang terletak di bagian atas layar, berlabel Mengembangkan. Klik pada opsi ini.
Ketika menu drop-down muncul, pilih Masukkan Mode Desain Responsifdilingkari dalam contoh yang ditunjukkan.
Catatan: Anda dapat menggunakan pintasan keyboard berikut sebagai pengganti item menu yang disebutkan di atas:OPSI + COMMAND + R
04 dari 05Mode Desain Responsif
Halaman web yang aktif sekarang harus ditampilkan dalam Mode Desain Responsif, seperti yang ditunjukkan pada contoh di atas. Dengan memilih salah satu perangkat iOS yang terdaftar seperti iPhone 6, atau salah satu resolusi layar yang tersedia seperti 800 x 600, Anda dapat segera melihat bagaimana halaman akan ditampilkan pada perangkat itu atau dalam resolusi layar itu.
Selain perangkat dan resolusi yang ditunjukkan, Anda juga dapat memerintahkan Safari untuk mensimulasikan agen pengguna yang berbeda - seperti dari peramban yang berbeda - dengan mengeklik menu tarik-turun yang ditampilkan tepat di atas ikon resolusi.
05 dari 05Menu Pengembangan: Opsi Lainnya
Selain Mode Desain Responsif, menu Pengembangan Safari 9 menawarkan banyak opsi berguna lainnya, beberapa di antaranya tercantum di bawah ini.
- Buka Halaman Dengan: Memungkinkan Anda membuka halaman web aktif di browser lain yang saat ini terinstal di Mac Anda.
- Agen pengguna: Mengubah agen pengguna menyebabkan server Web mengidentifikasi browser Anda sebagai sesuatu selain Safari 9.
- Hubungkan Inspektur Web: Inspektur Web Safari 9 menampilkan semua sumber daya halaman web, menyediakan kemampuan untuk membaca dengan teliti informasi CSS, metrik DOM, dan struktur, serta kode sumber aslinya.
- Tampilkan Konsol Kesalahan: Salah satu opsi yang paling banyak digunakan di Menu Pengembangan, konsol ini menampilkan kesalahan dan peringatan JavaScript, HTML, dan XML.
- Tampilkan Sumber Laman: Memungkinkan Anda untuk melihat dan mencari kode sumber halaman Web aktif.
- Tampilkan Sumber Daya Laman: Memilih opsi ini akan menampilkan dokumen, skrip, CSS, dan sumber daya lainnya dari halaman saat ini.
- Tampilkan Editor Cuplikan: Menyediakan kemampuan untuk mengedit dan mengeksekusi fragmen kode, sebagai lawan dari halaman yang lengkap. Fitur ini sangat berguna dari perspektif pengujian.
- Tampilkan Pembuat Ekstensi: Memungkinkan Anda untuk membangun ekstensi Safari sendiri dengan mengemas kode Anda sesuai dan menambahkan metadata.
- Mulai Perekaman Timeline: Merekam sejumlah item termasuk permintaan jaringan, eksekusi JavaScript, rendering halaman, dan acara lainnya untuk periode yang ditentukan oleh pengguna, semua dapat dilihat dalam Inspektur WebKit.
- Cache Kosong: Mengeklik opsi ini akan menghapus semua cache yang disimpan dalam Safari, bukan hanya file cache situs web standar.
- Nonaktifkan Cache: Dengan cache dinonaktifkan, sumber daya diunduh dari situs web setiap kali permintaan akses dibuat sebagai lawan untuk memanfaatkan cache lokal.
- Izinkan JavaScript dari Bidang Penelusuran Cerdas: Dinonaktifkan secara default karena alasan keamanan, fitur ini memungkinkan Anda memasukkan URL yang berisi JavaScript di bilah alamat Safari.
- Perlakukan Sertifikat SHA-1 sebagai Tidak Aman: Singkat untuk Secure Hash Algorithm, fungsi hash SHA-1 telah terbukti kurang aman dari dugaan semula, sehingga penambahan opsi ini di Safari 9.
