Ak ste dizajnér a potrebujete nejaké užitočné nástroje na zrýchlenie, spoluprácu alebo audit vašich projektov vývoja webu, rozšírenie Chrome má množstvo nástrojov.

Tento zoznam obsahuje niektoré z najpopulárnejších – a niektorí by tvrdili, že sú potrebné – nástrojov a rozšírení prehliadača Chrome^{(tools and Chrome extensions)} , ktoré by mal mať vo svojej taške každý používateľ vykonávajúci dizajnérsku prácu.

1. DomFlags

DOM Flags je jednoducho použiteľné rozšírenie prehliadača Chrome^(Chrome) , ktoré poskytuje vývojárom nový spôsob práce s nástrojmi prehliadača. Umožňuje vývojárom urýchliť úlohu stylingových prvkov.

Pomocou klávesových skratiek pre každý prvok si môžete uložiť navigáciu medzi záložky.

Všetci sme zažili ťažkosti pri kontrole veľmi detailných prvkov a je ľahké sa stratiť.

Vlajky DOM^{(DOM Flags)} vám umožňujú sledovať prvky štýlu a zahŕňajú funkciu na automatickú kontrolu komponentov s presnosťou. To zase pomôže urýchliť pracovný tok a implementáciu DevTools .

DOM Flags vám umožňuje sledovať zmeny. A zamerajte sa na prvky, s ktorými pracujete.

2. Sizzy

Sizzy poskytuje dizajnérom a vývojárom jednoduchý spôsob, ako testovať svoje stránky vo viacerých zobrazeniach.

Sizzy poskytuje jednoduchý spôsob, ako skontrolovať svoj dizajn v reálnom čase. Ponúka interaktívny pohľad na ľubovoľný počet zariadení a veľkostí obrazoviek. Môžete dokonca simulovať klávesnicu zariadenia a potom prepínať medzi režimom na šírku a na výšku.

Inštaláciou rozšírenia pre Chrome sa na panel s nástrojmi pridá tlačidlo, na ktoré sa po kliknutí otvorí aktuálna adresa URL^(URL) na platforme Sizzy . Rozšírenie zablokuje všetky hlavičky „ x-frame-options “, takže si budete môcť pozrieť akúkoľvek webovú stránku online.

Sizzy je projekt s otvoreným zdrojovým kódom a celý kód si môžete pozrieť tu^(here) .

3. Checkbot

Checkbot môže otestovať váš web na bezpečnostné problémy a tiež auditovať rýchlosť načítania vašej webovej stránky. Dizajnérom poskytne prostriedky na identifikáciu typických chýb a odporučí vylepšenia bezpečnosti stránok, vyhľadávača a rýchlosti stránok.

Pomocou viac ako 50 metrík osvedčených postupov vykoná audit webovej lokality z hľadiska optimalizácie SEO^(SEO) , nefunkčných odkazov, duplicitného obsahu a ďalších. Nástroj tiež overí CSS , JS a HTML .

Checkbot zachytáva chyby dizajnéra a kódera v reálnom čase, čo vám ušetrí problémy s tým, že sa budete musieť vracať a opakovane kontrolovať svoju prácu.

Ak hľadáte kvalitný nástroj, ktorý opraví nefunkčné odkazy na stránky, zabezpečí jedinečný obsah a názvy stránok a eliminuje reťazce presmerovaní, tento nástroj by bol užitočný.

Pre dizajnérov vám môže pomôcť minimalizovať CSS a JS, ako aj poskytnúť odporúčania, ako minimalizovať CSS a využiť ukladanie do vyrovnávacej pamäte prehliadača.

4. GistBox Clipper

GistBox je jedným z najužitočnejších rozšírení prehliadača Chrome^(Chrome) pre webových dizajnérov.

GistBox dokáže vytvoriť GitHub Gist z akéhokoľvek bloku kódu na webovej stránke, ktorú si prezeráte.

V pravom hornom rohu každého bloku kódu uvidíte malé tlačidlo, ktoré po stlačení umožní vyskakovacie okno, ktoré vám umožní uložiť kód do Gist .

Môžete vytvoriť nové Gisty kliknutím pravým tlačidlom myši a uložiť bloky kódu pre neskoršiu kontrolu a použitie.

Integrácia s GitHub umožňuje dizajnérom a vývojárom zbierať bloky kódu a manipulovať s nimi alebo ich kategorizovať na neskoršie použitie. Vďaka tomu je to pohodlný a efektívny nástroj rozšírenia Chrome .

5. ColorZilla

ColorZilla je neuveriteľne užitočné rozšírenie prehliadača Chrome^(Chrome) na zhromažďovanie hex kódov, ktoré možno označiť, označiť a kategorizovať pre jednotlivé projekty webového dizajnu.

Umožňuje vám vybrať nástroj kvapkadla, ktorý extrahuje farbu z ľubovoľnej webovej stránky a uloží ju do schránky ColorZilla .

S ním môžete rýchlo vyvinúť farebné palety pre neskoršie použitie a ako spôsob, ako zabezpečiť, aby ste používali farby konzistentne pri webdizajne a vývoji.

ColorZilla funguje aj ako analyzátor farieb a editor prechodov CSS , takže môžete previesť obrázok na CSS .

6. WhatFont

 Toto rozšírenie pre Chrome^{(Chrome Extension)} skutočne šetrí čas pre tých, ktorí chcú používať svoje obľúbené písma a začleniť ich do svojho vlastného projektu webového dizajnu.

Rozšírenie WhatFont pre Chrome^{(WhatFont Chrome)} umožňuje vývojárom rýchlo analyzovať a identifikovať takmer akékoľvek písmo na akejkoľvek webovej stránke.

Rozšírenie je dobre vyvinuté a namiesto toho, aby bolo potrebné otvárať inšpekčné nástroje, rozšírenie funguje iba mávnutím myšou nad písmom.

Nielen to, ale rozšírenie tiež identifikuje službu, ktorá sa používa na poskytovanie písma Pages go, a bude podporovať Google Font API a Typekit.^{(Google Font API and Typekit.)}

7. LightShot

LightShot je rýchly nástroj na snímanie obrazovky, ktorý vám umožňuje zachytiť celú stránku alebo jej časť a buď ju nahrať, stiahnuť alebo poslať na miesto určenia tretej strany.

Snímky obrazovky vytvorené pomocou LightShot možno použiť a zdieľať na sociálnych sieťach alebo vytlačiť.

Do vybranej časti obrazovky môžete pridávať poznámky a pridávať text, šípky a ďalšie položky. Ale možno jednou z najbrilantnejších funkcií tohto jednoduchého nástroja pre webových dizajnérov je, že výberom obrázka môžete pokračovať v úplnom vyhľadávaní^(Google) obrázkov na Googli pre podobné obrázky online.

LightShot je možné nakonfigurovať vo viacerých jazykoch.

Rozšírenie je napísané v čistom JavaScripte^(JavaScript) a bude fungovať aj pre Windows , Chromebook , Linux a Mac OS . Dá sa k nej pristupovať aj ako desktopová aplikácia^{(desktop application)} , čo z nej robí skvelú voľbu pre web dizajnérov, ktorí sú závislí na viacerých zariadeniach.

8. Úžasná snímka obrazovky

Podobne ako Lightshot , aj Awesome Screenshot je rozšírenie na zachytávanie obrazovky a obrázkov.

Od Lightshot sa však líši v niekoľkých smeroch. Úžasnú snímku obrazovky^{(Awesome Screenshot)} je možné nakonfigurovať tak, aby prepojila všetky snímky obrazovky s vaším diskom Google .

Umožňuje vám zosnímať tie prvky, ktoré sú mimo vášho pohľadu, aby ste zachytili celú stránku. Má ďalšie nástroje na úpravu a anotáciu, čiarka umožňuje orezanie a úpravu obrázkov v rámci rozšírenia.. alebo s použitím ďalších aplikácií Awesome Screenshot

Jeho funkcie môžete rozšíriť inštaláciou aplikácie Chrome aj pre počítač. Rozšírenie tiež umožňuje zachytávanie a zdieľanie videa, aby ste mohli spolupracovať s inými vývojármi alebo dizajnérmi pri práci na akejkoľvek stránke.

Na snímku obrazovky môžete pridať ďalšie obrázky, ako aj modré alebo vymazať prvky, ktoré by ste radšej nezobrazovali ostatným.

9. Vymazať vyrovnávaciu pamäť

Rozšírenie Clear Cache Chrome^{(Cache Chrome Extension)} je rýchly a jednoduchý nástroj, ktorý vám umožňuje vymazať súbory cookie a vyrovnávaciu pamäť stránky, ktorú si prezeráte. Odstraňuje potrebu prejsť na stránku nastavení vášho prehliadača, aby ste vymazali niekoľko jednoduchých prvkov stránky.

Pre webdizajnérov, ktorí robia viacero úprav a chcú si ich prezerať v reálnom čase, je to vynikajúci nástroj, ktorý odstráni veľkú časť frustrácie z prezerania starých údajov.

Niekedy je potrebné vymazať vyrovnávaciu pamäť a súbory cookie, ale prechod do nastavení prehliadača Chrome^(Chrome) je únavný. Vymazať vyrovnávaciu pamäť^(Cache) vám umožňuje vymazať vyrovnávaciu pamäť, ako aj globálne alebo lokálne súbory cookie kliknutím na tlačidlo.

Vymazať vyrovnávaciu pamäť^(Cache) vám umožní nakonfigurovať, ktoré prvky chcete zo stránky vymazať. Premenné^(Variables) zahŕňajú hotovosť^(Cash) , sťahovanie, všetky systémy, údaje formulárov, v hotovosti^(Cash) , indexovú databázu, údaje doplnkov, heslá a ďalšie.

10. Rozšírenie pre Google Chrome pre vývojárov webu

Rozšírenie Google Chrome pre vývojárov webu^{(Web Developer Google Chrome Extension)} umožňuje vývojárom a dizajnérom jednoducho auditovať, analyzovať a kontrolovať ich webové stránky, či na nich nie sú porušené osvedčené postupy dizajnu, kódovania, použiteľnosti a optimalizácie pre vyhľadávače.

Je to skvelý all-in-one nástroj, ktorý nie je náročný na prehliadanie našich zdrojov, no poskytuje množstvo informácií užitočných pre webový dizajn, ktorý je tiež zodpovedný za prvky optimalizácie pre vyhľadávače v rámci webovej lokality alebo stránky.

 Rozšírenie nainštaluje panel s nástrojmi s viacerými nástrojmi pre vývojárov webu.

Tento nástroj vám poskytne informácie o veľkosti, šírke a rozmeroch stránky, ktoré sú v rozpore s osvedčenými postupmi používania na viacerých zariadeniach. Umožňuje vám skontrolovať vložený JavaScript a zobraziť vašu webovú stránku prostredníctvom simulácie rôznych zariadení.

Rozšírenie funguje dobre v systémoch Windows^(Windows) , Linux a Mac OS . Okrem problémov s kódovaním a dizajnom poskytne aj informácie o metaznačkách, hlavičkách odpovedí, informáciách o farbách a topografických informáciách.

Na webovej stránke vývojára Chrisa Pedericksa^{(Chris Pedericks’ website)} si môžete prezrieť hlavné funkcie nástroja, ako aj jeho úplné možnosti .

Niet pochýb o tom, že existuje množstvo ďalších vysokokvalitných a užitočných rozšírení prehliadača Chrome^(Chrome) , ktoré by webový dizajnér alebo vývojár mohol použiť.

Tento zoznam predstavuje niekoľko najpopulárnejších a najužitočnejších nástrojov. Máte nejaké odporúčania na nástroje, o ktorých si myslíte, že sú užitočnejšie alebo lepšie ako tie v tomto zozname? Dajte nám vedieť.

Top 10 Chrome Extensions and Tools for Web Designers

If you are designer in nеed of some useful toоls to speed up, collaborate оr audit your web developmеnt proјects, Chrome extension has a multitude of tools.

This list comprises some of the most popular – and some would argue necessary – tools and Chrome extensions that every user doing design work should have in their kit bag.

1. DomFlags

DOM Flags is a simple to use Chrome extension that provides a new way for developers to work with browser tools. It allows developers to speed up the task of styling elements.

Using keyboard shortcuts for each element you can bookmark your navigation.

We’ve all experienced the difficulty in inspecting highly detailed elements, and it’s easy to get lost.

DOM Flags enable you to track styling elements includes a feature to inspect components with accuracy automatically. This, in turn, will help speed up DevTools workflow and implementation.

DOM Flags enables you to track changes. And maintain your focus on the elements you’re working with.

2. Sizzy

Sizzy gives designers and developers a simple way to test their sites in multiple viewports.

Sizzy provides a simple way to check your design in real-time. It offers an interactive view of any number of devices and screen sizes. You can even simulate a device keyboard and then switch between landscape and portrait modes.

Installing a Chrome extension will add a button to your toolbar, which, when clicked is going to open the current URL in the Sizzy platform. The extension will block all “x-frame-options” headers so you will be able to take a look at any website online.

Sizzy is an open source project, and you can see the entire code here.

3. Checkbot

Checkbot can test your site for security issues and also audit your website page loading speed. It will provide designers with a means of identifying typical errors and recommend improvements in site security, search engine, and site speed.

Using more than 50 best practice metrics, it will audit a website for best practice SEO, broken links, duplicate content and more. The tool will also validate CSS, JS, and HTML.

Checkbot picks up on designer and coder errors in real time saving you the trouble of having to go back and recheck your work repeatedly.

If you’re looking for a good quality tool that will fix broken page links, ensure unique content and page titles and eliminate redirect chains this tool would be useful.

For designers, it can help you minimize your CSS and JS as well as provide recommendations on how to minify your CSS and leverage browser caching.

4. GistBox Clipper

GistBox is one of the most helpful Chrome extensions for web designers.

GistBox can create a GitHub Gist from any code block on the webpage you are viewing.

At the top right-hand corner of any code block, you’ll see a small button, which when pressed, will allow a pop-up that enables you to save the code to the Gist.

You can create new Gists with a right mouse click and save blocks of code for later inspection and use.

Integrating with GitHub enables designers and developers to collect code blocks and manipulate them or categorize them for later use. This makes it a convenient and efficient Chrome extension tool.

5. ColorZilla

ColorZilla Is an incredibly useful Chrome extension for gathering hex codes which can be tagged, labeled and categorized for individual web design projects.

It enables you to select an eye-dropper tool that will extract the color from any web page and save it to the ColorZilla clipboard.

With it, you can quickly develop color palettes for later use and as a way of ensuring you are using color consistently in web design and development.

ColorZilla also acts as a color analyzer and CSS gradient editor so that you can convert an image to CSS.

6. WhatFont

 This Chrome Extension is a real time-saver for those wanting to utilize their favorite fonts  And incorporate them into their own web design project.

WhatFont Chrome extension allows developers to quickly analyze and identify almost any font on any web page.

The extension is well developed and rather than having to open up inspection tools the extension works by merely waving the mouse over the font.

Not only that but the extension will also identify the service that’s being used to serve up a Pages went font and will support Google Font API and Typekit.

7. LightShot

LightShot is a quick screenshot tool that enables you to capture the entire, or part of any page and either upload it or download it or send it to a third party destination.

Screenshots taken by LightShot can be used and shared on social media or printed.

You can annotate and add text, arrows and more to the selected portion of the screen. But perhaps one of the most brilliant features of this simple tool for web designers is that by selecting an image you can then proceed to do a full Google image search for similar images online.

LightShot can be configured in multiple languages.

The extension is written in pure JavaScript and will also work for Windows, Chromebook, Linux and Mac OS. It can also be accessed as a desktop application making it an excellent choice for web designers who are dependent on multiple devices.

8. Awesome Screenshot

Like Lightshot, Awesome Screenshot is a screen and image capturing extension.

It does differ from Lightshot, however, in a number of ways. Awesome Screenshot can be configured to connect all your screenshots with your Google drive.

It allows you to screenshot those elements which are beyond your view in order to capture the entire page. It has additional editing and annotation tools comma allows for cropping and image editing all within the extension.. or with the use of additional Awesome Screenshot applications

You can extend its features by installing the Chrome application for desktop as well. The extension also allows for video capturing and sharing so that you can collaborate with other developers or designers when working on any site.

You can add additional images to a screenshot as well as blue or erase elements that you would rather not show to others.

9. Clear Cache

The Clear Cache Chrome Extension Is a fast and simple tool that enables you to clear cookies and cache of the page you’re looking at. It removes the need to navigate to the settings page of your browser in order to clear a few simple page elements.

For web designers who are making multiple edits and want to view them in real time, this is an excellent tool that will eliminate much of the frustration of looking at old data.

There are times you need to clear your cache and cookies, but navigating to Chrome settings is tedious. Clear Cache lets you erase your cache as well as global or local cookies at the click of a button.

Clear Cache will allow you to configure which elements you want to clear from the page. Variables include Cash, downloads, all systems, form-data, at Cash, index database, plugin data, passwords and more.

10. Web Developer Google Chrome Extension

The Web Developer Google Chrome Extension allows developers and designers to easily audit, analyze and check their web pages for any violations of best practice design, coding, usability, and search engine optimization.

It’s a great all-in-one tool that is not heavy on browse our resources yet provides a ton of information useful to web design is also responsible for search engine optimization elements within a website or page.

 The extension installs the toolbar with multiple web developer tools.

The tool will give you indications on page size, width, and dimensions which make conflict with best practice use on multiple devices. It allows you to check embedded JavaScript and view your website through a simulation of various devices.

The extension functions well on Windows, Linux and Mac OS. In addition to coding and design issues, it will also provide insights into meta tag information, response headers, color information, and topographic information.

You can review the main features of the tool as well as it’s full capabilities on developer Chris Pedericks’ website.

No doubt there are a plethora of other high quality and useful Chrome extensions that are web designer or developer could use.

This list showcases a few of the most popular and useful tools. Do you have any recommendations for tools which you think I’m more useful or superior to the ones in this list? Let us know.

Related posts

• 8 najlepších stránok sociálnych sietí pre grafických dizajnérov na prezentáciu svojich portfólií

• Webový prehrávač Spotify: Ako k nemu pristupovať a ako ho používať

• 7 najlepších nástrojov a aplikácií na vytvorenie vlastného meme zadarmo

• Prečo sa stále oplatí používať Bing na vyhľadávanie na webe

• 8 nástrojov na vytváranie obrázkov dokonalej veľkosti pre stránky sociálnych médií

• 5 najlepších stránok na nájdenie online lektora pre dospelých a deti

• 16 najlepších stránok na nájdenie bezplatných audiokníh online

• Najlepšie zoznamovacie webové stránky a aplikácie pre každého v roku 2021

• 54 najlepších alternatív k Amazonu pre online nakupovanie

• Ako blokovať politické príspevky na Facebooku

• 120Hz televízory a telefóny sú tu: Potrebujete to?

• Najlepšie online kalkulačky na vyriešenie akéhokoľvek problému

• 7 stránok, na ktorých nájdete verejnú stopáž pre vaše video projekty

• Spravujte svoje zoznamy Twitter v prehliadači Chrome jednoduchým spôsobom

• 8 najlepších alternatív sociálnych médií k Facebooku a Twitteru

• 5 najlepších stránok na testovanie obnovovacej frekvencie monitora

• 8 najlepších stránok na čítanie manga online zadarmo

• 10 najlepších stránok na kontrolu faktov na boj proti dezinformáciám

• Funimation vs Crunchyroll: Čo je najlepšie pre streamovanie anime?

• Ako nahrávať obrazovku na Chromebooku