Při vývoji webových aplikací potřebuje vývojář nástroj, který by mu pomohl interaktivně zasahovat do zobrazených stránek, měnit CSS styly či pracovat a zadávat příkazy javascriptu. Firebug je právě tímto nástrojem, který jsem si, jakož to programátor, velmi oblíbil.
Co je Firebug
Firebug je doplňek do stále oblibenějšího internetového prohlížeče Mozzily Firefox, který umožňuje interaktivně zasahovat do zobrazených stránek a měnit tak obsah stránek, grafiku v podobě CSS, či testovat Javascriptové funkce. Tímto způsobem pomáha vyvojáří nacházet chyby ve vývoji a umožňuje tyto chyby odstraňovat.
Instalace Firebugu
Firebug je určen pro Mozzila Firefox (od verze 2.0) a je možné si jej zdarma stáhnout přímo ze stránek dopňků pro firefox.
Pohled do nitra „ohnivého broučka“
Po úspěšné instalaci se v pravém dolním rohu zobrazí ikona Firebugu v podobě brouka. Firebug je standardně vypnutý (ikona nesvítí, je šedá), proto je nutné na tuto ikonu poklepat a povolit jej. Po jeho zapnutí je možné se v okně přepínat mezi jednotlivými záložkami, kdy v každé je možné upravovat část (řekněme použitou technologii) webové stránky.
Konzole
V této záložce je možné nalézt velmi detailně zobrazené chybové zprávy JavaScriptu. Které je možné si rozkliknout a okamžitě přejít na řádek, ve které se stala chyba. Tato konzole taktéž zobrazuje informativní zprávy celé aplikace, mimochodem se zde můžeme dočíst, že například použití nějakých funkcí javascriptu je zastaralé a nemusí fungovat na novějších prohlížečích.
Html
Zde je možné si zobrazit HTML kod stránky, který je výborně rozčleněn do jednotlivých sekcí (tágů) stránky a jednoduše si takhle procházet celý strom HTML dokumentu. Po najetí na jednotlivý prvek (tág) HTML dokumentu se na stránkách tento element barevně označí. To je velmi dobrá vlastnost, kdy je možné tímto způsobem krásně hledat chyby v zobrazování dokumentu.
Po přepnutí do režimu úprav je možné přímo zasahovat a interaktivně upravovat HTML dokument, kdy okamžitě vydíme výsledek své práce přímo na stránkách prohlížeče.
CSS
Z názvu je patrné, že zde je možné přehledně procházet kaskádové styly zobrazeného dokumentu. Noční můra každého webového vyvojáře je umísťování jednotlivých prvků do designu celého webu. Tento nástroj tuto noční můru alespoň trošičku zahání, kdy je možné, zase interaktivně, měnit jednotlivé elementy kaskádových stylů a přitom vidět, co to udělá se stránkami.
Skripty
Záložka, která zobrazuje JavaScript, který je používán na webové stránce. Nelze přímo skripty měnit, ale je zde možnost vytvořit zde tzv. break point, a tím pomoci při debugování skriptu, k čemuž také pomáhá levý panel, kde je možné přímo vytvářet příkazy javascriptu a ty také spuštět, přičemž si okno uchovává informace, které daná funkce, či příkaz provedl, a je možné v něm pohodlně listovat. Tak například, po zadání příkazu document.getElementsByTagName(„body“), vyběhnou všechny metody a vlastnosti pro daný element.
Síť
Záložka, ve které lze nalézt veškeré dotazy a odpovědi ze serveru v pořadí, v jakém přicházely do prohlížeče. Je možné si každý dotaz rozkliknout a zobrazit jednotlivé hlavičky dotazu, i odpovědi. Je zde možnost kontrolovat jednotlivou odezvu ze serveru na každý požadavek prohlížeče.
Závěrem
Firebug je velice dobrým nástrojem pro každého webového vyvojáře, ve kterém je možné si HTML dokument stránky do detailu rozpitvat, a nalézt a taktéž ihned opravit veškeré chyby, ať již chyby zobrazování, nebo chyby JavaScriptu. Jen škoda, že něco takového nefunguje pro Internet Explorer, kde dohledat se chyby JavaScriptu je složitější, než najít jehlu v kupce sena!!!