01 06
Aktifkan dan Gunakan Mode Desain Responsif di Safari 9
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-bagian 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 Modus 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.
Pertama, buka peramban Safari Anda.
02 06
Preferensi Safari
Klik pada Safari di menu browser, yang terletak di bagian atas layar. Ketika menu drop-down muncul, pilih Preferences option_ dilingkari pada contoh di atas.
Harap perhatikan bahwa Anda dapat menggunakan pintasan keyboard berikut ini sebagai pengganti item menu yang disebutkan di atas: COMMAND + COMMA (,)
03 06
Tampilkan Menu Pengembangan
Dialog Preferensi Safari sekarang harus ditampilkan, overlay jendela browser Anda. Pertama, klik pada ikon Tingkat Lanjut_ 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, bertuliskan menu Tampilkan Pengembangan di bilah menu dan dilingkari pada contoh di atas. Klik pada kotak centang sekali untuk mengaktifkan menu ini.
04 06
Masukkan 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 Enter Responsif Mode Desain _ dilingkari pada contoh di atas.
Harap perhatikan bahwa Anda dapat menggunakan pintasan keyboard berikut ini sebagai pengganti item menu yang disebutkan di atas: OPTION + COMMAND + R
05 06
Mode Desain Responsif
Halaman Web 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.
06 06
Menu Pengembangan: Opsi Lainnya
Selain Mode Desain Responsif, menu Pengembangan Safari 9 menawarkan banyak opsi berguna lainnya_ beberapa yang tercantum di bawah ini.
- Buka Halaman Dengan: Memungkinkan Anda untuk membuka halaman Web aktif di browser lain yang saat ini diinstal pada Mac Anda.
- Agen Pengguna: Mengubah agen pengguna menyebabkan server Web mengidentifikasi browser Anda sebagai sesuatu selain Safari 9.
- Connect Web Inspector: Safari Web's Inspector 9 menampilkan semua sumber daya halaman Web, menyediakan kemampuan untuk membaca dengan teliti informasi CSS, metrik dan struktur DOM, 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 Halaman: 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 Snippet Editor: Memberikan 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 membangun ekstensi Safari sendiri dengan mengemas kode Anda sesuai dan menambahkan metadata.
- Mulai Perekaman Timeline: Merekam sejumlah item termasuk permintaan jaringan, eksekusi JavaScript, perenderan halaman, dan acara lainnya untuk periode yang ditentukan pengguna_ semua dapat dilihat dalam Inspektur WebKit.
- Cache Kosong: Mengklik pada opsi ini menghapus semua cache yang disimpan dalam Safari, bukan hanya file cache situs web standar.
- Nonaktifkan Cache: Dengan caching 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 untuk alasan keamanan, fitur ini memungkinkan Anda memasukkan URL yang mengandung javascript: di bilah alamat Safari.
- Perlakukan Sertifikat SHA-1 sebagai Tidak Aman: Singkat untuk Algoritma Hash Aman, fungsi hash SHA-1 telah terbukti kurang aman daripada yang dipikirkan sebelumnya_ maka penambahan opsi ini di Safari 9.
Bacaan Terkait
Jika Anda menemukan tutorial ini berguna, pastikan untuk memeriksa langkah-langkah Safari 9 lainnya.
- Cara Mengelola Pemberitahuan Push Situs Web
- Cara Mengekspor Halaman Web ke File PDF
- Cara Mengonfigurasi Safari 9 Ekstensi untuk Pembaruan Secara Otomatis
- Cara Menggunakan Fitur Situs yang Dipasang