Menu

8 užitečných rozšíření Google Chrome (nejen) pro vývojáře

Posuňte vaši produktivitu na další úroveň. Být vývojářem není snadné, a proto se hodí každá příležitost, jak si práci ulehčit. Modrý duch pro vás předvybral 8 praktických rozšíření prohlížeče Google Chrome, které vám zaručeně pomohou k lepším výsledkům.

8 užitečných rozšíření Google Chrome (nejen) pro vývojáře

1) Window Resizer, ať se stránky správně zobrazí na všech zařízeních

Jednoduchá „blbost“, ale nesmírně užitečná. Rozšíření s názvem Window Resizer vám dočasně změní velikost okna prohlížeče, aby odpovídalo běžným rozlišením mobilních telefonů, tabletů i stolních počítačů. Díky tomu si snadno a rychle ověříte, že se všechny prvky na vámi tvořených stránkách zobrazí budoucím uživatelům správně.

Do rozšíření můžete přidat i vlastní rozměry, kdybyste náhodou pracovali s nestandardním (a)nebo novým rozlišením.

2) ColorZilla pro dokonalé barvy

Ideální rozšíření pro vývojáře, designéry, grafiky, ilustrátory i marketingové specialisty. Během několika vteřin jednoduše získáte přesné RGB i HSL hodnoty barev, které jsou použité na konkrétních webových stránkách.

Kromě toho vám ColorZilla navrhne i další tóny a odstíny, které vhodně doplní analyzované barevné spektrum. Všechny záznamy o vašich rozborech si navíc ColorZilla uchovává v paměti, takže máte data neustále po ruce. A umí toho ještě mnohem více, i proto si rozšíření ColorZilla stáhlo už přes 3 miliony uživatelů.

3) S Dimensions bude vše lícovat na pixely

„Jsou všechny bloky správně odsazené? Není ten obrázek o kousek větší? A co to tlačítko?“ Dokonce i minimální nepřesnost může pokazit výsledný dojem z jinak precizně vyvinuté aplikace a internetových stránek.

Rozšíření s názvem Dimensions vám pomůže, aby se nic podobného už neopakovalo. Po zapnutí rozšíření se před vámi zobrazí osa X a Y. Potom už stačí hýbat kurzorem po zkoumaných prvcích a okamžitě budete mít před sebou přesné rozměry.

4) S Clear Cache nebudete mít nikdy zahlcenou mezipaměť

Webaři musí často mazat cache memory, a to nejenom, aby se přesvědčili o správném zobrazení provedených změn. Má to však háček. Přes nastavení Google Chrome je proces mazání cache trochu zdlouhavý, a proto dává smysl pořídit si rozšíření Clear Cache.

Po instalaci Clear Cache vyčistíte mezipaměť jediným kliknutím na ikonu. Pochopitelně si také můžete nastavit, co všechno se má smazat. 

5) Odhalte použité (back-end) technologie s Wappalyzerem

„Chceme něco podobného, jako má firma XY.“ Jak vyřešit tento zapeklitý požadavek od vašeho klienta? Hodně práce vám ulehčí rozšíření Wappalyzer.

Jedním kliknutím odhalíte:

  • programovací jazyk, 
  • CMS,
  • analytické nástroje,
  • pluginy,
  • widgety, 
  • a spoustu dalších užitečných informací o použitých technologiích. 

Potom už hravě zvládnete udělat web/aplikaci s podobnými funkcemi. 

6) Check My Links vám pomůže udělat pořádek v odkazech

Jak už název napovídá, s Check My Links budete mít všechny odkazy na vašich internetových stránkách pod dokonalou kontrolou. Když rozšíření zapnete, funkční odkazy se prakticky okamžitě zvýrazní zeleně a nefunkční červeně. 

Všechny špatné odkazy si navíc můžete jediným kliknutím zkopírovat, což vám výrazně ulehčí práci na nápravě.

S Check My Links snáze dodržíte SEO standardy, a proto se webovky umístí na lepších pozicích ve výsledcích vyhledávání.

7) O rychlou zpětnou vazbu se postará Lighthouse

Lighthouse je dalším univerzálním pomocníkem pro vývojáře, testery i UX designéry. Dokonale se hodí k průběžnému testování a rychlému auditování webových stránek. Díky rozšíření snadno získáte důležité informace o výkonu, dostupnosti, optimalizaci pro mobilní telefony a o mnoha dalších oblastech.

Každý report se navíc skládá z přehledných ukazatelů a konkrétních doporučení, která vám pomohou zlepšit slabá místa.

8) Web Developer zlepší vaši produktivitu

Rozšíření přidá do vašeho Chromu praktický panel s nástroji, které vám znatelně ulehčí každodenní práci. A nutno dodat, že získáte podstatně více možností než s klasickým inspektorem od Googlu. Nástrojů je v nabídce opravdu celá řada, a proto jsou rozřazené do kategorií (obrázky, formuláře, CSS a další). 

Kliknutím na tlačítko jednoduše:

  • zobrazíte podrobnosti o odkazu,
  • zakážete (nebo naopak povolíte) vyskakovací okna,
  • změníte rozměry okna prohlížeče,
  • vyhledáte všechny rozbité obrázky,
  • a provedete spoustu dalších úkonů.

Další možné jako bonus

  • Cookie Editor – umožňuje editaci cookies na aktuální stránce přímo ve vyskakovacím rozhraní.
  • Toggle JavaScript – umožňuje rychle povolit či zakázat JavaScript pomocí jednoduchého tlačítka.
  • Selenium IDE – skvělý pro zaznamenávání interakcí s webovými stránkami a udržování automatizací (nahrávání a přehrávání testů, organizování testů do sad, ukládání a načítání skriptů, podpora pro Selenium 3).
  • Eye Dropperužitečné kapátko, se kterým můžete z dané stránky vybrat barvy.
  • Meta Pixel Helper – nástroj pro ověření implementace pixelů Facebooku, kdy se po kliknutí rozbalí panel, který zobrazí podrobný přehled pixelů stránky, včetně varování, chyb a úspěchů (více také zde).  
  • Keywords Everywhere – šikovný nástroj pro vyhledávání klíčových slov, poskytuje také údaje o návštěvnosti, metrikách odkazů a zpětných odkazech.
  • Meta SEO inspektor – skvělý pomocník, se kterým si zkontrolujete metadata na stránce a můžete s nimi dále pracovat, hodí se například pro ověření HTML a dodržení pokynů od Googlu.
  • Tag Assistant Legacy – pomůže vám ověřit, zda jste na stránku správně nainstalovali různé další služby od Googlu jako Google Analytics, Tag Manager a další. Spolu s tím umí zaznamenat flow uživatelů skrze jednotlivé stránky. 

A bez kterých rozšíření se určitě neobejdete vy? Podělte se Modrým duchem třeba na Facebooku

Jak se vám článek líbil?

25

Praktický

8

Inspirující

0

Zábavný

2

Nic moc

Pojďme vytvořit skvělý produkt

Domluvme si schůzku. Chcete si nejprve utřídit myšlenky? Navrhněte si zadání nanečisto s AI asistentem.