Firebug Web Developer Tool

Jedná se o balíček nástrojů, pomocí kterých můžete analyzovat a testovat rychlost načítání podle každé komponenty, souboru, můžeme také upravovat, sledovat a ladit zdrojový kód, CSS, HTML a Javascript webové stránky okamžitě a v reálném čase sledovat změny na webu. Slouží také k analýze chování proměnné nebo adresy URL s parametry, přičemž je možné zjistit, jaké parametry jsou odesílány a na co server reaguje.
Některé z funkcí, které přináší Firebug:

• Úpravy HTML v reálném čase.
• Úpravy CSS v reálném čase.
• Úpravy JavaScriptu v reálném čase.
• Rozložení CSS.
• Debugger JavaScriptu.
• Integrovaný vyhledávač.
• Monitorování síťové aktivity.
• Průzkumník DOM.
• Obsluha chyb v Javascriptu, CSS a XML

Začneme stažením a instalací pluginu Firebug:
[color = # 2f4f4f] Stáhnout Firebug [/ color]

Z webových stránek doplňků Mozilla budeme mít přístup k doplňku a jeho instalaci
Jakmile je Firebug nainstalován a Firefox restartován, můžeme k Firebug rychle přistupovat kliknutím pravým tlačítkem na obrazovku webu, na které chceme pracovat, nebo z nabídky nástrojů
Vezmeme web příkladu spojených národů http://www.un.org/en/, vytvoříme správnou licenci na obrazovce a otevře se obrazovka s Firebug.

ZVĚTŠIT

V tomto případě na záložce síť vidíme váhu v kb a v jakém pořadí prohlížeč prvky vykreslil a jak dlouho trvalo zobrazení každého prvku, je zajímavé si povšimnout, že z 6,61 s trvá stránka vykreslení, dvě sekundy odpovídají jednomu obrázku, což je jazyková lišta, pak bychom si mohli myslet, zda je možné ji optimalizovat.
Na kartě HTML a CSS můžeme ukázat na blok struktury a ten nám ukáže kód.

ZVĚTŠIT

Zde například ukážeme na horní banner div, který odpovídá id #topbanner v souboru style.css. Pokud klikneme na kód css, můžeme jej upravit a to se dočasně projeví na webu. Karta konzoly je ta, která nám v případě selhání umožní zobrazit a sledovat vyvolání a chyby javascriptu. V případě chyby zobrazí soubory a číslo řádku kódu, kde k chybě dochází.

ZVĚTŠIT

Firebug nám pomáhá rychle najít objekty DOM a poté je za běhu upravovat. Umožňuje provádět inspekci DOM.
The Document Object Model nebo DOM („Objektový model dokumentu“ nebo „Objektový model pro reprezentaci dokumentu“) je to v podstatě rozhraní pro programování aplikací, které poskytuje standardní sadu objektů pro vykreslování dokumentů HTML a XML.