List Browser Extension untuk Web Development

Written on April 24, 2021 by

photo of me

Theodorus Clarence.

––– views • 3 min read

Read in English

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?

1. Grid & Flexbox Tools yang Lebih Keren

Firefox punya dev tools yang lebih keren dan lengkap terutama untuk debugging pada grid dan flexbox.

Grid Tools

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.

Color Scheme

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.

Mobile View

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.

Eye dropper

Check out the official firefox website to see more features.

List Extension Add-ons yang Saya Gunakan

1. CSS Debug

Link Download

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.

CSS Debug

2. WhatFont

Link Download

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.

What Font

3. Wappalyzer

Link Download

Add-on ini digunakan untuk mencari tahu teknologi apa yang digunakan di sebuah website.

Wappalyzer

4. Measure-it

Link Download

Add-on ini untuk mengukur sesuatu dalam satuan pixel. Biasanya cukup penting untuk mengukur pixel terlebih dahulu saat developing.

Measure It

5. VisBug

Link Download

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.

Visbug

Summary

Pastikan download semua add-ons! Coba beberapa dan implementasikan pada saat developing website. Cari yang menurut kamu paling bagus, dan paling membantu!

Enjoying my post? Kindly subscribe to my newsletter if you want an update everytime I post.