FireBug, o extensie a browserului FireFox care poate face viata unui dezvoltator web mult mai usoara iar munca mult mai productiva.

Acesta este o scurta introducere in FireBug, extensie atat de utila si de simplu de folosit. Ce este FireBug? FireBug este o extensie pentru Mozilla Firefox cu ajutorul caruia se poate face debug, se poate edita, monitoriza codul html, css, javascript, si care contine si multe alte instrumente, printre care o consola javascript, posibilitatea de a monitoriza timpii de executie sau de incarcare pentru o pagina sau imagine si multe altele.

Pentru utilizatorii de Internet Explorer exista WebDeveloper ToolBar, insa dupa parerea mea (si nu numai) ToolBar-ul din IE este “mic copil” pe langa FireBug. Pentru a avea acces la Firebug trebuie instalat browserul FireFox si instalata extensia Firebug.

Cativa pasi pentru a vedea “ce face” aceasta extensie:
1. Deschide un browser (FF) si navigheaza catre o pagina (simpla, pt a nu incarca ecranul cu detalii irelevante) – eu am ales google. Cand pagina s-a incarcat, apasa F12 (shortcut pentru a deschide FireBug window):

Ce putem vede in imaginea anterioara (click pe imagine pentru a vede imaginea marita): fereastra browserului – cu pagina google incarcata – iar in partea de jos fereastra FireBug, fereastra compusa din doua subferestre: in partea stanga putem vedea arborele HTML al pagini iar in partea dreapta proprietatile css asociate elementului HTML selectat in fereastra din partea stanga. La selectarea unui element nou, proprietatile noului element selectat se incarca in fereastra din partea dreapta.

In acest moment, daca clickam cu butonul drept al mouse-ului (right click) in pagina deschisa in browser vedem in meniul care se deschide o noua comanda – Inspect element.

Aceasta comanda deschide (daca e inchisa) fereastra FireBug si selecteaza nodul corespunzator elementului pe care s-a click-at.

In monetul in care mouse-ul ajunge deasupra unui nod (in arborele din fereastra FireBug), elementul respectiv este evidentiat in fereastra browserului. In imaginea urmatoare mouse-ul este desupra codului HTML care defineste campul unde se introduce expresia de cautare in google. Aceasta este evidentiata, asa cum se poate vede in imagine urmatoare:

Puterea acestui instrument consta in faptul ca permite modificarea oricarui element in arborele html precum si a proprietatilor css asociate unui nod din acest arbore. In continuare voi modifica putin pagina google pentru a arata mai “cool”:

.

Asa cum se vede, am modificat dimensiunea campului de cautare, precum si textul respectivului textbox (input). Acum vreau sa modific si logo-ul google:

.

Parca e mai frumos acum! (glumesc).

Ceea ce am vrut sa fac pana acum a fost sa demosntrez o mica (foarte mica) parte din puterea acestui instrument. Folosit cu pricepere el poate fi u adevarat util oricarui webdeveloper.