Firebug je besplatna Open Source alatka dostupna kao plugin za Firefox koja omogućava pronalaženje i otklanjanje grešaka u HTML, CSS i JavaScript kodu. Tutorijal je namenjen svima koji se na bilo koji način bave web dizajnom i razvojem Internet stranica. Za praćenje i razumevanje tutorijala potrebno je da imate osnovno znanje HTML, CSS i JavaScript koda i instaliran Firebug. U trenutku pisanja ovog tutorijala poslednja stabilna verzija je 1.5 i možete je preuzeti sa zvaničnog sajta proizvođača.
Šta Firebug nije?
Firebug nije editor koda. To praktično znači da nema mogućnost trajnog čuvanja izmena koje ste testirali na Vašoj stranici (osim ako te izmene sami prekopirate i sačuvate). Funkcija ove alatke je manipulisanje kodom direktno na stranici i praćenje kako određene promene utiču na izgled stranice bez potrebe za stalnim čuvanjem, upload-om na server i osvežavanjem stranice da bi izmenjen sadržaj postao aktivan.
Iako kreatori ovog plugin-a najavljuju da će neka od budućih verzija imati mogućnost čuvanja izmena u kodu stranice, u Firebug-u ovakva funkcija trenutno ne postoji.
Šta Firebug jeste?
Firebug je trenutno najpopularniji Mozilla Firefox plugin namenjen razvoju web stranica. Omogućava proveravanje HTML koda i menjanje stilova i layout-a stranice u realnom vremenu i predstavlja naprednu alatku za otklanjanje grešaka u JavaScript kodu. Pored toga pruža pregled svih upita koje browser pravi prilikom učitavanja web stranice, kao i grafički prikaz vremena potrebnog za učitavanje, pojedinačno za svaki element stranice.
Još jedna korisna funkcija Firebug-a je mogućnost praćenja XMLHttpRequest saobraćaja, na kojem se temelji AJAX. Firebug nudi i svoju varijantu DOM Inspector-a, a omogućava Vam da sa tačno određene stranice pratite logove HTML, CSS, JS i XML grešaka, umesto preko Firefox konzole za greške.
Treba pomenuti da za Firebug postoji veliki broj ekstenzija sa različitim dodatnim funkcijama koje olakšavaju manipulaciju sa HTML, CSS, DOM i JavaScript elementima Vašeg sajta.
Takođe postoji verzija ovog plugina Firebug Lite, namenjena ostalim browserima, kao što su IE6+, Opera, Chrome i Safari.
Ekstenzije
FireFile – Firebug ekstenzija koja omogućava čuvanje CSS fajlova modifikovanih pomoću Firebug-a.
FirePHP – omogucava ispis u Firebug konzolu pozivanjem proste PHP funkcije, narocito korisno za ajax developere.
Yslow – Dodatak za Firefox integrisan sa Firebug plugin-om. Yslow analizira i ocenjuje web stranice na osnovu tri predefinisana seta pravila ili na osnovu pravila koja definiše sam korisnik. Na osnovu toga prikazuje statistiku stranice i predlaže načine za poboljšanje performansi kako bi se stranice brže učitavale u browser.
SenSEO – Ovaj dodatak služi za proveru najvažnijih on-page SEO kriterijuma i procenjuje koliko dobro Vaša web stranica ispunjava ove kriterijume. SenSEO procenjuje Vašu stranu prema smernicama za optimizaciju, koje je definisao Google, kao što Yslow rangira stranicu prema kriterijumima za optimizaciju performansi koje je definisao Yahoo.
SenSEO pruža pregled bitnih SEO komponenti web stranice i analizira on-page SEO kriterijume kao što su title, meta description, keywords, headings tagovi, i još mnogo toga. Može biti vrlo koristan alat za jednostavno ispravljanje grešaka koje ste možda prevideli tokom pisanja koda web stranice.
Pixel Perfect – Firefox dodatak pomoću koga web dizajneri i developeri mogu lako da “preklope” kodiranu HTML stranicu sa dizajnom koji treba pretvoriti u HTML/CSS, i tako vizuelno uporede koliko se napisani kod razlikuje od onoga što je predviđeno dizajnom. Piksel Perfect takođe ima Opacity opciju tako da možete istovremeno videti obe verzije i na osnovu toga lako odrediti tačan položaj i dimenzije elemenata web stranice u odnosu na originalni dizajn.
Ostale Firebug ekstenzije možete pronaći na zvaničnom sajtu Firebug.
