Firebug adalah add-on untuk firefox yang berfungsi untuk menginspeksi seluruh elemen html dari web yang sedang dibuka, pada dasarnya firebug adalah alternatif dari Developer Tools yang secara default telah disertakan pada browser berbasis Webkit.
Selain itu, segala aktifitas debugging javascript dapat dilakukan dalam firebug ini. dan Tutorial kali ini saya akan menjelaskan penggunaan dasar dari add-on yang memang menjadi add-on wajib bagi developer web.
instalasi
Instalasi firebug bisa dilakukan melalui halaman Add-on Firefox. anda bisa membukanya melalui menu Tools > Add-on. selanjutnya pada box pencarian ketikkan firebug lalu tekan enter untuk mencari add-on ini.
Setelah anda menginstall Add-on firebug, maka sebuah icon bug akan muncul pada toolbar firefox anda. Anda dapat mengklik icon tersebut untuk mengaktifkan firebug.
User Interface
Ketika firebug diaktifkan, ada 6 tab yang berbeda mulai dari, console sampai Net. setiap Tab memiliki fungsi yang berbeda-beda sesuai dengan namanya, dan berikut adakah sedikit ulasan dari tiap tab:
Console
tab ini berisi console javascript, jika terdapat error pada website (error javascript), maka detail error tersebut akan ditampilkan pada console. Andapun dapat mengetikkan script js pada textbox di bawahnya, tekan enter untuk menjalankan script anda.
sebagai contoh, ketik script berikut dan tekan enter:
alert('Hello Firebug!!');
HTML
tab HTML berisi struktur HTML dari halaman web yang sedang dibuka, anda juga dapat melihat style/css yang digunakan disetiap elemen html. sebagai contoh, kliklah salah satu elemen dan perhatikan pada bagian kanan, disana akan ditampilkan pula Style yang diterapkan pada elemen tersebut.
Andapun dapat mengedit langsung kode html dan css tersebut, tinggal klik dua kali pada elemen yang ingin anda edit. hasilnyapun akan langsung ditampilkan pada browser.
CSS
Tab ini akan menampilkan isi dari CSS yang digunakan pada website. jika terdapat lebih dari satu file CSS, maka akan ditampilkan di dalam dropdown menu.
Ketika anda mengaktifkan “Source Edit” anda dapat mengedit file css tersebut dan melihat perubahannya langsung pada browser.
Hasil edit akan kembali berubah ketika anda merefresh browser anda.
Script
sama halnya dengan tab CSS, namun tab ini menampilkan kode javascript yang digunakan.
Bada bagian kanan, terdapat kolom untuk debugging scrit js. Anda dapat melakukan “watch” terhadap suatu perintah js atau menambahkan breakpoint. Bagian ini akan sangat membantu untuk proses debuggin js.
DOM
DOM atau Data Object Manipulation, menampilkan informasi-informasi yang terdapat pada setiap elemen HTML yang ada.
Pada umumnya informasi yang ditampilkan bersifat teknis dan sangat membantu dalam pemrograman javascript.
Net
Tab ini akan menampilkan detail file-file yang diload pada halaman web, informasi yang dicantumkan antara lain, url/lokasi file tersebut status, ukuran file, dan kecepatan loading file.
biasanya digunakan untuk mengukur seberapa cepat suatu website dimuat.
Contoh penggunaan
Oke, untuk lebih memahami penggunaan firebug, kita akan lakukan uji coba dengan situs yang sedang anda baca ini.
Pertama-tama aktifkan firebug pada firefox anda.
Scroll browser sampai anda melihat logo ariona.net pada header. lalu klik kanan, dan pilih Inspect Elemen.
dengan begitu, firebug akan langsung menampilkan elemen yang dipilih barusan, yaitu h1. perhatikan juga pada kolom yang terdapat dibagian kanan, yang menampilkan Style dari elemen h1 tersebut. Loh kok h1? bukan img? kok bisa?
Untuk mengetahuinya alihkan pandangan anda pada bagian kanan, perhatikan bahwa saya menggunakan background-image untuk menampilkan gambar dan property-property lainnya.
Cobalah untuk mengedit value dari setiap property, misalnya ubah ukuran height dengan cara mengklik dua kali pada value height.
perubahan pun dapat anda lihat langsung pada browser.
Sekarang beralihlah ke tab Console. kita akan menguji script js. ariona.net menggunakan library jquery jadi kita bisa memanfaatkan selector dan beberapa fungsi jquery untuk melakukan pengujian. misalnya ketikkan script berikut
$('#logo').slideUp();
lalu tekan enter, dan logo ariona.net pun bergeser menghilang.
Developer Tools
Seluruh fitur yang terdapat pada firebug pasti dapat anda temukan pada Developer Tool bawaan setiap browser webkit (Chrome, Safari). Tapi ada beberapa tab pada Developer Tools yang tidak ada pada Firebug, seperti Audit.
Jika anda pernah menggunakan aplikasi pengujian kecepatan website, seperti PageSpeed dari Google, maka tab Audit ini tidak jauh berbeda dengannya.
Kesimpulan
Kedua tool tersebut sangatlah membantu dalam proses developing website, atau sekedar menganalisis kode HTML,CSS dan Javascript pada website lain. Jika anda bermaksud untuk meniru desain suatu web, anda dapat menganalisis tiap elemen dan bagaimana designer web tersebut memberikan style pada elemen-elemennya.
add-on, firebug, firefox
Pingback: Software edit Blog atau Web | Dedi Blog
Pingback: Firefox vs Chrome, mana yang lebih unggul? | ariona