În postul anterior am precizat, în fugă, despre firebug. Pe scurt, firebug (FB) este o extensie pentru firefox (FF) ce îi permite unui web developer următoarele (şi nu numai):

• Debugging pentru javascript. Breakpoint-uri, condiţii şi alte chestii drăguţe, nefolositoare în momentul de faţă;
• Profiling. La fel de inutil în momentul de faţă, dar foarte util la scripturile cu probleme, îţi permite să vezi ce funcţie consumă cel mai multe resurse;
• Inspector – Poţi selecta un element din pagină, după care îi poţi modifica atributele şi proprietăţile CSS. De asemenea îţi arată schimbările dinamice. Ceea ce înseamnă că, în cazul în care faci schimbări în cod după încărcarea paginii (exemplu: adaugi o clasă), acestea apar în inspector. Este una din cele mai utile funcţii ale FB;
• Consola – (aproape) Tot ce înseamnă javascript/jQuery poate fi rulat în consolă. Din nou, asta te va scuti de multe refresh-uri

Activarea Firebug

Deoarece activarea FB pentru toate site-urile îngreunează browserul, este recomandat să îl activezi doar unde ai nevoie, după care îl dezactivezi:

După ce bifezi “Console”, “Script”, “Net” şi apeşi pe “Enable [...]“, Firebug este gata de muncă :

Luând unul din exemplele din articolul precedent, comanda

$(’strong’)

Va returna un obiect cu trei elemente, fiecare fiind selectabile individual, cum poţi vedea în filmul acesta. Cam în acest fel funcţionează consola Firebug.

Spuneam la început că Firebug are şi un inspector ce ne va ajuta să vedem schimbările în cod. După ce am scris în consolă:

$('strong:eq(0)').addClass('rosu');
$('.changeThis').addClass('verde');

Avem rezultatul:

Se observă că primul “strong” a primit clasa “rosu”  iar elementul cu clasa “.changeThis” a primit clasa “verde”. Se pot schimba atributele direct în codul HTML (click/dublu click pe orice atribut) sau proprietăţile din codul CSS.

Acestea fiind spuse, cred că acum avem o introducere super scurtă în utilizarea Firebug, dar mai mult decât suficientă pentru ce vom avea nevoie în această serie de tutoriale. Pe parcurs, dacă va mai fi nevoie, voi mai face adăugiri.