Pro tvůrce webových stránek existují doplňky v internetových prohlížečích, které dokáží člověku ušetřit hodně práce a času. V tomto článku chci popsat hlavní možnosti doplňku FireBug 1.2.1, ten je určen pro Firefox a je v češtině. V navazujícím článku potom popíšu možnosti podobného pluginu pro Internet Explorer 6 a 7.
K čemu slouží
Tento doplněk umí www stránku v prohlížeči modifikovat, přičemž úpravy se ihned projevují v prohlížeči. Modifikovat se může Javascript, CSS, (X)HTML.
(X)HTML
- Automatické rozformátování HTML stránky - HTML tagy jsou přehledně odsazené do úrovní.
- Barevné rozlišení HTML tagů a jejich atributů.
- Možnost přidat HTML tag na určité místo nebo jej odebrat.
- Změnit atributy HTML tagů.
- Kopírovat HTML – po klinutí na určitý tag je možné zkopírovat do schránky HTML kód tagu včetně podřízených HTML tagů. Např.
<a href="http://www.mediawiki.org/"> <img alt="Powered by MediaWiki" src="http://upload.wikimedia.org/skins/common/images/poweredby_mediawiki_88x31.png"/> </a>
- Kopírovat innerHTML – zkopíruje do schránky jen HTML kód uvnitř vybraného HTML tagu. Např.
<img alt="Powered by MediaWiki" src="http://upload.wikimedia.org/skins/common/images/poweredby_mediawiki_88x31.png"/>
- Kopírovat xPath – zkopíruje do schránky cestu k vybranému elementu ve formátu jazyka xPath. Např. /html/body/div/div[4]/div/a
- Zobrazovat náhledy obrázků po najetí kurzoru nad <img src=”…”
- Možnost přejít na právě označený HTML tag v editoru Firebugu
- Pomocí zobrazení na záložce DOM je možné zjistit naplněné hodnoty pro Javascript daného tagu. Tyto hodnoty jsou podbarveny šedou barvou. Viz tento obrázek:
CSS
Po kliknutí na HTML tag se zobrazí v pravé části pod záložkou styly detaily o hodnotách CSS.
- Přehled všech použitých vlastností CSS, aplikovaných na tento element.
- Přehled CSS tříd, s informacemi odkud se CSS vlastnosti převzaly.
- U každé třídy je uveden řádek a název css souboru, odkud se styl aplikoval.
- Jednotlivé CSS vlastnosti jdou lehce zakázat(ihned se projeví v prohlížeči) pomocí kliku na ikonu před názvem vlastnosti v pravé části Firebugu. Obnovení do původního stavu probíhá dalším kliknutím.
- Pomocí pravého tlačítka myši se zobrazí možnosti např. upravit styly prvku, přičemž se objeví element.style. Do této části se vpisují css pravidla pro daný prvek. Zase se ihned aplikují do www stránky.
- Pomocí pravého tl. myši a volby obnovit vrátíme nastavení CSS pro element do původního tvaru.
- Na záložce rozvržení můžeme zjistit velikosti jednotlivých vnitřních a vnějších okrajů
Všechny CSS hodnoty můžete editovat pomocí záložky CSS v hlavní levé části Firebugu.
Javascript
Lze i měnit Javascriptový kód, ladit jej, s využitím záložky DOM je možné zjistit a nastavit důležité vlastnosti, které jsou zobrazené na právě vybraný prvek. K ladění Javascriptu existuje dokonalejší doplňek, který už byl jako součást prohlížeče Mozilla(jejímž úspěšným následníkem je Firefox). Tento doplněk se jmenuje JavaScript Debugger.
Obecné funkce
Obecně můžete tento doplněk použít pro vysvícení “box modelu” - obsah HTML tagu a jeho podřízených prvků. K tomuto stačí kliknout na HTML tag a jeho obsah se vysvítí. K viz následující obrázek:
Při zapnuté funkci Zkoumat a pohybu kurzoru myši po obsahu www stránky se automaticky překresluje hlavní část FireBugu, včetně aktualních překreslení vlastností CSS k danému prvku.
Dále mezi užitečné nástroje patří zjišťování co přišlo v http hlavičce, doba načtení jednotlivých prvků na stránce,
Firebug Lite
Pro prohlížeče Opera, IE a Safari je možné použít verzi Firebug Lite. K jejímu provozu je nutné přímo do hlavičky www stránky nadefinovat kód pro spuštění javascriptové verze Firebugu:
<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'> </script>
Více informací lze nalézt na http://getfirebug.com/lite.html. Pro Internet Explorer existuje vlastní doplněk Internet Explorer Developer Toolbar, který popíšu v dalším článku.
