Rozšíření pro prohlížeče nám dokážou pomoci v práci frontend developera. Při výběru správných pluginů nám práci dokáží zrychlit a zefektivnit. Ovšem i při výběru pluginů musíme být opatrný. Špatný výběr, případně nainstalování příliš mnoho pluginů nám může negativně ovlivnit zážitek z webu. Dokážou nám vypnout určité funkcionality, případně nám díky nim mohou zamrznout celé taby či dokonce browser.
Pro práci developera z mého pohledu nejsou vhodné ani pluginy, které zakazují nebo omezují reklamu. A proč? Protože tím, že zakážete reklamy, tak se může stát, že váš web bude na produkci bez blokování reklamy vypadat jinak než byste si přáli. Dalším problémem těchto pluginů je, že nám často kromě reklamy blokují také analytické scripty. Takže jak jste již pochopili, práce s analytics a zapnutými ad-blockery není ideální cesta.
Pojďme se teď ale už podívat na seznam pluginů.
Web Developer
Chrome rozšíření
Firefox rozšíření
Extension, který používám aktivně často já sám. Tento plugin nám přidá několik desítek jedndouchých pomocných funkcí, které byste jinak museli psát do kódu nebo složitě hledat v nastaveních browsru. Pojďme se podívat na některé funkce.
Po otevření pluginu vidíme rozdělení do několika záložek, první z nich je Cookies, která nám velmi snadno umožňuje spravovat Cookies na jeden klik → mazat cookies z aktuální domény či session. Případně cookies přidávat.
Druhou záložkou je CSS. Chcete vidět, jak by váš web vypadal bez CSS? Nebo si chcete vypnout pouze defaultní CSS od browsru? Záložka toho umí samozřejmě mnohem víc, než například vypnout pouze inline-styles, případně styly určené pro print. Může to být velmi užitečné při debugování CSSka.
Třetí záložka pracuje s formuláři. Dokáže označit všechny radio/checkbox inputy, případně všechny inputy zresetovat. Kromě toho vám umí zobrazit hesla v případě password inputů, takže už nebudete muset lézt do developer tools a měnit typ inputu z password na text.
Images je velmi užitečnou záložkou. Dokáže vám k jednotlivým obrázkům zobrazit alt popisky nebo obrázky zcela skrýt. Takže hned vidíte, jak by váš web vypadal bez obrázků. Kromě toho, dokáže obrázky nahradit alt popisky nebo měnit jejich velikosti.
Další záložkou je Information, kde si zobrazíte velikosti jednotlivých elementů na stránce, případně jak moc jsou zanořeny ve stromu HTML. Můžete si zobrazit ID nebo classy, případně odkazy elementů. Případně podobně jako v ColorZille si dokážete zobrazit všechny použité barvy na webu. Případně velmi užitečná funkce je také zobrazení struktury nadpisů, což má zásadní dopad na SEO, případně zobrazení meta tagů.
Záložka Miscelaneous vám dovolí vymazat historii, případně zobrazit pravítka, color picker, skryté elementy, případně označit všechny odkazy jako navštívené.
Outline jak již název záložky na říká dovoluje zobrazovat outline pro elementy. Můžete si zobrazit outline pouze pro absolute elementy nebo block-level elementy, případně float elementy. Možností je zde mnoho.
Resize zase umožňuje si jednoduše resizovat okno podle potřeby, případně na jeden klik si zobrazíte všechna možná rozlišení zařízení a jak web na nich bude vypadat.
V záložce tools naleznete spoustu dalších funkcí jako je například validace HTML nebo CSS. Případně validace structured data podle Schema.org.
Web developer plugin toho ví opravdu hodně, to co jsem zde jmenoval je jen malá část toho co tento skvělý plugin ví a doporučuji ho každému vývojáři.
React/ Vue devtools
Chrome React Developer Tools
Firefox React Developer Tools
Chrome Vue.js devtools
Firefox Vue Developer Tools
Pokud pracujete v React nebo Vue knihovnách, tak tyto pluginy jsou must-have pro vývoj. Oba pluginy jsou si velmi podobné. Dokážete si v nich zobrazit jednotlivé komponenty a jejich aktuální stavy proměnných, případně velmi jednoduše si tyto proměnné měnit v browsry, aniž byste museli lézt do kódu.
Dokážete si zobrazit co se s vaší React/Vue appkou dělo, jaký byl proces při vykreslené aplikaci, co všechno probíhalo. To vám umí pomoci s optimalizací performance. Případně si můžete zobrazit jaké všechny url routy existují ve vaší aplikaci nebo si zobrazit a měnit stav vašich storov.
React a Vue devtools jsou jistě pluginy, které musí mít každý vývojář, který se věnuje těmto technologiím, bez nichž si děláte práci výrazně složitější.
dataslayer
Chrome rozšíření
Firefox rozšíření
K práci frontend developera patří i práce s analytickými skripty, nejčastěji přes Google Tag Manager. Tento plugin vám dokáže zobrazit všechny datové vrstvy, které se posílají do Google Tag Manageru. Dokážete si prohlédnout jak vás Google Tag Manager trackuje, co všechno web posílá ke zpracování. Což je extrémně užitečné, abyste si uměli ověřit, že kód který jste napsali posílá potřebná data do tag manageru. Data si zobrazíte v developer tools v záložce dataslayer.
Plugin má řadu nastavení co všechno se vám zobrazovat v historii má, případně existuje zde možnost si data exportovat do .json formátu. Někomu může vadit trochu zaostalejší design, existují různé alternativy, které učiní prakticky stejnou službu, jedním z alternativ může být pro Chrome Datalayer Checker.
Wappalyzer
Chrome rozšíření
Firefox rozšíření
Wappalyzer je jednoduchý plugin, který vám v přehledné tabulce zobrazí na jakých technologiích běží web, na který se právě díváte. Zobrazí informace od analytiky přes webové technologie až po servery a operační systémy, na kterých web běží.
Fake Filler
Chrome rozšíření
Firefox rozšíření
Často při vývoji nebo testování potřebujeme neustále vyplňovat složité formuláře. Fake Filler je úžasný nástroj, který za vás vyplní formuláře na jeden klik a zrychlí tak vaši práci.
Google lighthouse
Chrome rozšíření
Firefox rozšíření
Lighthouse zná každý správný developer. Tento plugin do browsru je z mého pohledu velmi užitečný hlavně pro browsry, které jej nemají integrovaný v sobě. Takže například Firefox. Výhodou se pak stává, že nemusíte měnit browser, abyste si web zkontrolovali v lighthouse. Může se vám hodit i na Chrome, namísto hledání v developer konzoli si vygenerujete report na 1 klik.
JSON Viewer
Pokud pracujete s API, je to must-have plugin hlavně pro Chrome, který ve výchozím stavu zobrazuje JSON jako raw text. Tento plugin vám jej krásně naformátuje, případně na jeden klik si zase zobrazíte raw text. Další skvělou funkcí pluginu je vlastní customizace tématu, barev, font-sizu, fontů… Uvádíme link pouze na Chrome, v případě Firefoxu existují alternativy, které jistě snadno vygooglíte, avšak z mého pohledu to pro Firefox nedává moc smysl.
ColorZilla
Chrome rozšíření
Firefox rozšíření
ColorZilla nám usnadňuje práci s barvami. Pokud často na webu hledáte jakou barvu autoři použili a nechcete se hrabat v jejich CSSkách, tak s ColorZillou je to otázka pár vteřin. Otevřete plugin a kliknete na element, který chcete a ihned máte barvu v HEX a RGB. Když na vrstvu kliknete, tak vám barvu ColorZilla zkopíruje.
Kromě tohoto jednoduchého úkonu ColorZilla umí zjistit a vypsat všechny barvy, které se používají na dané stránce, což může být užitečné pokud se chcete inspirovat barevným schématem a implementovat jej do svého projektu. Po kliku na barvu vám dokonce je schopna ukázat na jakých elementech se daná barva používá.
Další funkcí je paleta barev. Zde je palet široké spektrum od barev, které zná každý frontenďák W3C named colors – (purple, green, red), přes palety Web safe colors až po Hues and Saturations.
Velmi zajímavou funkcí je určitě CSS Gradient generator, kde si můžete v přehledném UI vyklikat váš gradient a ColorZilla vám dokonce vygeneruje CSS a řekne, jak je to s browser compatibility.
Pokud vyrábíte projekt bez grafického návrhu a chcete si pomoci s barvami, tak ColorZillu doporučuji.
Daily.dev
Chrome rozšíření
Firefox rozšíření
Daily.dev sdružuje články z více než 400 zdrojů na jedno místo. Díky nastavení filtrům a vybraným tématům si dokážete snadno udržet přehled o dění ve vašem oboru. Plugin vyžaduje přihlášení a samozřejmě články jsou v angličtině.
Užitečných pluginů existuje mnoho, každý si najde ty své, pokud chce. Pokud si ale myslíte, že by v tomto seznamu neměl chybět ten váš, tak nám dejte vědět například náš Discord.