Firebug díky svému jednoduchému rozhraní může působit jako na funkce omezený nástroj, opak je ale pravdou. V předchozích dílech jsme se seznámili se základy práce a možnostmi rozšíření, nyní se proto podíváme, jak si ještě více ulehčit práci.
Klávesové zkratky
Používání klávesových zkratek vaši práci výrazně urychlí. Pro jejich nastavení klikněte na logo v levém rohu panelu a zvolte položku “Upravit klávesové zkratky”. Osobně považuji za nejužitečnější “Přepnout prozkoumávání”, “Zaměřit vyhledávání” a “Otevřít firebug”.
Konzole
Standardně se v konzoli zobrazují jen chyby scriptů a http requesty. V menu voleb, které má konzole, stejně jako i ostatní záložky, ukryté pod malou šipkou, lze však zaškrtnout i jiná hlášení. Velmi užitečný může být třeba výpis chyb CSS.
Druhou velmi zajímavou volbou je “Rozšířená příkazová řádka”. Ta ve své standardní velikosti zabírá pouze poslední řádek konzole. Jejím rozšířením se přesune do pravé části a zabírá tak celou výšku okna Firebugu. Narozdíl od výchozího nastavení se nespouští klávesou ENTER, ale tlačítkem “Spustit”. To umožňuje psát komplexnější scripty na více řádků.
HTML
Při větší úpravě dokumentu se hodí upravené změny zkopírovat. Kliknutím pravým myšítkem na element stromu, v záložce HTML, se rozbalí kontextová nabídka s volbou “kopírovat HTML”. Vybraný element se tak zkopíruje i s potomky do schránky jako plain text. Teoreticky tak lze ve Firebugu sestavit celou stránku a tu pak jen zkopírovat.
Velmi užitečná funkce je rozvržení box modelu. Je skrytá v hlavní záložce HTML, v pravém okně záložka “Rozvržení”. Graficky znázorňuje vztah vlastnosti margin, padding, border a rozměrů. Kliknutím na jednotlivá čísla můžete hodnoty měnit. Ty se samozřejmě projevují i v záložce Styly. Vše je navíc v interakci s pravítkem, které se při editaci zobrazí na stránce.
Skripty
Ladění scriptů je, řekl bych, stěžejním směrem, kterým se poslední verze Firebugu ubírají a není divu, javascript již dávno není obyčejným scriptovacím jazykem na simulování kalkulačky.
Asi nejvíce používané při ladění scriptů bývá sledování hodnot proměnných a zastavování scriptů breakpointy. Sledovat proměnnou můžete v pravá části okna záložky Skripty. Stačí kliknout na řádek “Sledování proměnné” a vyplnit zde její jméno.
Breakpointy jsou označené řádky scriptu, u kterých se přeruší vykonávání. Kouzelné na nich je to, že platnost breakpointu můžete zpodmínkovat hodnotou proměnné (např “reallyStep=20″). Umístíte ho tak, že na záložce Skripty vyberete z roletky script a kliknete nalevo od čísla řádku. Řádek se označí červeným puntíkem. Pokud kliknete pravým tlačítkem myši, objeví se navíc také bublinka, do které se vypíše podmínka platnosti breakpointu. Přerušení zrušíte opětovným kliknutím na řádek. Pokračovat ve scriptu pak můžete modrou šipkou.
Velmi užitečné může být profilování scriptu, které vám ukáže systémovou náročnost vámi používaných funkcí. K používání této funkce je třeba Firefox v3.6+. Přepněte se na záložku Konzole a klikněte na tlačítko “Profilovat”. Nyní spouštějte scripty které chcete testovat nebo znovu načtěte stránku. Opětovném stisknutím tlačítka zobrazíte výsledky.
Málo známou funkcí Firebugu je, že můžete zapisovat svými scripty přímo do konzole, což je velmi praktické při ladění. K tomu slouží sada jednoduchých funkcí:
console.log(par); console.info(par); console.warn(par); console.error(par);
Kde “par” je hodnota, kterou chcete vypsat. Zpravidla tedy řetězec nebo proměnná. Rozdíl je pouze ve formátování výstupu a samozřejmě smyslu účelu. Navíc každou z těchto funkcí lze volat stylem.
console.log("value of x is %s and value of y is %d", x, y);
Síť
Záložka síť informuje o přenesených datech a výpis lze filtrovat podle jejich typu. Krom toho, že zde máte krásný přehled o datové náročnosti jednotlivých souborů, je zde patrné, jestli soubor skutečně existuje. To je velmi užitečné například u obrázků, protože IE negeneruje událost načtení stránky, pokud nemůže nalézt nějaký obrázek odkazovaný na stránce. Je tak tedy snadné kontrolovat, jestli jsou načtené všechny soubory s CSS, JS, Flash a pod.
Vyhledávání
Funkce vyhledávání, kterou najdete vpravo nahoře okna Firebugu, vyhledává vždy v právě aktivní záložce. V případě záložky Skripty je pak možné skočit rovnou na konkrétní řádku zapsáním “#119″, kde 119 je číslo řádku.
Firebug lite bookmarklet
Na konci bych chtěl ještě zmínit Firebug lite, což je odlehčená náhrada Firebugu, spustitelná i v jiných prohlížečích než Firefox. Nejednodušší způsob, jak jej načíst do stránky, je tento Firebug Bookmarklet.
Závěrem
Možností je ve Firebugu ještě mnohem více, ale sepsat je, by zabralo mnoho času. Místo toho níže uvádím několik odkazů, které vám můžou pomoci s dalším seznámením.
Práce s konzolí podrobně
Firebug a Flash
Oficiální dokumentace