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 2565 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.

 



Komentáře   

 
MonikaJuicy
0 # MonikaJuicy 2018-11-25 06:30
Hi. I see that you don't update your website too often. I know that writing
content is time consuming and boring. But did you know that there is a
tool that allows you to create new posts using existing content (from article directories or other blogs from your
niche)? And it does it very well. The new articles are high quality and pass the copyscape test.

Search in google and try: miftolo's tools
Odpovědět | Odpovědět citací | Citovat
 

Přidat komentář

Bezpečnostní kód Obnovit