Tutorial jQuery – II – Firebug

Î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.

2 Comentarii

Ursachi Alexandru a scris

Sunt complet incepator habar nu am de js sau jquery…
css si html ma descurc foarte bine.
Consider ca ar fi mult mai ok daca ne-ai invata cum sa facem si sa folosim scripturile…
nu de alta dar firebug-ul meu… nu mai arata cum arata al tau… asa ca codul daca este scris sigur va ramane functional

Adaugă un comentariurăspuns pentru

Link-urile în context sunt binevenite. Comentariile fără nume/email valid sunt șterse.
PS: Comentariul NU este editabil.

Site-ul blog.iamntz.com utilizează cookie-uri. Continuarea navigării presupune acceptarea lor. Mai multe informații.

windows apple dropbox facebook twitter
windows apple dropbox facebook twitter