10 Alat Pengembang Firefox Berguna Yang Harus Anda Ketahui
Firefox menjadi "browser pengembang" memiliki banyak alat hebat untuk membantu mempermudah pekerjaan kita. Anda dapat menemukan lebih banyak tentang koleksi alat di halaman web Alat Pengembang Firefox dan juga dapat mencoba Browser Edisi Pengembang mereka yang memiliki lebih banyak fitur dan alat yang sedang diuji.
Untuk posting ini, saya sudah mendaftar 10 alat praktis Anda mungkin suka dari koleksi alat pengembangnya. Saya juga telah mendemonstrasikan apa yang bisa dilakukan alat-alat ini dengan GIF plus cara mengaksesnya untuk referensi cepat.
1. Lihat penguasa horizontal dan vertikal
Firefox memiliki alat penggaris itu menampilkan penggaris horizontal dan vertikal dengan satuan piksel di halaman. Alat ini berguna untuk mengatur elemen Anda di seluruh halaman.
Untuk mengakses penggaris melalui menu, buka: ☰> Pengembang > Bilah Alat Pengembang (pintas: Shift + F2). Setelah bilah alat muncul di bagian bawah halaman, ketik penguasa dan tekan Memasukkan.
Untuk membuat ini muncul di jendela alat pengembang, Buka "Opsi Toolbox". Di bawah bagian "Tombol Kotak Alat Yang Tersedia", periksa "Alihkan penguasa untuk laman"kotak centang.
2. Ambil tangkapan layar menggunakan penyeleksi CSS
Meskipun toolbar Firefox memungkinkan Anda mengambil tangkapan layar dari seluruh halaman atau bagian yang terlihat, menurut saya metode pemilih CSS lebih berguna untuk menangkap tangkapan layar elemen individu dan juga untuk elemen yang terlihat di mouse-hover hanya (seperti menu).
Untuk mengambil tangkapan layar melalui menu, buka ☰> Pengembang > Bilah Alat Pengembang (shortcutShift + F2). Setelah bilah alat muncul di bagian bawah halaman, ketik tangkapan layar --selector any_unique_css_selector dan tekan memasukkan.
Untuk membuatnya muncul di jendela alat pengembang: klik "Opsi Toolbox" dan di bawah bagian "Tombol Toolbox Yang Tersedia", centang "Ambil tangkapan layar halaman penuh " kotak centang.
3. Pilih warna dari halaman web
Firefox memiliki alat pemilih warna bawaan dengan nama "Eyedropper". Untuk mengakses alat "pipet" melalui menu buka ☰> Pengembang > Penitis mata.
Untuk membuatnya muncul di jendela alat pengembang: klik "Opsi Toolbox" dan di bawah "tombol Toolbox Tersedia" centang bagian "Ambil warna dari halaman"kotak centang.
4. Lihat tata letak halaman dalam 3D
Melihat halaman web dalam 3D membantu masalah tata letak. Anda akan dapat melihat elemen berlapis yang berbeda jauh lebih jelas dalam tampilan 3D. Untuk melihat halaman web dalam 3D, klik tombol alat "Tampilan 3D".
Untuk membuatnya muncul di jendela alat pengembang, klik "Opsi Toolbox" dan di bawah bagian "Tombol Toolbox Yang Tersedia" centang "Tampilan 3D"kotak centang.
5. Lihat gaya browser
Gaya Browser terdiri dari dua jenis: gaya default yang ditetapkan browser untuk setiap elemen, dan gaya khusus browser (yang dengan awalan browser). Dengan melihat gaya peramban Anda akan dapat melakukannya mendiagnosis segala masalah yang menimpa di stylesheet Anda dan juga mengetahui gaya browser tertentu yang ada .
Untuk mengakses "Gaya browser" melalui menu, buka go> Pengembang > Inspektur. Kemudian klik tab "Dihitung" di bagian kanan dan centang kotak centang "Gaya browser".
Anda juga dapat membuka "Inspektur"tab melalui pintasan Ctrl + Shift + C dan kemudian mengakses" Gaya browser ".
6. Nonaktifkan JavaScript untuk sesi saat ini
Untuk praktik terbaik dan kompatibilitas pembaca layar, selalu disarankan untuk membuat kode situs web apa pun sedemikian rupa sehingga fungsinya tidak terhalang dalam lingkungan yang dinonaktifkan javascript. Untuk menguji lingkungan seperti itu, Anda bisa nonaktifkan JavaScript untuk sesi tempat Anda bekerja.
Untuk menonaktifkan JavaScript untuk sesi saat ini, klik "Opsi Toolbox" dan di bawah bagian "Pengaturan lanjutan" periksa "Nonaktifkan JavaScript* "kotak centang.
7. Sembunyikan gaya CSS dari halaman
Sama seperti JavaScript, karena masalah aksesibilitas, yang terbaik adalah merancang situs web sedemikian rupa halaman harus tetap dapat dibaca bahkan tanpa gaya apa pun. Untuk melihat tampilan halaman tanpa gaya apa pun, Anda dapat menonaktifkannya di alat pengembang.
Untuk menghapus gaya CSS apa pun (sebaris, internal atau eksternal) yang diterapkan pada halaman web, cukup klik pada simbol mata dari stylesheet yang terdaftar di tab "Editor Gaya". Klik lagi untuk kembali ke tampilan semula.
Untuk mengakses "Editor Gaya" melalui menu, buka ☰> Pengembang > Editor Gaya (pintas: Shift + F7.
8. Pratinjau respons konten HTML terhadap suatu permintaan
Alat pengembang Firefox memiliki opsi untuk pratinjau tanggapan jenis konten HTML. Ini membantu pengembang untuk melihat pratinjau 302 arahan ulang dan memeriksa apakah ada informasi sensitif yang diberikan atau tidak dalam respons.
Untuk mengakses "Pratinjau" melalui menu, buka ☰> Pengembang > Jaringan (pintas: Ctrl + Shift + Q. Lalu buka halaman web pilihan Anda atau muat ulang halaman saat ini, klik pada permintaan yang diinginkan (dengan respons HTML) dari daftar permintaan dan klik "Pratinjau"tab di bagian kanan.
9. Pratinjau halaman web dalam berbagai ukuran layar
Untuk menguji halaman web untuk responsifnya gunakan "Tampilan Desain Responsif", yang dapat diakses oleh ☰> Pengembang > Tampilan Desain Responsif atau dengan pintasan: Ctrl + Shift + M.
Untuk membuat tombol alat "Mode Desain Responsif" muncul, klik "Opsi Toolbox" dan di bawah bagian "Tombol Toolbox Yang Tersedia", centang kotak "Mode Desain Responsif".
10. Jalankan JavaScript pada halaman
Untuk eksekusi JavaScript cepat di halaman web apa pun, cukup gunakan alat "Scratchpad" di Firefox. Untuk mengakses "Scratchpad" melalui menu, buka; ☰> Pengembang > Papan penggaris atau gunakan pintasan keyboard Shift + F4.
Untuk membuat tombol alat "Scratchpad" muncul di jendela alat pengembang untuk penggunaan cepat: klik "Opsi Kotak Alat"dan di bawah"Tombol Toolbox Yang Tersedia"bagian periksa" Scratchpad " kotak centang.
