Introduction
Menemukan extension" ini mempersingkat waktu saya ketika sedang membuat website baik pada debugging, maupun mempelajari website orang lain
Disclaimer: Saya menggunakan Firefox Developer Edition untuk browser default. Beberapa extension mungkin ada pada chrome, tapi saya menyarankan untuk mencoba menggunakan Firefox Dev Edition.
Kenapa Firefox Developer Edition?
Dapatkan Firefox Developer Edition
1. Grid & Flexbox Tools yang Lebih Keren
Firefox punya dev tools yang lebih keren dan lengkap terutama untuk debugging pada grid dan flexbox.
2. Color Scheme Lebih Bagus dari Chrome
Overall theme dari Firefox Dev Tools mirip color scheme Dracula yang saya gunakan juga di vscode. Warna ini menurut saya lebih bagus daripaka dev tools chrome yang ke kuning-orenan.
Dan, kita memiliki custom font tabs, jadi bisa secara langsung mengubah font attribute dengan slider.
3. Mobile View Simple
Mau buka mobile view, tanpa ngeblock setengah layar karena devtools? Bisa.
4. Banyak Development Tools (built-in eyedropper)
Task manager dan Eyedropper bagus banget buat ngecek" warna. Kita ga perlu install chrome extension dulu untuk pake eyedropper, tinggal pake yang sudah built-in dari firefox. Firefox juga menambahkan dedicated icon di toolbar jadi lebih gampang untuk aksesnya.
Check out the official firefox website to see more features.
List Extension Add-ons yang Saya Gunakan
1. CSS Debug
Add-on ini punya fitur untuk memberikan outline ke setiap elemen di HTML. Berguna banget kalo misal kita mau debug CSS, karena semua dikasih outline. Saya bahkan me-map mouse button saya untuk toggle add-on ini.
2. WhatFont
Tool yang bagus untuk mengintip font apa yang digunakan pada suatu website. Hanya perlu click" saja, dan kita bisa langsung tau font apa. Saya biasanya menggunakan add-ons ini untuk cari tau font yang dipake di website lain. Bisa juga untuk melihat font-size, weight yang digunakan.
3. Wappalyzer
Add-on ini digunakan untuk mencari tahu teknologi apa yang digunakan di sebuah website.
4. Measure-it
Add-on ini untuk mengukur sesuatu dalam satuan pixel. Biasanya cukup penting untuk mengukur pixel terlebih dahulu saat developing.
5. VisBug
Saya baru saja menemukan add-on ini, dan kayaknya ini akan berguna banget. Add-on ini punya banyak fungsionalitas dalam 1 tool seperti mengubah padding, margin, font size, letter spacing. Kita juga bisa mengubah arrangement flexbox, ubah text dengan 1 tool tanpa perlu membuka devtools lagi. Add-on ini akan sangat berguna kalau kita ingin melakukan fine-tune di akhir development.
Summary
Pastikan download semua add-ons! Coba beberapa dan implementasikan pada saat developing website. Cari yang menurut kamu paling bagus, dan paling membantu!
