FireBug

Firebug merupakan salah satu add ons untuk Firefox yang perlu ada bagi seseorang web developer. Dengan firebug, kita dapat mengedit, mendebug dan memonitor CSS, HTML, dan JavaScript secara live tanpa perlu membuka file editor. Firebug bisa didapatkan http://getfirebug.com atau di laman khas addons Firefox

Fungsi Firebug:

• Menampilkan HTML dalam bentuk yang mudah dibaca. Formatnya disusun dalam bentuk colapsible tree. Ini membantu kita dalam mendebug susunan tree HTML serta dapat mengubah gaya dan susun aturnya secara real-time.
• Mempunyai ‘inspector’, di mana kita boleh melihat style dan komponen pada mana-mana web dengan mengklik komponen tersebut. Kita juga dapat mengedit style dan komponen tersebut.
• Menggunakan JavaScript Debugger tercanggih yang tersedia pada mana-mana browser
• Menganalisa penggunaan rangkaian dan prestasi dengan tepat

Fungsi Panel Firebug:

Pada panel Firebug terdapat beberapa tab dengan fungsi-fungsinya yang tersendiri.

• Console – melihat aktiviti-aktiviti debuging.
• HTML – melihat code HTML pada sesebuah lawan web.
• CSS – melihat code CSS pada laman web.
• Script – melihat code javascript yang diload.
• DOM – melihat fungsi-fungsi yang terdapat pada sesebuah laman web.
• Net – melihat apa yang diload pada website, urutan loading, status dan kepantasannya.
   

HTML DOM Inspector dan Modifikasi Elemen HTML

Salah satu fungsi penting yang ada pada Firebug adalah HTML DOM Inspector, di mana dengan menggunakan Firebug . orang dapat melihat elemen-elemen tertentu dalam web secara lengkap, baik dari segi code HTML mahupun CSS tanpa perlu mencarinya satu persatu. Cukup dengan menekan button ‘inspect’ (button kedua dengan simbol pointer biru) atau dengan hanya klik kanan pada object yang mau di’inspect’.
Selain melihat, orang juga dapat membuat editing pada tree HTML yang ada. Hanya perlu klik kanan pada element tree di panel HTML Firebug, dan akan kelihatan pelbagai pilihan yang dapat dilakukan seperti Edit, Copy dan Delete elemen tersebut.
 

CSS Inspector dan Modifikasi CSS

CSS merupakan elemen penting pada sebuah laman web yang akan menentukan bentuk dan susun atur pada laman web. Kadang-kadang ianya menyusahkan programmer. Dengan bantuan Firebug, programmer dengan mudah dapat mengedit dan mengubah style yang ada pada laman web. lihat gambar bawah ni :

	Mengedit CSS secara Live	Disable Style pada element tertentu