Recenze vynikajícího rozšíření pro prohlížeč Firefox, které si ihned zamiluje každý webdeveloper.
Firebug je rozšíření (extension) pro vynikající webový prohlížeč Firefox. Firebug, přestože je velmi malý (300 kb), je neocenitelnou pomůckou webdevelopera. Po jeho instalaci se vám ve Firefoxu vpravo dole objeví malá kruhová zelená ikonka s bílou fajfkou. Pokud na ni kliknete, rozbalí se z dolní lišty Firefoxu okno Firebugu, ve kterém najdete vše potřebné. V případě potřeby můžete Firebug spustit také v samostatném okně, což je milá funkce nové verze.
Záložka HTML pod sebou ukrývá zdrojový kód právě načtené stránky. Ten je přehledně „sbalený“, a vy si můžete rozkliknout pouze ty části, které vás zajímají a zbytek vás nebude rušit. Při označení určité části zdrojového kódu uvidíte napravo v okně Firebugu CSS vlastnosti, které se zvýrazněné části kódu přímo týkají. Tyto vlastnosti můžete dokonce měnit, ale o tom až za chvíli.
Vynikající věcí je tlačítko Inspect. Kliknete na něj, poté najedete na libovolnou komponentu na webu, například obrázek a ve Firebugu hned vidíte její místo ve zdrojovém kódu a CSS styly, které tuto komponentu ovlivňují. Všechny CSS vlastnosti webu můžete měnit přímo „za běhu“. Nevyhovuje vám padding 5 pixelů? Změňte ho na 10. Nelíbí se vám background-color:white? Změňte ji na gray. Každá z těchto změn se ihned projeví v prohlížeči. Atributy se ve zdrojovém kódě stránky samozřejmě nemění, vše probíhá pouze v okně prohlížeče. Je to mnohem pohodlnější než pokažné změněný css soubor uploadovat na server. Jednoduše neocenitelná pomůcka webdesignéra.
Pod záložkou Net se skrývá další užitečná utilitka. Když kliknete v prohlížeči na tlačítko refresh, Firebug vám spočítá, jak dlouho trvalo nahrátí webu a jak dlouho se nahrávaly jednotlivé komponenty. Pro představu se mi Stoyan’s Page nahrávala 621 ms, z toho nejdéle trvalo natažení statistiky toplist (330 ms), poté počítadlo od BlueBordu (158 ms) a třetí nejpomalejší bylo natažení google-analytics (98 ms). Zato takové soubor s css styly se nahrál za 16 ms. Pomocí Firebugu můžete své stránky optimalizovat a porovnávat, jak se různé změny na webu projeví na čase nahrátí stránky.
Dále je ve Firebugu implementovaná konzole JavaScriptu a DOM Inspector, skvělé funkce pro vývoj kaskádových stylů, jako např. zvýrazňování box elementů, pravítko, pomocné lišty… je toho opravdu hodně. Více funkcí se dočtete na oficiální stránkách.
