Bagi Anda yang sedang belajar web desain dan programing, baik pemula, menengah, maupun intermediate, mungkin addons untuk browser Firefox yang satu ini bisa mempermudah dan mengefisienkan pekerjaan Anda ketika mendesain dan memprogram web, karena di dalamnya terdapat banyak fitur yang bisa digunakan untuk mengobok-obok halaman web yang tengah Anda buat, atau boleh juga mengobok-obok isi website milik orang lain. Membongkar file HTML dan CSS styles, ekstrak file gambar, memanipulasi HTML form, dsb, yang bahkan beberapa fitur bisa Anda jalankan secara on-the-fly, alias apa yang Anda edit/manipulasi saat itu, bisa Anda lihat langsung hasilnya. Saya sangat merekomendasikan para web desainer dan programmer untuk menginstall add-on ini. Nama addon-nya saja Web Developer. ![]()
Download, Install, dan Mainkan
- Terlebih dahulu unduh add-on untuk browser Firefox yang bernama Web Developer ini di https://addons.mozilla.org/en-US/firefox/addon/60 (saat artikel ini ditulis, versi add-on tersebut adalah 1.1.4 dan kompatibel untuk Firefox versi 2.0 – 2.9).
- Install add-on tersebut, dan restart browser Firefox Anda. Jangan lupa untuk membuka homepage sang pembuat weblog tersebut di http://chrispederick.com/work/web-developer/, siapa tahu ada informasi penting yang perlu Anda baca terlebih dahulu.
- Kalau semua berjalan lancar, akan muncul menu baru di bawah address bar browser Firefox Anda. Seperti ini:
Perbesar:
- Jangan lupa untuk menyetting add-on tersebut sesuai kebutuhan Anda dengan cara (pada jendela browser Firefox) mengklik menu Tools > Add-ons. Cari add-on bernama Web Developer dan klik tombol Options. Di sana banyak settingan yang bisa Anda set.
- Kalau sudah seperti itu, Anda sudah bisa mengeksplorasi website Anda (dan website orang lain juga!).
Saya tidak akan menulis panjang lebar tentang cara penggunaan masing-masing fitur yang dipunyai add-on tersebut. Kembangkan saja kreativitas Anda. Trial and Error untuk mencoba. Pada toolbar itu semua tool untuk eksplorasi/membongkar atau mengobok-obok sudah lengkap kok.
Sebagai catatan tambahan, tool yang sering saya gunakan adalah: ![]()
- CSS Style, untuk eksplorasi style dan layout pada banyak website. Terutama untuk formatting teks, tabel, dsb.
- View Image Information, untuk melihat file-file gambar yang ada pada sebuah halaman web, disertai keterangan dimensi ukuran, ukuran byte file, dan URL-nya yang pasti.
- View Document Outline, untuk melihat strutktur tulisan. Dengan mengetahui heading teksnya, bisa membuat kita mudah menguraikannya, seperti halnya ketika kita membaca daftar isi sebuah buku. Dengan melihat struktur heading teks pula, search engine mengindeks halaman web kita.
- Validate HTML dan CSS, untuk melakukan cek terhadap kode-kode HTML dan CSS yang telah kita buat, agar sesuai dengan standard HTML dan CSS secara internasional. Ini penting juga untuk melakukan cek agar web browser (Internet Explorer, Firefox, Opera, Safari, dsb) kompatibel dengan HTML dan CSS kita.
Selamat berobok-obok ria. ![]()


