Di bawah ini adalah fitur dan tips untuk menggunakan Alat Pengembang Firefox. Beberapa dari mereka mirip dengan kemampuan alat di Chrome, untuk beberapa tidak ada analog di browser lain.

Perhatian, di bawah luka banyak gif!

Inspektur

Pencarian pemilih CSS

Sangat nyaman digunakan untuk:

• elemen dengan `z-index` yang tidak dapat diklik
• elemen yang sama secara visual yang Anda tahu pemilih

Filter gaya

Anda dapat memfilter aturan CSS oleh pemilih atau properti apa pun.

Untuk penyeleksi, filter menyoroti penyeleksi dalam daftar aturan. Untuk properti, alat akan memperluas semua properti yang berisi filter Anda, sorot dengan warna, dan juga menyembunyikan aturan di mana tidak ada properti dari filter.

Color Picker dan Eyedropper

Klik titik mana saja dengan warna di inspektur untuk membuka alat yang praktis.

Ubah representasi warna

Shift + klik pada titik warna memungkinkan Anda untuk mengubah representasi warna (nama / hex / hsl / rgb).

Shift + klik pada titik di dekat sudut memungkinkan Anda untuk mengubah satuan sudut.

Mengedit Kurva Fungsi Waktu Bezier

Klik suatu titik dengan garis lengkung di sebelah properti fungsi waktu untuk membuka editor yang nyaman. Akan ada fungsi yang telah ditentukan dan kemampuan untuk mengkonfigurasi versi Anda secara manual.

Konsol

Aplikasi CSS

console.log(“#%c%s%c%s”, “color: #bada55”, “dev”, “color: #c55”, “tricks”) 

Tidak semua properti didukung, tetapi cukup banyak .

Pencarian Sejarah

Tekan CTRL + R pada Mac (dan F9 pada Windows dan Linux). Kemudian gunakan CTRL + R / CTRL + S ( F9 / SHIFT + F9 ) untuk menggulir maju / mundur. Tidak seperti panah, pintasan keyboard di atas akan berfungsi di antara sesi.

Cuplikan layar halaman atau elemennya

 :screenshot — fullpage :screenshot — selector .css-selector 

Adalah jauh lebih nyaman untuk hanya menentukan pemilih daripada mencoba memilih area yang diinginkan dengan mouse secara akurat.

Peralihan konteks JavaScript

 cd(iframe) 

Anda dapat beralih ke konteks iframe dengan pemilih menggunakan cd () .

Tag Pengatur Waktu

 console.time(“#devtricks”) console.timeEnd(“#devtricks”) 

Mulai timer - console.time ("label") ,

hentikan - console.timeEnd ("label") .

JavaScript debugger

Breakpoint Bersyarat

Untuk membuat titik, klik kanan pada nomor baris. Intinya akan aktif hanya jika kondisinya terpenuhi.

Cari berdasarkan nama fungsi atau nomor baris

Pencarian nama file adalah CMD + P di Mac (dan CTRL + P di Windows dan Linux).

Ketik " @" di input yang sama untuk mencari berdasarkan deklarasi fungsi dalam file.

Ketik ": " di input yang sama untuk dengan cepat mencapai garis dengan nomornya.

Output kode minified yang indah

Klik ikon {} untuk melihat kode yang indah alih-alih kode yang diperkecil.

URL breakpoints

Intinya akan menjadi aktif ketika Anda mencoba mengakses url dan menunjukkan kode yang bertanggung jawab untuk mengaksesnya.

Nonaktifkan Breakpoints

Poin yang dinonaktifkan akan tetap tersedia untuk dimasukkan dan digunakan di masa mendatang.

Jaringan

Mengedit dan Meneruskan Permintaan HTTP

Edit permintaan yang diajukan dan kirim kembali.

Filter kueri

Filter domain adalah CMD + F di Mac (atau CTRL + F di Windows dan Linux).

Jika Anda perlu menemukan semua kueri tanpa domain , tambahkan tanda hubung ( - ) di depan filter.

Batas kecepatan

Periksa bagaimana situs akan memuat ketika Internet lambat.

Profil Panas / Dingin

Klik ikon penghitung waktu untuk melihat kinerja kueri yang dihasilkan situs. Halaman akan dimuat dua kali - tanpa cache (meniru beban pertama) dan dengan cache (meniru panggilan berulang).

Menyimpan / Memuat HAR

Kami menyimpan permintaan sempurna dalam format arsip . Nyaman untuk dibagikan dengan sesama pengembang.

Desain Responsif

Perangkat khusus

Lihat bagaimana situs akan mencari perangkat dengan resolusi khusus.

Batas kecepatan

Kami menonton unduhan versi seluler pada kecepatan Internet seluler.

Persaingan tachi

Ikon kecil dengan "tangan" bertanggung jawab untuk ini. Ditiru, termasuk tapas panjang.

Ubah Agen Pengguna

Jangan lupa untuk mengaktifkan opsi "Muat ulang halaman saat mengganti UA" di pengaturan - hemat waktu.

Alignment Viewport Kiri

Nyaman jika Anda ingin menempatkan panel di sebelah kanan (misalnya, untuk debug).

Inspektur gudang

Mengedit Cookie

Klik dua kali pada sel yang nilainya ingin Anda ubah.

Penghapusan Cookie

Cara termudah untuk menghapus cookie adalah dengan memilihnya dan mengklik Backsapce.

Perhatikan opsi menu konteks. Opsi "Hapus semuanya untuk domain" sangat mudah, tetapi perlu diingat bahwa domain harus akurat (mis. Menghapus cookie untuk .medium.com tidak akan menghapusnya untuk medium.com )

Ubah cookie waktu-nyata

Cookie yang baru saja diganti telah berkedip oranye.

Snapshots statis untuk IndexedDB

Anda tidak akan dapat melihat perubahan dalam catatan IndexedDB secara real time, jadi gunakan tombol segarkan untuk mendapatkan snapshot database terbaru.

Mengubah kolom tabel yang ditampilkan

Mengklik kanan pada judul tabel akan membantu menyembunyikan kolom yang tidak menarik.

Itu saja. Semoga tipsnya bermanfaat!