Firebug
Doplněk pro: Mozilla Firefox
Asi nejznámější vývojářský doplněk pro Firefox. Zobrazí zdrojový kód a přímo na stránce označí vybraný element (nebo opačně, po kliknutí na ikonku šipky si na stránce označíte příslušný blok a Firebug vám vypíše jeho kód). Ve standardním režimu je zobrazený HTML kód a vedle CSS styly.
Kód můžete navíc ve Firebugu přímo editovat. Libovolně si můžete přepisovat hodnotu pixelů v CSS stylech, či názvy tříd v HTML. Výsledek vidíte ihned přímo na stránce - snadno si tedy ve Firebugu změníte např. šířku bloku. Pokud jste s výsledkem spokojeni, provedete změny i ve vaší šabloně.
Kromě HTML a CSS vám Firebug přehledně vypíše i skripty, elementy DOM, či Cookies.
Web Developer
Doplněk pro: Mozilla Firefox
Dalším základním rozšířením je Web Developer. Chcete urychleně vypnout Javascript, či zakázat styly? Můžete. A získáte spoustu dalších funkcí, např:
- Zobrazení alternativního popisku obrázku (ALT).
- Vypnutí obrázků.
- Zobrazení cesty obrázku.
- Informace o velikosti obrázku.
- Informace o všech odkazech na stránce.
- Smazání, či zobrazení informací o Cookies.
- Informace o formulářích
- Nastavení velikosti okna pro různá rozlišení - předdefinovaná jsou:
- 1024 x 768
- rozlišení pro tablety
- rozlišení pro mobilní telefony.
S Web Developerem si můžete vzhled vaší stránky zobrazit např. tak, jak ji vidí vyhledávací roboti, nebo handicapovaní uživatelé. Bez stylů a obrázků. Navíc přináší řadu užitečných nástrojů, např.:
- Pixelové pravítko - chcete si na stránce ihned změřit např. rozměr hlavičky? Žádný problém.
- Lupa.
- Kontrola validního kódu - HTML, CSS.
Tag Assistant
Doplněk pro: Google Chrome
Skvělé rozšíření přímo od Google. S tímto pomocníkem si snadno ověříte, zda-li vám skript na stránce funguje správně (musí patřit ke službě od Google).
Tag Assistant využijete především při ověřování správné implementace pro.:
- Google Analytics
- vypíše vám i verzi (Google analytics či Universal Analytics)
- pokud máte u e-shopu zavedené E-Commerce, můžete si otestovat správnou funkčnost
- Google Tag Manager
- Google Adwords - měření konverzí
- Google Adwords - remarketingový kód
Pokud je něco špatně, Tag Assistant vypíše chybu, případně doporučení na vyladění kódu.
V nastavení rozšíření si můžete určit např. detailnost výpisu, nebo rovnou vypsat seznam webů, které chcete ověřit.
Page Ruler
Doplněk pro: Chrome
Potřebujete si změřit velikost bloku, či obrázku přímo na stránce? Žádný problém. Page ruler je pixelové pravítko, které u zvoleného objektu měří:
- šířku
- výšku
- odsazení zleva
- odsazení zprava
- odsazení zespoda.
Na výběr máte ze dvou režimů:
- Klasický
- Metodou drag and drop si kdekoli na stránce označíte místo a Page Ruler ho změří.
- Element Mode
- Myší si volíte jednotlivé bloky na stránce a nástroj vám je měří.
- Zároveň vypisuje příslušné třídy a identifikátory - v tomto bodě je podobný Firebugu.
Awesome Screenshot
Doplněk pro: Mozilla Firefox
Potřebujete vytvořit screeenshot celé stránky nebo její části? Zkuste Awesome Screenshot. Na vámi zvolené stránce klikněte na ikonku doplňku a zvolte jednu z možností:
- Capture Visible Part - screenshot pouze viditelné části
- Capture Full page - screenshot celé stránky
Funkce Discover Similar Sites vyhledává weby obsahově příbuzné vámi zvolenému. Příklad: ke Google.cz vám doplněk nabídne mj. Seznam.cz, či Centrum.cz.
V nastavení doplňku si můžete zvolit formát obrázku (PNG nebo JPG), příp. upravit klávesovou zkratku k vytvoření screenshotu.
Jakmile screenshot vytvoříte, zobrazí se vám panel nástrojů. Můžete do obrázku psát, či označovat obdélníkem nebo elipsou důležité věci -> nástroj se perfektně hodí i pro tvorbu návodů. Navíc máte k dispozici i "zamazávátko", které využijete k zakrytí např. fakturové částky, či názvu účtu.
Nakonec kliknete na tlačítko "Done" a obrázek si uložíte.
Doporučení
Nezapomeňte, že kódováním vše teprve začíná. Aby vaše stránky "chutnaly" vyhledávacím robotům, vyzkoušejte též SEO doplňky.
Vyzkoušeli jste tato rozšíření? Nebo používáte jiné? Podělte se o svoje zkušennosti v komentářích.
