Firefox DevTools telah berkembang jauh, dan masih terus ditingkatkan versinya. Kini DevTools ini berada di level yang sama dengan alat development lain dan memiliki beberapa fitur fantastis. Beberapa di antaranya tidak akan Anda temukan di tempat lain saat ini. Jika sudah lama menggunakan Firefox untuk development, fitur ini layak Anda cermati. Apa saja sih yang baru dari DevTools keluaran Firefox?
Trik screenshot
Dalam mode normal, Anda dapat menggunakan alat screenshot untuk mengambil area drag-to-define, atau Anda dapat mengklik masing-masing elemen halaman. Ketika dalam mode Desain Responsif, Anda dapat mengklik tombol kecil di bagian kanan atas pratinjau untuk menangkap tangkapan layar yang memperlihatkan tampilan situs Anda pada perangkat tertentu.
Di Firefox DevTools, Anda bisa mengambil screenshot dari seluruh halaman. Caranya, aktifkan tombol screenshot di pengaturan, dan tekan untuk memuat halaman. Ini akan disimpan di folder unduhan default, menggunakan lebar halaman sesungguhnya. Sementara itu, untuk ambil screenshot dari satu simpul tunggal, cobalah pilih elemen di Element Inspector dan klik kanan, lalu pilih Node Screenshot.
Hapus kelas dari elemen
Terkadang elemen memiliki banyak kelas dan Anda tidak dapat segera menemukan kelas untuk memperkenalkan atribut styling tertentu. Dengan memilih elemen dan mengklik tombol .cls di kanan atas panel Aturan, Anda dapat melihat daftar semua kelas dan dengan mudah menonaktifkan atau mengaktifkannya kembali.
Drag dan drop di panel elemen
Di panel elemen, Anda dapat menarik dan memindahkan elemen HTML apa pun dan mengubah posisinya di seluruh halaman.
Pilih referensi elemen di konsol
Pilih simpul di panel elemen, dan ketik $ 0 di konsol untuk merujuknya. Salah satu fitur yang sangat keren dari Konsol Alat Pengembang Firefox adalah shortcut untuk Selectors API, yaitu:
$ () adalah shortcut untuk document.querySelector ()
$$ () adalah jalan pintas untuk document.querySelectorAll ()
Nilai operasi terakhir di konsol
Gunakan $ _ untuk mereferensikan nilai pengembalian dari operasi sebelumnya yang dijalankan di konsol. Klik kanan elemen apa saja dan cari pilihan untuk menggunakan di konsol. Anda pun akan diarahkan ke variabel sementara.
JavaScript debugging
Anda dapat mengatur breakpoint pada file JavaScript dari panel Debugger, dan mengatur berbagai ekspresi dalam file JS yang akan ditonton. Muat ulang halaman, maka pengaturan breakpoint dan expression akan tetap utuh.
Kenali font yang digunakan
Font-family di CSS memungkinkan Anda untuk mengatur daftar font yang akan digunakan. Jika yang pertama tidak ditemukan, maka Anda akan dialihkan ke nomor dua dan berikutnya.
Grid CSS
CSS Grid adalah fitur CSS baru dan luar biasa baru-baru ini. Firefox DevTools memiliki inspektor yang sangat membantu.
Wah, menarik ya? Yuk, segera kita coba DevTools Firefox yang satu ini. Siapa tahu membuat pekerjaan Anda lebih efisien.
Sumber:
hackernoon.com
tutsplus.com
.jpg)
