5 užitečných vývojářských doplňků pro prohlížeče

Napsal(a) Napsáno pátek, 07 listopad 2014 Zveřejněno v Nástroje Přečteno 17052 krát
Ohodnotit tuto položku
(1 Hlasovat)

Vytváříte nebo upravujete web? Pak se vám budou hodit vývojářské doplňky pro Mozilla Firefox a Google Chrome. Tyto nástroje dokáží zrychlit práci i odhalit chyby ve zdrojovém kódu.

Chcete vědět, co tyto doplňky dokáží? Čtěte dál.



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.

firebug

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.

web developer

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

 tag assistant

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.

Page Ruler

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.

Awesome Screenshot

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.



Naposledy změněno pondělí, 10 listopad 2014 09:49

Zaujal Vás tento článek? Sdílejte ho a šiřte dál...

Lukáš Kolovrat

V roce 2012 jsem absolvoval FIM na Univerzitě v Hradci Králové. Nyní pracuji ve firmě WebPrezent, kde mám na starosti PPC systémy a analytické práce. Jednou za čas si pohraji i s HTML a CSS. A taky jsem získal čestnou funkci redaktora WebZpravodaje.

 



Warning: Creating default object from empty value in /pub/jiranwa/webzpravodaj.cz/web/www/plugins/system/t3/includes/joomla25/modulehelper.php on line 177