Web Developer Toolbar – zjednodušte si práci s (X)HTML a CSS

firefox_logoPokud vytváříte nějaké webové stránky nebo děláte čast0 nějaké úpravy, určitě se vám bude hodit tento plugin do FireFoxu, pomocí kterého si vaše stránky jednodušeji rozeberete a rychleji najdete, co hledáte.

Tento plugin vám do FireFoxu přidá lištu, ve které naleznete různé nástroje pomocí kterých si můžete například rychle vyhledat informace o určitých blocích na vašich stránkách v CSS, zvalidovat stránku, zobrazit zdrojový kód, zablokovat použití CSS a spoustu dalších věcí. Funkcí obsahuje opravdu, hodně a tak zkusím některé zajímavé formou screenů ukázat. Zároveň jsem zvědavý, jak tento článek dopadne, protože se bude skládat převážně ze screenshotů. 😀

lista_wdt

Po nainstalování pluginu se ve FireFoxu objeví tato lišta. Nyní se podívejte, co všechno tam naleznete za nabídky. A nelekejte se, co jsem to stvořil. 😀 Chtěl jsem hodit všechny nabídky do jednoho obrázku, protože každý zvlášť by možná bylo zbytečné. Aspoň to vypadá zajímavě. 😀

listy_wdt

Myslím, že je zbytečné to nějak moc popisovat, na obrázku vidíte, co všechno vlastně Web Developer Toolbar umí. Nyní si pojďme ukázat nějaké příklady, co jak co vlastně využít.

Řekněme, že chceme v CSS najít například, kde změnit barvu kterého písma. Abychom nemuseli hledat, jaký má třeba DIV ID nebo CLASS, tak si jednoduše pomůžeme tak, jak vidíte na obrázku.

ukazka1_wdt

Na obrázku vidíte, když jsem najel kurzorem na určité místo, tak kolem se objevil červený obdélník, který ohraničuje oblast oblast, ve které se nachází písmo, který jsem chtěl upravit. Nyní vím, kde ho v CSS najít.

Dále si můžete zobrazit například velikosti obrázků. Hodí se pro rychlý přehled, jak je který obrázek veliký.

ukazka2_wdt

Můžete si také zobrazit například cestu, odkud se který obrázek načítá.

ukazka3_wdt

Dále zase informace, jaký je ID a CLASS jednotlivých divů.

ukazka4_wdt

No, dále ani nevím, co bych ještě ukázal, jak jste již viděli, tak funkcí je tam opravdu hodně. Například skrytí některých obrázků, vyřadit dočasně cache, CSS, Javascript, nebo například zobrazit blokové elementy (viz další obrázek), zvalidovat si stránky na W3C, zobrazit (X)HTML nebo CSS kód stránky.

ukazka5_wdt

Snad jsem ukázal pár způsobů, jak jde Web Developer Toolbar využít a doufám, že vy ho také využijete. Podle mě je to velice užitečný nástroj pro každého, který hodně dělá s (X)HTML a tak ho každému, kdo ho ještě nezná, doporučuji. 😉

Tags: , , , ,

Leave a Reply