10 Tools Keren Firefox Developer yang Perlu Anda Coba – Mozilla Firefox menjadi “Browser pengembang” memiliki banyak tools keren yang sengaja diciptakan untuk membantu membuat pekerjaan kita sebagai developer web menjadi lebih mudah. Anda dapat menemukan fitur lebih pada Firefox Developer Tools untuk halaman web dan Anda juga dapat mencoba Developer Edition Browser yang memiliki lebih banyak fitur dan alat-alat yang sedang diuji.

Pada artikel kali ini, saya akan menunjukkan kepada Anda 10 alat-alat praktis yang keren pada tools firefox Developer dan sekaligus disertai gambar GIF yang dapat membantu Anda dalam memahami setiap fungsi dan kegunaan dari masing-masing tool yang saya sebutkan dibawah ini.

Baca : 10 Fitur Terbaik dari Browser Microsoft Edge Terbaru

1. Menampilkan Penggaris Horisontal dan Vertikal

Firefox memiliki tools penggaris yang ditampilkan secara horisontal dan vertikal dengan unit pixel pada halaman web. Alat ini berguna untuk mengatur elemen Anda di halaman.

Untuk menampilkan penggaris ini masuk ke menu ☰ » Developer» Developer Toolbar (shortcut: Shift + F2). Setelah toolbar muncul di bagian bawah halaman, ketikkan perintah rulers dan tekan Enter.

2. Screenshot menggunakan CSS

Meskipun Firefox toolbar dapat Anda gunakan untuk mengambil screenshot pada halaman secara full atau hanya bagian halaman yang terlihat saja, tapi dengan menggunakan metode selector CSS lebih berguna untuk menangkap screenshot dari elemen individual maupun untuk elemen yang terlihat pada bagian yang Anda sorot dengan mouse (seperti menu).

Untuk mengambil screenshot melalui menggunakan CSS , silahkan masuk ke ☰» Developer» Developer Toolbar (shortcutShift + F2). Setelah toolbar muncul di bagian bawah halaman, ketikkan perintah screenshot –selector nama_css_selector_unik dan tekan enter.

Untuk membuat tool ini muncul di jendela Tool Developer: klik “Toolbox Options” dan di bawah “Toolbox Available” dan centang “Take a FullPage Screenshot” kotak centang.

3. Pilih warna dari halaman web

Firefox memiliki tools built-in color picker dengan nama “pipet“. Untuk mengakses “pipet” silahkan masuk ke menu ☰» Developer» pipet.

Untuk membuat tools ini muncul di jendela Tool Developers : klik “Toolbox Options” dan di bawah “Toolbox Available” dan centang  “Grab colors from the page“.

4. Menampilkan layout Halaman 3D

Menampilkan halaman web 3D dapat membantu Anda tentang masalah tata letak atau layout. Anda akan dapat melihat unsur-unsur yang berbeda secara berlapis jauh lebih jelas dalam tampilan 3D. Untuk melihat halaman web dalam 3D, klik menu “View 3D“.

Untuk membuat View 3D ini muncul di jendela Developer tools, klik “Toolbox Options” dan di bawah “Toolbox Available” dan centang “View3D“.

5. Lihat Browser Style

Browser Style terdiri dari dua jenis: gaya default browser menugaskan untuk setiap elemen, dan gaya-browser tertentu (yang dengan awalan browser). Dengan melihat browser style Anda akan dapat mendiagnosa masalah override dalam stylesheet Anda dan juga dapat untuk mengetahui browser style tertentu yang ada.

Untuk mengakses “Browser Style” melalui menu, pergi ke ☰» Developer» Inspector. Kemudian klik menu tab “Computed” di bagian kanan dan centang “Browser style“.

Anda juga dapat membuka tab “Inspector” dengan shortcut Ctrl + Shift + C untuk mengakses “Browser Style”.

6. Disable JavaScript

Untuk praktek terbaik dan layar pembaca kompatibilitas itu selalu disarankan untuk kode situs web apapun sedemikian rupa sehingga fungsinya tidak terhalang dalam lingkungan javascript. Untuk menguji lingkungan tersebut, Anda dapat menonaktifkan JavaScript untuk sesi Anda bekerja di.

Untuk menonaktifkan JavaScript klik “Toolbox Options” dan di bawah “Advanced settings” dan centang “Disable JavaScript”.

7. Menyembunyikan CSS Style

Sama seperti JavaScript, karena kekhawatiran aksesibilitas yang terbaik adalah untuk merancang situs sedemikian rupa bahwa halaman masih harus mampu dibaca bahkan tanpa style. Untuk melihat bagaimana halaman terlihat tanpa style apapun, Anda dapat menonaktifkan style tersebut di Tool Developer.

Untuk menghilangkan CSS Style (inline, internal atau eksternal) yang diterapkan pada halaman Web, klik pada simbol mata dari stylesheet yang tercantum dalam menu tab “Style Editor”. Klik lagi untuk kembali ke tampilan aslinya.

Untuk mengakses “Style Editor” melalui menu pergi ke ☰» Developer» Style Editor (shortcut: Shift + F7).

8. Preview respon konten HTML

Tool Developer Firefox memiliki pilihan untuk melihat respon jenis konten HTML. Hal ini membantu pengembang untuk melihat setiap 302 pengalihan dan memeriksa apakah informasi sensitif telah diberikan atau tidak di respon.

Untuk mengakses “Preview” silahkan masuk ke menu ☰» Developer» Network (shortcut: Ctrl + Shift + Q). Kemudian buka halaman web pilihan Anda atau reload halaman tersebut, klik pada permintaan yang diinginkan (dengan respon HTML) dari daftar permintaan dan klik “Preview” tab di bagian kanan.

9. Preview halaman web Responsive

Untuk menguji halaman web dalam ukuran browser yang berbeda-beda Anda dapat menggunakan “Responsive Design View“, yang dapat diakses oleh ☰» Developer» Responsive Design View atau dengan (shortcut: Ctrl + Shift + M).

Untuk memunculkan menu “Responsive Design Mode“, klik “Toolbox Options” dan di bawah Tombol “Toolbox Available” silahkan centang “Responsive Design Mode”.

10. Menjalankan JavaScript pada halaman

Untuk eksekusi JavaScript cepat pada halaman Web manapun hanya menggunakan “Scratchpad” Firefox Tool. Untuk mengakses “Scratchpad” silahkan masuk ke menu ☰» Developer» Scratchpad atau menggunakan cara pintas pada keyboard (shortcut: Shift + F4).

Untuk membuat “Scratchpad” muncul di jendela Developer Tool, klik “Toolbox Options” dan di bawah tombol “Toolbox Available” dan centang kotak “Scratchpad”.

Baca : Cara Mengembalikan Password Tersimpan di Mozilla Firefox

Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Facebook+.