In de serie FireFox-plugins is het nu de beurt aan 'Firebug'. Deze plugin is bedoeld voor internet-programmeurs die regelmatig moeten debuggen.

Om deze plugin te installeren, kies je uit het menu 'Extra' de optie 'Add-ons' en klik je rechtsonder op 'Extensies verkrijgen'. Je komt dan op de site van Mozilla met bovenin een zoekvenster. Typ hier 'Firebug' en klik op 'Zoeken'.

Er is een grote groene installatieknop waarmee je (vanuit FireFox) de plug-in kunt installeren. Herstart na installatie FireFox en controleer in het menu 'Extra' -> 'Firebug' of de plugin geactiveerd is.

Als mensen mij vragen om advies bij een XHTML-/CSS-probleem, grijp ik altijd meteen naar Firebug om te kijken wat ze gedaan hebben. Ik surf naar de pagina en rechts-klik op het probleem-onderdeel. Onder aan het uitklapmenu staat een optie 'Inspect Element' waarmee je de html-code en de bijbehorende CSS-code naast elkaar ziet.

Als je op een html-tag links klikt, dan zie je rechts alle CSS-code die erop van toepassing is. Het leuke is hier dat alleen de CSS getoond wordt die hoort bij de geselecteerde tag. Zelfs de CSS-code die door andere code wordt overschreven (dit is duidelijk door een streep door de code). Ook zie je meteen van welk CSS-document de code komt - dit scheelt een hoop zoekwerk en voorkomt dat je iets over het hoofd ziet.

Firebug zal waarschijnlijk ook in de smaak vallen bij javascript-programmeurs omdat Firebug de mogelijkheid biedt om de DOM te inspecteren (de boom met alle elementen waaruit een pagina bestaat). Javascript-programmeurs moeten ook beslist eens de Venkman Javascript Debugger proberen.

Net als bij 'Web Developer' kun je bij Firebug zien hoeveel ruimte een tag/block in beslag neemt. Ga gewoon met je muis over de tags in de html-weergave en het bijbehorende blok zal blauw geaccentueerd worden in de pagina-weergave.

Als je deze plugin eenmaal gebruikt, snap je niet hoe anderen zonder kunnen!