Published on

Technology

Sudah intip DevTools dari Firefox ini?

Widyanto Gunadi

devtools_firefox.jpg

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
 

Tags

Share

Apakah Kamu Sedang Mencari Pekerjaan?

    Already have an account? Login

    Artikel Terkait

    H1_Gamification.jpg

    Technology

    Gamification: Definisi, Elemen, Manfaat, Kelebihan dan Kekurangan

    Algonz D.B. Raharja

    04 July 2022
    5 min read
    h1.jpg

    Technology

    Cache Adalah: Definisi, Manfaat, Kekurangan, dan Jenisnya

    Tio Derma

    04 July 2022
    6 min read
    Slack_Technologies-Logo.wine.png

    Technology

    Slack: Aplikasi Chat yang Memudahkan Komunikasi Antar Tim

    Algonz D.B. Raharja

    30 June 2022
    5 min read

    Video