Blogodolar

Firebug, Add-on Mozilla yang Wajib Anda Instal

Oleh

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.

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).

element ispection

4. Arahkan ikon tersebut ke bagian yang ingin Anda inspeksi, misalnya bagian konten sehingga muncul tanda seleksi berupa kotak biru.

selection

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.

tampilan CSS

7. Selain bagian konten, Anda juga menginspeksi CSS bagian lain seperti sidebar, header, dan sebagainya.

Selamat mencoba!

Reader Interactions

Comments

  1. 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’.

  5. Seperti ini jawabannya, kadang saya ingin mengetahui jenis font yang dipake blog yang tulisannnya nyaman dibaca, sekarang dapet ilmunya, nuhun kang 🙂

  7. dengan add-on firebug ini serasa punya panel control sendiri, tanpa harus sign in dulu.
    nuhun ya Kang buat tipsnya

  10. Nanti saya coba yah mas.. insyallah bisa berguna.. 🙂 Terima kasih Infonya, Nice Job For you 🙂

  11. 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.

  16. 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

  17. Awsome website! I am loving it!! Will be back later to read some more. I am taking your feeds also

  25. caranya memunculkan icon firebug di pjok kanan atas mozila firefox bagaimana mas…
    dan kalu mau masuk wordpress admin tanpa online bagaimana??