Firefox Developer Edition 6 Alat Paling Keren untuk Dicoba

Edisi pengembang Firefox adalah satu-satunya browser saat ini yang dibuat khusus untuk pengembang. Alat pengembang dalam edisi standar muncul pertama kali dalam edisi pengembang dan ada alat dalam edisi pengembang yang tidak dan tidak akan tersedia dalam edisi standar. Hari ini kita akan melihat beberapa alat yang saat ini hanya dapat ditemukan di edisi pengembang.

Jika Anda adalah seseorang yang belum pernah menggunakan atau yang tidak terlalu akrab dengan alat pengembang bahkan yang ada dalam edisi standar, lihat dulu "DevTools Challenger" keren ini oleh Mozilla. Di sini Anda dapat berlatih dengan beberapa alat yang disebutkan di bawah ini di peramban edisi pengembang Firefox. Contohnya menyenangkan dan mudah diikuti, instruksi langsung dan jika Anda tidak dapat mengejar ketinggalan, cukup ikuti tutorial video.

1. Alat pemeriksa animasi

Animasi CSS menjadi semakin umum, dan alat animasi CSS yang disediakan oleh edisi pengembang Firefox memudahkan untuk mengikuti dan memeriksa setiap langkah animasi yang dibuat. Anda dapat menjeda, memutar, dan membalikkan animasi apa pun; Anda juga dapat melihatnya terjadi bingkai demi bingkai melalui penggosokan.

Untuk mengakses alat, buka Inspektur alat dengan mengklik kanan pada elemen animasi dan memilih "periksa elemen", lalu di sisi kanan jendela alat dev, klik "Animasi".

2. Editor fungsi pewaktuan animasi

Waktu animasi dapat diedit di alat dev, Anda cukup klik ikon di sebelah fungsi di Aturan bagian dari Inspektur alat dan pop up yang menunjukkan kurva fungsi terbuka. Anda dapat menarik dan memodifikasi ini untuk menyesuaikan waktu animasi Anda. Setelah Anda membuat perubahan pada kurva, kecepatan animasi Anda akan berubah.

Jika Anda belum terbiasa dengan fungsi animasi Bezier kubik, saya merekomendasikan posting ini untuk mempelajari lebih lanjut tentang itu.

3. Color Picker untuk Properti CSS

Sudah ada color picker yang tersedia di edisi standar Firefox (baca lebih lanjut di postingan ini), yang mengambil warna dari halaman dan menyalinnya ke clipboard. Pemilih warna yang saya sebutkan sekarang adalah spesifik untuk nilai warna CSS properti.

Di samping setiap nilai warna CSS di Aturan bagian dari Inspektur alat, ada ikon yang akan membuka roda warna muncul ketika diklik. Anda dapat memilih warna yang Anda inginkan dari roda.

Jika Anda sudah memiliki warna yang Anda inginkan, dan warna yang kebetulan ada di halaman, cukup klik alat pipet di bagian bawah sembulan untuk membuka pemilih warna, lalu seret pemilih ke warna yang Anda inginkan, dan klik di atasnya . Nilai warna CSS akan diubah ke warna yang dipilih.

4. Alat ukur

Alat ini memungkinkan Anda melihat posisi XY dari kursor, dan tinggi, lebar, dan pengukuran diagonal dalam piksel bagian yang dipilih. Untuk menggunakan alat ini, Anda harus terlebih dahulu mengaktifkannya di pengembang Opsi Kotak Alat, dengan mencentang kotak centang bernama "Ukur sebagian halaman" di bawah "Tombol Toolbox Yang Tersedia".

Setelah diaktifkan, ikon penggaris akan muncul di bagian atas jendela alat dev, klik ikon itu dan gerakkan kursor ke atas halaman. Anda akan melihat posisi XY di dekat kursor. Untuk mengukur lebar, tinggi, dan diagonal, klik dan seret untuk memilih bagian yang ingin Anda ukur.

5. Editor filter CSS

Jika Anda menerapkan filter CSS ke elemen pada halaman, Anda akan melihat ikon di sebelahnya di Aturan bagian dari Inspektur alat, yang membuka editor filter CSS saat klik.

Untuk menghapus filter, klik tanda × di ujung kanan nama filter. Untuk menambahkan filter, klik kotak filter di bagian bawah dan pilih yang ingin Anda tambahkan dan klik + tanda. Anda juga dapat mengatur ulang filter ke dalam urutan apa pun dengan menyeret setiap item.

6. Alat memori

Anda dapat mengetahui apa yang menghabiskan memori di halaman web Anda, dengan bantuan alat ini. Ini membantu Anda mengambil langkah-langkah untuk menurunkan penggunaan memori dan karenanya meningkatkan kecepatan halaman Anda.

Untuk menggunakan alat ini, Anda harus mengaktifkannya terlebih dahulu dari menu Opsi Kotak Alat dengan mencentang kotak centang bernama "Memori" di bawah "Alat Pengembang Firefox Default". Setelah dicentang, Anda akan melihat bagian "Memori" di bagian atas jendela alat dev tepat setelah "Kinerja". Pilih itu.

Untuk menggunakan alat ini, klik "Ambil foto" atau tombol kamera. Anda akan melihat daftar item, seperti objek dan skrip yang mengambil memori .