Developer browser plugins, part 3
Vítám vás při další části
seriálu Developer browser plugins. Dnes se podíváme na Firebug, který je
určen pro prohlížeč Firefox.
FIREBUGje zásuvný modul, který vám poskytne funkce
na zobrazení, ladění a editování aktuální HTML stránky. Kromě toho můžete
upravovat, editovat a ladit i kaskádové styly (CSS) a JavaScript. Instalace
tohoto zásuvného modulu je jednoduchá a můžete ji zrealizovat přímo z domovské
stránky: http://www.getfirebug.com/. Po
úspěšné instalaci Firebug spustíte přes menu Tools | Firebug | Open
Firebug. Spuštění nástroje Firebug se projeví tak, že se v dolní části
prohlížeče zobrazí okno (viď následující obrázek).
V horní části okna najdete panel, který obsahuje následující
funkce: Icon Firebug (po kliknutí na ikonu se rozbalí submenu, přes které
můžete ovládat zásuvní modul; v menu najdete přibližně tři sekce s následujícím
významem: povolení/zakázaní Firebug, nastavení Firebug a linky na diskusní
skupiny, dokumentaci a atd.), Inspect – umožní v aktuální stránce
označit element, resp. blok elementů, který můžete následně editovat kliknutím
na tlačítko Edit (příslušná část kódu se přesune přímo do okna zásuvného
modulu; zajímavou vlastností tohoto editování je fakt, že všechny změny se
automaticky promítnou do zobrazené stránky), Clear – vyčistí konzolu
a Profile – je pomůcka na optimalizaci JavaScriptu. Úplně napravo je
zobrazený EditBox s lupou (ten vám umožní vyhledat požadovanou informaci
v aktivním Firebug okně) a dvě tlačítka. Prvé umožní otevřít Firebug v novém
okně a druhé slouží na ukončení práce s Firebug. Tento panel je kromě uvedených
vlastností průběžně doplňován i o další funkce, v závislosti na aktivní položce
menu nacházejícího se pod panelem. Opisované menu obsahuje tyto položky:
Console, HTML, CSS, Script, DOM a Net.
Kromě toho každé okno má napravo položku Options, po kliknutí na kterou
se zobrazí obvykle několik řádkové submenu s dalšími pro aktivní okno
specifickými volbami.
CONSOLE slouží na zobrazování chybových správ JavaScriptu, dále chybových
správ CSS a XML a též požadavků (request) a odpovědí (response) XMLHttpRequests.
Kromě toho z Console můžete volat libovolný JavaScript nacházející se v aktuální
stránce, ale i např. napsat vlastní JavaScript po aktivovaní volby Larger
Command Line (v překl. větší příkazový řádek) z menu Options, které se
nachází v pravé horné části okna.
HTML vám umožní zobrazit a editovat HTML kód aktuální stránky. Pravá část
okna obsahuje menu v kterém se nacházejí následující položky: Style
(obsahuje definice kaskádových stylů), Layout (zobrazuje CSS box model) a
DOM (zobrazuje vlastnosti vybraného HTML elementu). V každém z uvedených
oken můžete měnit libovolnou hodnotu jednoduchým kliknutím a přepsáním původní
hodnoty. Vykonané změny se následné projeví v hlavním okně HTML a zároveň i v
načítané stránce. Po aktivování položky HTML z menu se v panelu nad menu zobrazí
tlačítko Edit, které vás přepne do plnohodnotného edit módu. Za tlačítkem
Edit se zobrazuje cesta (angl. path) k aktuálně vybranému elementu (tu
můžete využít na rychlejší přesun po HTML struktuře dané stránky).
Položky CSS a Script z menu vám umožní zobrazit a editovat
kaskádové styly a JavaScript. V obou případech se po jejich aktivování z menu, v
panelu nad menu zobrazí tlačítko Edit, které vás přepne do plnohodnotného
edit módu. Za tlačítkem Edit se obvykle zobrazí submenu, které obsahuje
seznam *.css, resp. *.js souborů (v případě, že jich je víc) připojených k
aktuální stránce. Kterýkoli soubor nacházející se v tomto submenu můžete
editovat jednoduchým výběrem příslušné položky. Po aktivování položky
Script z menu nezískáte jen obyčejný editor, ale zároveň i nástroj na
debugování (ladění) JavaScriptu. Jednotlivé řádky kódu v tomto editore, jsou
číslované a můžete na ne přidat breakpointy (body přerušení). Postup je
jednoduchý. Stačí, kliknout vedle čísla řádku; následně se na tomto místě
zobrazí červený bod, který symbolizuje breakpoint (bod přerušení). Nyní stačí,
znovu načítat stránku a počkat, dokud prohlížeč spustí příslušný JavaScript kód.
Následně se vykonávaní tohoto kódu zastaví a vy můžete sledovat obsah
nadefinovaných proměnných v pravé části okna. Tato část okna obsahuje dvě
záložky: Watch a Breakpoints. Přes okno Watch můžete
nadefinovat libovolný počet proměnných, které chcete sledovat a přes
Breakpoints se můžete podívat na seznam všech aktivních bodů
přerušení.
Přes položku DOM můžete sledovat a editovat DOM
(Document Object Model) strukturu dané stránky. Poslední položkou v hlavním menu
je Net. Net obsahuje seznam všech položek, které se stahují spolu
se stránkou (např. obrázky, flash, soubory js, css, html a atd.). Při každé
položce se můžete podívat na Headers (hlavičky), Response (odpověď), velikost
souboru v B, KB, MB, včetně času, který byl potřebný na stáhnutí položky z
příslušného servera umístněného v síti Internet. Na konci seznamu nechybí sumář,
tj. celkový počet požadavků, celková velikost souborů v KB, MB a samozřejmě
celkový čas potřebný na načítaní těchto dát. Po aktivování položky Net z
menu se v panelu nad menu zobrazí tlačítko Clear, které slouží na vymazání
informací zobrazených v okně. Za tlačítkem Clear se vždy zobrazí další
tlačítka (např. All, HTML, CSS, JS, XHR, Images a Flash). Tlačítko All
slouží na zobrazení všech dostupných informací v jednom okně. Ostatní tlačítka
zobrazí vždy jen příslušné informace, např. Images (zobrazí jen informace
o stáhnutých obrázcích). Podobně fungují i ostatní tlačítka..
NÁZEV: Firebug
VERZE: 1.05
AUTOR: Joe Hewitt
SOUBOR: firebug-1.05-fx+fl.xpi
WWW: http://www.getfirebug.com/
Další části seriálu:
|
Reklama
Anketa
