Anda mungkin mengetahui bahwa saya adalah fans berat Mozilla. Ya, ini karena Mozilla memiliki banyak add-on yang berguna. Satu di antaranya adalah Firebug, yang membantu saya mendalami CSS dan HTML.
Jika Anda pengguna Mozilla yang senang atau baru belajar CSS untuk mendesain tampilan blog, Firebug wajib Anda instal. Di bawah ini adalah cara instal dan menggunakan Firebug.
Cara Instal Firebug
1. Kunjungi situs Firebug.
2. Jika Anda menggunakan Mozilla Firefox 4, lihat Release Notes yang terletak di bagian bawah halaman situs Firebug. Klik tombol Add to Firefox.
3. Klik link instal yang muncul.
4. Setelah diinstal, restart browser Mozilla Anda untuk mengaktifkan Firebug.
Cara Menggunakan Firebug
Ada banyak kegunaan Firebug, satu di antaranya adalah mengetahui ukuran dan jenis huruf yang digunakan blog orang lain.
1. Kunjungi blog yang ingin Anda ketahui ukuran dan jenis hurufnya, misalnya DailyBlogTips.com (DBT).
2. Setelah blog tersebut terbuka sempurna, Tekan tombol F12 pada papan ketik komputer Anda atau ikon Firebug yang ada di pojok kanan bawah browser Mozilla Anda.
3. Akan muncul tampilan Firebug. Klik tanda ikon untuk menginspeksi (berupa tanda panah).
4. Arahkan ikon tersebut ke bagian yang ingin Anda inspeksi, misalnya bagian konten sehingga muncul tanda seleksi berupa kotak biru.
5. Klik kanan kursor tersebut.
6. Ukuran dan jenis hurup akan muncul di bagian CSS (kolom kanan tampilan Firebug). Pada contoh ini, DBT menggunakan huruf Verdana berukuran 13 px.
7. Selain bagian konten, Anda juga menginspeksi CSS bagian lain seperti sidebar, header, dan sebagainya.
Selamat mencoba!
Di Google Chrome juga ada kok Firebugnya Kang. Tapi belakangan ini saya remove/uninstall karena saya lebih menyukai fitur web developer bawaan browser Chrome (yang sudah built-in). Cara kerja dan fiturnya tak jauh beda dengan Firebug. Cuma menurut saya lebih lengkap dan lebih mudah digunakan aja daripada Firebug.
Untuk sekadar mengetahui kode HTML dan CSS area tertentu dari halaman web yang sedang dibuka, cukup dengan klik kanan pada area yang ingin dicek, lalu klik ‘Inspect Element’.
Siip Mas.
Saya jadi tahu bahwa Google Chrome juga ada Firebug-nya.
Maklum Mas, saya belum instal dan pakai GC 😉
Di Instal Biar Lebih Wuzzz…….
yaa entar saya ke TKP….
oia, ada lebih ber-manfaat lagi ga ? gan….
bwt blog ala add-on firefox…
terimakasih
Seperti ini jawabannya, kadang saya ingin mengetahui jenis font yang dipake blog yang tulisannnya nyaman dibaca, sekarang dapet ilmunya, nuhun kang 🙂
Oya kalau kebanyakan add ons membuat berat loading ga?
Sepertinya iya Mas Tri.
Kalau add-on yang saya instal kurang dari 10.
Loading browser masih cepat Mas 😉
Kang Kabayan mach setia sama Flock nich.. soalnya suka dengan add-on Blog Editornya, Simple dan Cepat..
dengan add-on firebug ini serasa punya panel control sendiri, tanpa harus sign in dulu.
nuhun ya Kang buat tipsnya
mantap kang… layak dicoba… 🙂
Wah bisa di coba nih kang..Thanks.
Nanti saya coba yah mas.. insyallah bisa berguna.. 🙂 Terima kasih Infonya, Nice Job For you 🙂
Silakan Mas Egy 😉
Gak bisa Mas karena file php-nya tidak terlihat.
Yang bisa “diintip” hanya CSS-nya 😉
semua script client bisa diliat lewat firebug. javascript,css dan html bisa diliat.
tapi kalau script server kayak php,jsp,ruby on rails ya gak bisa keliatan.
langsung di coba kang..
Penting banget!
mks gan informasinya..
bisa buat ngintip blog orang dong.
kk kan kita udh edit tu sesuai keninginan kita
trs cara apply kan nya gmn
kyk conto kita udh edit Facebook org sesuai keingan kita trs buat aktifkan nya gmn abis saat kita relog yg kita edit kembali normal lagi
tq
Awsome website! I am loving it!! Will be back later to read some more. I am taking your feeds also
oh ada toh add ons nya,,, hmmm,,, boleh dicoba tuh,,,
aku malah pengin remove tapi nggak tahu caranya, ada yang tahu nggak
kalo copy cssnya sih lumayan faham om…kalo html lainnya tuh susah…
infonya berguna 🙂
thank’z informasinya….
wah bagus gan,dah ane coba and terbukti work bangeeet…….
Alhamduilah saya dapat ilmu lagi…
Terima Kasih banyak Pak..
caranya memunculkan icon firebug di pjok kanan atas mozila firefox bagaimana mas…
dan kalu mau masuk wordpress admin tanpa online bagaimana??