Proč je Firefox nejlepší prohlížeč na vývoj stránek? Protože Web Developer extension!

Firefox používám jako svůj primární prohlížeč už hodně dlouho a za tu dobu mi prošlo pod rukama i hodně jeho rozšíření. Většinu z nich jsem zas smazal, některé potřebuju jen občas, ale na jedno rozšíření jsem si zvykl a používám ho při práci pořád – Web Developer 0.8.

Web Developer

Web Developer je jednoduchá lišta s ikonkami, ze kterých se rozbalují menu, obsahující spoustu nástrojů užitečných pro tvůrce webových stránek. Krom lišty jsou všechny příkazy dostupné i z kontextového menu u stránky. Protože popis všech příkazů a možností by byl nadlouho, tak tu stručně projdu ty příkazy, které sám nejčastěji používám a přijdou mi nejužitečnější. Následující seznam funkcí Web Developeru je tedy neúplný a značně subjektivní.

Delete Domain Cookies
Smaže všechny cookies ze stejné domény, jako má právě zobrazená stránka. Hodí se ve chvíli, kdy testujete nějakou část stránek, která s cookies pracuje, ale nechcete přitom smazat úplně všechny cookies, co si prohlížeč pamatuje. Obvykle je selektivní mazání cookies pouze prostředky prohlížeče velmi nepohodlné, ne-li nemožné.
Disable Styles
Další věc, kterou jako tvůrce stránek potřebujete přepínat každou chvíli (samozřejmě jen pokud vám jde o to, aby vytvářené stránky byly použitelné i bez stylů, a nebo vás zajímá, jak věci vidí Google a jiné vyhledávače). Doteď bylo potřeba se kvůli vypnutí stylů ponořit do nastavení.
Edit CSS
Velice zajímavá funkce: Po straně (v sidebaru) se otevře panel, kde můžete editovat CSS styly, které stránka obsahuje. Neocenitelné při diskuzích nad designem stránky a experimentování s ním. Ušetří to spoustu přepínání mezi editorem a prohlížečem a neustálé klikání na relaod.
Display Form Details
Zobrazí informace o formuláři (hodnoty atributů id, name, action apod.) a také zobrazí skrytá pole (<input type="hidden">). Při ladění složitých formulářů nemusíte díky této funkci tolikrát nahlížet do HTML kódu stránky.
Display Image Dimensions
Hodí se třeba ve chvíli, kdy doděláváte ikonky do aplikace, na kterou jste čtvrt roku nesáhli, a nepamatujete si, jakou mají mít velikost.
Display Block Size
Zobrazí rozměry všech blokových elementů na stránce. Tuto funkci používám (spolu s funkcí Resize) třeba na svých stránkách, když vkládám obrázky do článků – abych to nepřehnal s jejich rozměry.
Display ID & Class Details
Web Developer - Display ID & Class DetailsU každého elementu s nastaveným atributem id a/nebo class zobrazí hodnoty těchto atributů. Podle mě je to nejužitečnější funkce z celého balíku. Při drobných úpravách různých stránek (typicky jde o menší změny v CSS) si totiž vůbec nepamatuju, jak jsem kdy co pojmenoval – a to i přesto, že mám v názvech celkem konzistentní systém. Díky téhle funkci to nemusím pracně vyčítat z HTML.
Display Topographic Information
Přebarví blokové elementy na stránce do odstupňovaných odstínů šedi podle úrovně zanoření. Praktické využití tato funkce asi velké nemá, ale je to hezká hračka.
Outline Block Level Elements
Obtáhne barevným rámečkem všechny blokové elementy ve stránce. Je to podle mě druhá nejužitečnější funkce Web Developeru. Při tvorbě layoutu nového webu ušetří spoustu ladícího kódu v CSS (zejména klasické * { border: 1px solid red !important }).
Outline Table Cells
Analogie předchozí funkce, ale funguje pro tabulky.
Resize...
Změní velikost okna na 800×600 nebo nějakou jinou (jde nastavit). Opět se hodí při tvorbě layoutu.

Web Developer - ikonkyUžitečné jsou i malé ikonky vpravo na liště – první indikuje renderovací mód, ve kterém je stránka vykreslena, a druhá říká, zda se na stránce vyskytly nějaké chyby v JavaScriptu. Popis poslední chyby se navíc zobrazuje jako tooltip nad ikonkou. Nemusíte tedy tak často otevírat konzoli (což se mimochodem dá rychle udělat kliknutím na ikonku).

Tak co, přesvědčil jsem vás o užitečností tohoto rozšíření? Za sebe můžu říct, že si bez Web Developer připadám téměř jako bezruký a skoro se divím, jak jsem mohl takovou dobu žít bez něj :-) Takže Web Developer vřele doporučuju – stahovat můžete tady.

Oct 2, 2004 – 20:30

Comments

Havran
Môžem len dať za pravdu. Bez WebDevelopera si už browser ani neviem predstaviť. V IE je podobný toolbar Accessibility Toolbar (http://www.nils.org.au/ais/web/resources/toolbar/) Je to prakticky to isté ale čo sa týka pohodlnosti používania... Najviac ma na tom štve chyba, keď po nainštalovaní AT po štarte okna IE je ho nachvíľku (pár sekúnd)nemožné zavrieť. Keď občas omylom otvorím okno alebo ho po otvorení chcem hneď zavrieť a ono to akosi nejde ani po niekoľkonásobnom poklikaní na [x] tak to ma dokáže dosť naštvať. Len z toho dôvodu som AT odinštaloval aj keď ma mnoho krát pri používaní IE cuká kliknúť na 'Disable styles':-D.
David Majda
[2] Jo, ten HTML validátor se celkem hodí pro validaci offline. Pokud jsem online, tak celkem dobře slouží Ctrl+Shift+V ve Web Developeru.

Přepínat user-agenta jsem v životě nepotřeboval - pokud nějaká stránka ve Firefoxu nejede, tak ji prostě zavřu a dál pro mě neexistuje. Jen když ji opravdu moc moc potřebuju vidět, tak spsustím IE. Ale věřím, že se to někomu může hodit.
Milan
Mně se hlavně líbí v Web Developer Toolbaru vychytávečka validace stránek, které nejsou přístupné z webu.

Dělám si něco na lokálu, ale pokud potřebuji zjistit případné chybky, tak Ctrl + Shift + L a už se to validuje online validátorem. :) To asi používám nejvíc.

Pak se mi hodí veškeré vypínání, od Cookies, Obrázků až po JavaScript a nebo Javu.

Add comment

It is not possible to add comments to posts older than one month.