Technology

Sudah intip DevTools dari Firefox ini?

Published on
Min read
0 min read
time-icon
Widyanto Gunadi

Content palnner | Likes: Video games, music and drums, good reads, running, learning new things | Dislike: Overcomplicates simple things

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
 

0

Tags

Share

Apakah Kamu Sedang Mencari Pekerjaan?

    Already have an account? Login

    Artikel Terkait

    Ssstiktok_Download_Video_TikTok_tanpa_Watermark_Secara_Online_2022.jpg

    Technology

    SSSTikTok

    Sylvia Rheny

    19 December 2022
    5 min read
    H1-3_Cara_Mengatur_Margin_di_Word_Sesuai_Kebutuhan_Agar_Pekerjaanmu_Semakin_Mudah.PNG

    Technology

    3 Cara Mengatur Margin di Word Sesuai Kebutuhan Agar Pekerjaanmu Semakin Mudah

    Lita Lia

    05 December 2022
    4 min read
    aaron-weiss-_x6XZ_jp0g8-unsplash_(2).jpg

    Technology

    Cara Berjualan di TikTok Shop dan 6 Tips Agar Cepat Laris

    Fakhrizal Muttaqien

    05 December 2022
    6 min read

    Video