() translation by (you can also view the original English article)
Baru-baru ini saya memutuskan untuk beralih kembali ke Firefox, telah menjadi pengguna Chrome selama beberapa tahun. Ketika terakhir saya menggunakan Firefox dengan sungguh-sungguh, bekerja dengan dev tools semua tentang ekstensi Firebug. Firefox memang memiliki beberapa tools yang ada di dalamnya, tapi pada saat itu tidak sekuat perangkat dev Firebug atau Chrome. Sekembalinya saya menemukan banyak hal telah berubah!
Dev tools Firefox sendiri telah berjalan lama, dan masih terus ditingkatkan versinya. Mereka sekarang pasti pada tingkat yang sama seperti dev tools lainnya dan membanggakan beberapa fitur fantastis, termasuk beberapa yang tidak akan Anda temukan di tempat lain saat ini.
Jika sudah lama sejak Anda menggunakan Firefox untuk pengembangan juga, lihat fitur ini di Dev Tools Firefox yang mungkin tidak Anda ketahui.
Catatan: beberapa fitur terbaru butuh Firefox Nightly, tapi kebanyakan tersedia sekarang di Firefox biasa.
1. CSS Grid Inspector
CSS Grid mulai mengubah secara radikal bagaimana layout desain web dibuat, dan menjadi lebih baik. Sejauh yang saya tahu, saat ini satu-satunya inspector CSS Grid ditemukan di dev tools Firefox.
Antara lain, grid inspector grid bisa:
- Identifikasi semua grid pada halaman
- Beri Anda overlay yang menunjukkan bagaimana grid ditata
- Tampilkan garis grid dan nomornya
- Tampilan dinamai grid area
- Visualisasikan efek transformasi yang diterapkan pada wadah grid
Jika Anda belum bermain dengan CSS Grid, Anda akan menyukainya, dan proses kerjanya pun membuatnya lebih mulus dengan tools grid inspector firefox.
Baca lebih lanjut di hacks.mozilla.org.
2. CSS Animation Inspector
Dev tools Firefox sekarang menyertakan CSS Animation inspector yang mendalam yang
secara otomatis akan mendeteksi animasi pada elemen yang dipilih, serta
animasi pada child element. Untuk setiap elemen
animasi, ini menunjukkan garis waktu dengan scrubber yang dapat Anda
kontrol, dan memberi Anda kemampuan untuk menjeda, mempercepat atau
memperlambat animasi.
Dengan
animasi yang dipilih Anda bisa memodifikasi propertinya di tab Styles
dan melihat efek perubahan Anda secara real time, sebuah fitur yang
sangat membantu proses tweaking hal-hal seperti fungsi easing.
Cara animasi digambarkan dalam dev tools juga membantu Anda menentukan susunan setiap animasi, sesuatu yang akan kita masuki secara lebih dalam pada artikel lain segera terbit. Jadi jika Anda menyukai animasi CSS, nantikan terus!
Baca selengkapnya di developer.mozilla.org.
3. Developer Toolbar
Toolbar Developer adalah cara yang sangat praktis untuk mengaktifkan dan mengendalikan fitur yang ada di dev tool dengan cepat. Ini
adalah interface command line yang relatif sederhana dimana Anda dapat
berinteraksi dengan hampir semua hal yang dapat dilakukan oleh dev tools. Misalnya,
Anda dapat menggunakannya untuk mengambil screenshot cepat, untuk
mendapatkan pratinjau responsif situs Anda dalam dimensi tertentu, atau
untuk mengambil warna dari halaman.
Tekan SHIFT + F2 untuk membuka toolbar, lalu masukkan perintah help untuk mengetahui semua perintah yang Anda miliki.
Baca selengkapnya di developer.mozilla.org.
4. Responsive Design Mode
Mode Desain Responsif membantu Anda mensimulasikan perangkat yang berbeda; dimensi, metode interaksi dan kecepatan koneksi yang khas. Anda
dapat memilih dari daftar dimensi yang telah ditentukan, menambahkan
definisi ukuran Anda sendiri ke dalam daftar, atau dengan bebas mengubah
ukuran pratinjau.
Untuk mengaktifkannya klik ikon Responsive Design Mode pada dev tools. Atau,
di Developer Toolbar, masukkan resize on untuk mengaktifkan mode
ini, resize to <width> <height> untuk menguji
ukuran tertentu, resize off untuk mematikannya lagi, atau resize toggle untuk mengaktifkannya dan aktifkan.
Baca selengkapnya di developer.mozilla.org.
5. Rulers
Perhatikan
dimensi desain Anda dengan menggunakan page rules, serupa dengan
yang Anda temukan dalam aplikasi desain grafis.
Klik ikon Rulers di bar atas pada dev tools untuk mengaktifkan, atau di Developer Toolbar masukkan perintah rulers.
Baca selengkapnya di developer.mozilla.org.
6. Eyedropper
Dengan
mudah mengambil warna dari halaman dengan eyedropper, yang akan memperbesar
apa pun yang Anda arahkan ke arah mouse untuk membuat pemetik warna
lebih mudah. Anda dapat menentukan format kode warna yang Anda inginkan, atau memilikinya menggunakan format yang ditulis.
Aktifkan dari menu Web Developer, atau di Developer Toolbar masukkan perintah eyedropper.
Baca lebih lanjut di: developer.mozilla.org.
7. Screenshot Tool
Firefox memiliki tool screenshot super mudah; tidak perlu lagi ekstensi screenshot.
Dalam mode
normal Anda dapat menggunakan alat screenshot untuk menangkap area
drag-to-define, atau Anda dapat mengklik elemen halaman individual untuk men-capture. Bila dalam mode Desain Responsif Anda bisa
mengklik tombol kecil di bagian kanan atas pratinjau untuk menangkap
tangkapan layar tentang tampilan situs Anda pada perangkat tertentu.
Aktifkan
tool screenshot dari toolbar utama di Firefox 57 (nightly), dari
kanan atas dev tools, atau dari Developer Toolbar dengan command screenshot.
Baca selengkapnya di developer.mozilla.org.
8. Measure Tool
Ambil pengukuran cepat(quick measure)pada bagian manapun dengan mengaktifkan alat ukur dan seret persegi panjang. Anda akan mendapatkan tinggi, lebar, dan jarak diagonal antara sudut.
9. Dark, Light or Firebug Theme
Dev tools
Firefox dilengkapi dengan tiga tema: tema ringan (putih), tema gelap
(biru), dan nice nod dev tools asli dari Firefox, tema
Firebug.
Apakah Anda memiliki setup desktop Anda dalam warna terang atau gelap, Anda akan memiliki tema yang sesuai.
Segera mencobanya!
Firefox semakin baik dan lebih baik dari hari ke hari, terutama dengan perubahan besar pada versi 57 yang akan datang. Dan fitur yang ada sekarang di dev tools Firefox membuat Firefox sangat menarik bukan hanya untuk browsing, tapi juga untuk pengembangan.
Jika Anda belum memeriksa Firefox Dev Tools, Cobalah segera!
