Firebug je doplněk firefoxu obsahující sadu nástrojů nápomocných při vývoji webových stránek. Můžete sledovat i upravovat HTML, CSS nebo javascript, sledovat množství přenesených dat nebo šmírovat hlavičky dokumentu.
I přes velké množství funkcí je však Firebug intuitivním a přehledným nástrojem, kterému rychle přivyknete a už těžko ho opustíte.
Popis prostředí
Po instalaci doplňku přibude v pravém spodním rohu prohlížeče ikonka broučka, tím, že na ni kliknete, otevře se okno Firebugu. To by se dalo horizontálně rozdělit na tři části. Hlavní toolbar se záložkami (Konzole, HTML, CSS, atd..), menu (pro jednotlivé záložky) a editační okno, ve kterém se odehrává většina práce.
V toolbaru naleznete ikonku broučka, je to takové malé menu s volbami týkajících se Firebugu jako celku (velikost písma, způsob zobrazení, about, atd..). Vedle něj asi nejpoužívanější nástroj Inspektor, při jehož aktivaci přejížděním kurzoru po stránce zvýrazňujete jednotlivé elementy, které můžete po kliknutí editovat v hlavním okně. Třetí ikonkou je pauza (nebo play) pro zastavení či opětovné spuštění vykonávání javascriptu. Po těchto ikonkách následují již hlavní záložky pro správu jednotlivých oblastí stránky. Konzole, HTML, CSS, Scripty, DOM a Síť. Každá záložka má své vlastní hlavní okno, menu a vpravo vyhledávání. Dále se podíváme na jednotlivé záložky.
Konzole
Konzole umožňuje sledovat chyby na stránce a to nejen javascriptové, ale také v CSS, XML, sledovat http requesty aktivované po načtení stránky (ajaxem) a další. Také zde můžete volat funkce javascriptu, příkazový řádek je úplně naspod, nenápadně započatý třemi šipkami. Hlavní úlohou je však vést již zmíněné logy. Nastane-li chyba, vidíte na kterém řádku se tak stalo a kliknutím na záznam se přesunete rovnou na řádek v dokumentu, kde se chyba objevila.
html
Druhá záložka HTML umožňuje nejen Inspektorem zkoumat html stránky a sledovat css přiřazené jednotlivým elementům. Po označení elementu vidíte v menu záložky drobečkovou navigaci, respektive xPath prezentaci cesty. Zvolíte li “upravit” na začátku řádku, můžete psát rovnou do html stránky a aktualizovat jej podle potřeby, opětovným kliknutím na “upravit” se vrátíte zpět ke stromové interpretraci. Klikáním na jednotlivé větve stromu můžete měnit hodnoty atributů a nové atributy přidávat či staré mazat. Můžete také mazat celé elementy či celé větve elementů.
Na pravé straně vidíte přehled css vlastností aplikovaných na vybraný element. Ovšem nejen to, níže také vidíte vlastnosti zděděné a poklikáním můžete jednotlivé hodnoty nejen měnit, ale také mazat nebo přidávat nové. Příjemná je možnost používání šipek při změně číselných hodnot. Pravá část je dělená na další 3 záložky. První z nich jsou zmíněné styly, druhá Rozvržení, graficky zobrazuje box model elementu a třetí DOM, zobrazuje snad všechny DOM vlastnosti vybraného elementu.
CSS
Třetí záložka CSS slouží k editaci nebo ke sledování CSS vložených do dokumentu ať už blokově nebo nalinkováním. V menu záložky můžete opět vidět tlačítko upravit a vedle něj roletku používaných stylů. Styly můžete opět editovat dle své vůle.
Scripty
V záložce scripty můžete sledovat, editovat a ladit scripty. Menu záložky tvoří obvyklé tlačítko upravit a roletka používaných scriptů. Na konci pak naleznete nástroje ke krokování scriptu. Pravá část okna je pak opět dělena několika záložkami. Sledování umožňuje sledovat hodnotu proměnných. Pokud jde o záložky Zásobník a Breakpointy, sám nevím k čemu slouží.
Síť
V záložce Síť je možné sledovat aktivitu sítě v mnoha různých oblastech. Ty se filtrují v menu záložky. Vidíte zde datový objem jednotlivých requestů, časy na čekání i zpracování a po kliknutí na záznam také odeslané a přijaté hlavičky.
Rozšíření
Firebug nabízí také možnost doplnit funkčnost některými rozšířeními, například pro práci s cookies, kontrolu SEO, debug pro framework Symfony a mnoho dalších.
Závěr
Hodně toho nebylo řečeno, nicméně nekladl jsem si za cíl napsat referenční manuál, ale jen souhrnné seznámení. Nejlepší je, když si to každý ozkouší sám. Prostředí je intuitivní a jednotné, takže se v něm jistě rychle zorientujete. Ještě připomenu, že Firebug je funkční také v prohlížeči Flock nebo Songbird.




