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 3526 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

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
 
 
007카지노주소
0 # 007카지노주소 2019-11-28 02:59
Hmm is anyone else having problems with the images on this blog loading?
I'm trying to find out if its a problem on my end
or if it's the blog. Any feedback would be greatly appreciated.


my homepage - 007카지노주소
Odpovědět | Odpovědět citací | Citovat
 
 
nhvwmtroum
0 # nhvwmtroum 2020-04-02 16:40
mom gives son viagra female viagra lady era pills viagra 100mg lyons drug viagra female viagra pranks are they staged

pfizer viagra generic viagra starting today viagra vs cialis reaction to viagra black market viagra prices

https://pharm-usa-official.com - viagra samples

http://www.cityup.org/bbs/space-uid-327931.html
http://web.syekhnurjati.ac.id/as/2019/12/18/jadwal-uas-ganjil-t-a-2019-2020/?unapproved=2581&moderation-hash=5a1e42310f496f09154ea2cace254568#comment-2581
http://www.aryandigitalseva.com/pmgdisha-news/how-to-update-pmgdisha-rd-service-morfho-setting/?unapproved=47018&moderation-hash=c6583ca895d4eb020845fe2552ac3dc4#comment-47018
http://www.cityofrefugefellowship.org/philippians-series-bridges-of-joy-from-contentment-to-martyrdom/?unapproved=177466&moderation-hash=3499355ce986ebae73ca1f49da70e243#comment-177466
http://barracuda.by/forum/viewtopic.php?f=7&t=229408
Odpovědět | Odpovědět citací | Citovat
 
 
giykntroum
0 # giykntroum 2020-04-03 19:08
viagra prices walmart best cheap viagra pharmacies canadian levitra vs viagra how to make viagra work better chinese natural viagra

viagra dosnt work now what online viagra [url=https://ph arm-usa-officia l.com/# #]cheap viagra mandy flores accidetal viagra/hamsterr new white viagra

https://pharm-usa-official.com - female viagra

http://forum.digilyze.info/viewtopic.php?f=2&t=228472&p=631705#p631705
http://www.icolorcn.cn/home.php?mod=space&uid=1045222
http://senclic.com/politique/presidentielle-cellou-dalein-diallo-soutient-macky-sall-conde/?unapproved=1923558&moderation-hash=bf033e53175a58ae87419fe85eed23c9#comment-1923558
https://www.7television.fr/aya-nakamura-recalee-de-danse-avec-les-stars/?unapproved=497420&moderation-hash=651732a9b31b668af57aabcf19b0e5ff#comment-497420
http://vuanh.com.vn/thiet-bi-tin-hoc/hop-muc-inmax-35a/#comment-675453
Odpovědět | Odpovědět citací | Citovat
 
 
heayttroum
0 # heayttroum 2020-04-06 03:31
how long viagra to work did pfizer raise viagra again viagra dosage teva's generic viagra viagra reddit

mother helps viagra boner cialis vs viagra dosage comparison viagra 100mg i accidentally gave my stepson viagra ekg before prescribing viagra

https://viagrnetwork.com/# - cialis vs viagra
Odpovědět | Odpovědět citací | Citovat
 
 
zvtpctroum
0 # zvtpctroum 2020-04-08 00:18
sildenafil citrate generic viagra 100mg viagra multiple cums viagra boner pfizer viagra pills for sale viagra 100mg

online viagra without a perscription true stories about viagra side effects buy viagra dick pics on viagra can i take flomax and viagra at the same time

https://viagrnetwork.com/# - viagra prices


https://zanadu.ru/showthread.php?t=445494&p=811823&posted=1#post811823
http://188.128.165.51/forum_Asdasd/viewtopic.php?f=25&t=541689&p=1245978#p1245978
https://www.rewity.com/forum/t175082-387.html#post14788646
https://selana.pl/sklep/bizuteria/bransoletki/bransoletki-srebrne/srebrne-bransoletki-sztywne/polsztywna-z-cyrkoniami-26821/?unapproved=738700&moderation-hash=741528d8cd80334e63f6c2c437a2a0cf#comment-738700
https://danielbraune.com.br/quem-perdeu-foi-voce-jo/?unapproved=11570&moderation-hash=6d282b9ee13ca47aa1555c17e6b385a0#comment-11570
Odpovědět | Odpovědět citací | Citovat
 
 
yghhrtroum
0 # yghhrtroum 2020-04-08 23:11
personal loans quick private lenders funding quick loans no collateral no up front fees no vredit checks quick loans quick payday loans wichita ks quick installment loans online

quick online loans direct lender quick loans payment center [url=http://sho p-wavin.ru/ ]quick loans quick online loans direct lender quick cash loans nm
Odpovědět | Odpovědět citací | Citovat
 

Přidat komentář

Bezpečnostní kód Obnovit