Menggunakan Firebug

Firebug adalah salah satu pluggin Firefox yang harus ada bagi seorang developer web. Dengan firebug kamu dapat mengedit, mendebug, dan memonitor CSS, HTML, dan JavaScript secara live, tampa harus kembali ke file editor anda. Adapun fitur fitur yang dimiliki oleh firebug adalah

Dapat menampilkan HTML dalam bentuk yang enak dibaca. Maksud nya sudah di atur formatnya dalam sebuah colapsible tree. hal ini dapat membantu kita dalam mendebug susunan tree HTML kita. Kita juga dapat ngedit kode htmlnya secara langsung.
Ada sebuah inspector, dimana kita bisa melihat style, dan komponen dengan mengklik komponen tersebut. Kita juga dapat mengedit style dan komponen tersebut.
Struktur DOM, Ini adalah fitur yang menampilkan seluruh komponen DOM pada browser. Otomatis kita bisa ngeliat semua fariabel dan fungsi yang ada di halaman tertentu
Console. INI adalah bagian terpenting yang selalu kita monitoring jika kita sedang membuat aplikasi yang menggunakan javascript. Kita dapat melihat error, XHR request dan response. Selain itu, ada panel untuk running script, jadi kita bisa mengeksekusi script tertentu dari firebug menggunakan script/fungsi yang ada di web.

Pada kesempatan kali ini kita akan membahas 4 topik tentang penggunaa firebug

1. Instalasi dan penggunaan firebug

Firebug adalah sebuah pluggin jadi anda dapat menginstallnya seperti anda menginstall pluggin firefox yang lain. Firebug bisa di dapatkan di http://getfirebug.com/. Setelah install maka restart lah webbrowser anda. untuk menggaktifkannya anda bisa menekan tombol serangga di pojok kanan bawah.

Cara Aktifasi Firebug, cukup dengan mendouble click iconya

Tampilan page HTML dalam bentuk tree yang mudah di lihat

Monitor semua koneksi dan kecepatan stuff web anda

Pada panel firebug terdapat 5 tab utama yaitu console, HTML, CSS, Script, dan net. Console di gunakan untuk melihat aktifitas debuging yang terjadi, HTML untuk melihat code HTML yang di load, Css untuk melihat kode CSS yang di load, script juga untuk melihat code javascript yang di load. Panel Net adalah untuk melihat apasaja yang website kita panggil dan bagaimana urutan pemanggilan, status dan kecepatanya.Ketiga gambar diatas merupakan basic penggunaan dari firebug yaitu kemudahan dalam melihat status yang terjadi di website kita.

2. HTML DOM Inspector dan Modifikasi HTML element

Tombol Inspect element

Salah satu fitur penting yang ada di frebug adalah HTML DOM Inspector, di mana firebug dapat melihat elemen-elemen tertentu dari web kita secara lengkap, baik dari segi code html maupun css tampa harus mencarinya satu persatu. cukup dengan meng klik tombol inspect (tombol kedua berlambang pointer biru, pojok kiri atas) atau dengan mengklik kanan object yang mau kita inspect.

Selain hanya melihat kita juga dapat melakukan editing terhadap tree html yang ada. Cukup dengan mengklik kanan element tree pada panel html firebug maka akan terdapat berbagai macam piliha aksi yang dapat dilakukan mulai dari edit, copy dan delete element tersebut.

Edit website element

Gampang bukan? dari hasil inspeksi tersebut bisa kita lihat apasaja style css yang ada, event-event apa saja yang terjadi pada element itu. jika kita mengubahnya menggunakan javascript maka bita bisa meng-log event yang terjadi dll.. anda masih bisa meng explorasi fitur-fitur yang ada.. banyak sekali fitur2 yang belum dibahas.

3. CSS Inspector dan Modifikasi CSS

Css kadang-kadang selalu menyusahkan programmer, dengan bantuan firebug programmer terselamatkan. kita dengan mudahnya melakukan perubahan-perubahan serta inspeksi terhadap sebuah style. perhatikan gambar berikut:

Tooltips untuk melihat Image background

Mengedit Css secara Live

Mendisable Sebuah Style pada element tertentu

4. Debuging Javascipt

Firebug juga membantu dalam proses mendebug javascript, kita dapat melihat bagaimana respon ajax yang kita lakukan, error message apa yang terjadi serta dapat melakuka fitur debuging yang advance sperti stack trace, watch dlll. berikut adalah contoh script yang digunakan untuk melihat isi dari sebuah object javascript

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>FireBug Console Testing</title>
 
	<script type="text/javascript">
 
		// Define complex object.
		var obj = {
			Nama: "Ibnu",
			Alamat: "Pekanbaru",
			Bahasa:
				[
				"PHP",
				"Javascript",
                                "Java"
				]
			};
 
		console.log( obj );
		console.dir( obj );
 
	</script>
</head>
<body>
 
	<h1>
		FireBug  Testing
	</h1>
 
</body>
</html>

maka ketika script diatas dipanggil maka akan muncul

Hasil Output Console

15 Comments

December 19, 2010 12:08 am by juju Reply

thanks,
ini dia yg q cari2, dl pernah pake tp lupa nama plugin'a
January 11, 2011 2:08 am by Mas Adi Reply

Weeeeeeee.........
lengkap bener mas...
thank banget inpohnya.... :D
March 21, 2011 6:50 pm by JMF Reply

mau tanya nih,,, stelah CSS diubah, kok, setelah halamannya loading kembali ke semula???
trus bgaimana caranya agr bisa permanen???
March 24, 2011 3:06 pm by yudi Reply

mas bro,,,mo nanya,,,
klo mo ngasih icon/gambar sesuai tipe file gmn, pake CI,,,,
supaya klo abis upload,trus muncul icon d ikuti nama filenya,,,
klo word ada lambang wordnya,,,
klo mp3 ada lambang mp3nya,,,
April 23, 2011 10:48 pm by yusran Reply

iya kang, kok ga bisa permanen, gimana kang caranya?
May 23, 2011 7:43 am by belajar pintar Reply

pagi mas... saya sedang mempelajari firebug (newbie) kira2 prosesnya gimana mas (maaf ngrepotin) setelah tahu css / html website lain kita ingin menggunakan untuk theme kita .... bagaimana mengintegrasikannya dengan localhost dan upload di web kita.. trimakasih sebelumnya
May 24, 2011 8:56 pm by Nicko Reply

@ JMF and yusran
Kebayang gak klo Firebug bisa ganti halaman web scra permanen, jd gampang dong nge-deface web-nya koder??? Scra SAH teknis siy gak bisa ngerubah halaman web pake Firebug scra permanen, krna halaman web kan ada ada di dalam webserver, ada protokol yg hrs dilewati.. Paling klo yg di lokal, y di-copas manual prubahan yg td dibuat lewat Firebug ke file yg bersangkutan pake text editor.
May 29, 2011 6:35 pm by jurusphotoshop Reply

anda memang hebat. . .kok nggak di kembangkan ilmunya.,jadi les privat atau kursus PHP??tanks buat anda..
June 15, 2011 6:00 pm by Jah Reply

Untuk Koneksi Css ,Javascript le dalam HTML caranya gmn.,.......................
June 30, 2011 10:19 am by si cantik Reply

kayaknya firebug ny gak bisa ganti web secara permanen dech....soalnya pas di reload thu kembali ke tampilan awal sama seperti sebelum kita edit. mohon pencerahannya gmn agar bisa permanen editan firebug thu ???
July 30, 2011 12:15 pm by edy Reply

mantabs...makasih gan...artikel yang bagus.
September 17, 2011 9:17 pm by ABIIKLIL Reply

masalahku sama seperti cantik,gimana gan?
October 5, 2011 2:18 pm by ruby Reply

great!!!tambahi lagi yg bnyk y gan....br yg bc tmbh pinter....hehehe
October 26, 2011 1:54 pm by rocky racoon Reply

Ni org yang pada comment tanya cara ganti web milik orang lain secara permanen dgn firebug bener2 bikin gemas..

Firebug itu inspector... Sekedar buat inspeksi alias memeriksa / menelusuri kode sebuah web...
November 1, 2011 9:16 pm by Imam Reply

kurang ngerti sih,tapi mau di coba aja..thanks
April 20, 2012 9:41 am by agung Reply

setau saya Firebug hanya untuk melihat2 semua coding, letak coding serta apa aja yg ada..
untuk merubah, kita tetap harus menggunakan text edit.. liat codingnya, copas atau liat di line berapa, setelah itu kita cari coding dan line tsb di text edit, baru dirubah.. imho
May 6, 2012 11:42 am by ridwan Reply

wits mantap gan mkch infonya,,,,,