Web Developer Toolbar je jeden z několika užitečných rozšíření Firefoxu, který ušetří spoustu práce vývojáři webových aplikací. Web Developer Toolbar se v prohlížeči objeví jako lišta, na následujích obrázcích je její široká (oříznutá) a úzká verze.

Začnu nástroji, které mají blíž ke grafice. Nejprve lupa, u které si můžete navolit míru zvětšení. Na ukázce je vidět, že si lupa nedokázala poradit s flashem. (To ale neplatí vždy.)

V dalším nástroji můžete snadno odměřit výšku či šírku a porovnat ji s jiným elementem ve stránce. Velikost a pozice v pixelech je vidět v liště mimo stránku.

Někdy je potřeba na stránce ověřit správné zarovnávání prvků. Tímto nástrojem můžete do stránky umístit několik horizontálních a vertikálních zarovnávacích čar.

Jiným efektním kouskem Web Developer Toolbaru je výpis barev použitých ve stránce.

Pojďme od grafiky k HTML a CSS. Užitečnou funkcí při ladění stránek je následující nástroj – kurzorem ukážete na prvek ve stránce a ve žlutém rámu uvidíte jeho jméno a parametry.

Lepším pohledem může být výpis všech IDček, použitých ve stránce. Zde ale dojde k rozpadu grafické podoby, stejně jako u několika následujích nástrojů.

Zde jsou zvýrazněny všechny buňky tabulek. Popisek TD je možné vypnout, zbyde jen 1px rám, čímž se omezí vliv zvýraznění na grafiku stránky.

Někdy se hodí zobrazení komentářů. Ne vždy se nástroji podaří komentář správně umístit, nejspíš proto, že komentáře jsou běžně neviditelné.

Na následující ukázce vidíte velikosti souborů obrázků.

Do vzhledu stránky můžete interaktivně zasahovat pomocí CSS editoru. Jen si nesmíte zapomenout změny poznamenat, jinak o ně po uzavření prohlížeče přijdete.

Pro vývojáře je velmi praktická možnost nastavit definovanou velikost okno prohlížeče.

Velikosti prohlížeče je možné předdefinovat.

Web Developer Toolbar obsahuje i další nástroje na modifikaci formulářů, práci s cookies, zakazování javascriptu či popupů atp.

Závěr

Ladění vzhledu webových stránek je dosti pracné a většinou nezbývá než metoda „Zkus a dívej se“. Web Developer Toolbar je při ladění stránek velmi dobrým pomocníkem.

Výše uvedené ukázky byly převzaty z internetového obchodu CzechComputer.