Ako ste dizajner i trebate neke korisne alate za ubrzavanje, suradnju ili reviziju vaših web razvojnih projekata, proširenje za Chrome ima mnoštvo alata.

Ovaj popis sadrži neke od najpopularnijih – a neki bi tvrdili da su potrebni – alata i proširenja za Chrome^{(tools and Chrome extensions)} koje bi svaki korisnik koji radi na dizajnu trebao imati u svojoj torbi.

1. DomFlags

DOM Flags je proširenje za ^{(DOM Flags)}Chrome jednostavno za korištenje koje programerima pruža novi način rada s alatima preglednika. Omogućuje programerima da ubrzaju zadatak stiliziranja elemenata.

Korištenjem tipkovničkih prečaca za svaki element možete označiti svoju navigaciju.

Svi smo iskusili poteškoće u pregledu vrlo detaljnih elemenata i lako se izgubiti.

DOM zastavice^{(DOM Flags)} vam omogućuju praćenje stilskih elemenata uključuje značajku za automatsku provjeru komponenti s točnošću. To će zauzvrat pomoći ubrzati tijek rada i implementaciju DevToolsa .^(DevTools)

DOM zastavice^{(DOM Flags)} vam omogućuju praćenje promjena. I zadržite fokus na elementima s kojima radite.

2. Sizzy

Sizzy daje dizajnerima i programerima jednostavan način testiranja svojih web stranica u više okvira za prikaz.

Sizzy pruža jednostavan način da provjerite svoj dizajn u stvarnom vremenu. Nudi interaktivni prikaz bilo kojeg broja uređaja i veličina zaslona. Možete čak i simulirati tipkovnicu uređaja, a zatim prelaziti između pejzažnog i portretnog načina rada.

Instaliranjem proširenja za Chrome dodat će se gumb na vašu alatnu traku, koji će, kada se klikne, otvoriti trenutni URL na Sizzy platformi. Proširenje će blokirati sva zaglavlja " x-frame-options " tako da ćete moći pogledati bilo koju web stranicu na mreži.

Sizzy je projekt otvorenog koda, a cijeli kod možete vidjeti ovdje^(here) .

3. Checkbot

Checkbot može testirati vašu web lokaciju na sigurnosne probleme i također revidirati brzinu učitavanja stranice vaše web stranice. Dizajnerima će pružiti sredstva za prepoznavanje tipičnih pogrešaka i preporučiti poboljšanja sigurnosti web-mjesta, tražilice i brzine web-mjesta.

Koristeći više od 50 mjernih podataka o najboljim praksama, pregledat će web stranicu radi pronalaženja najboljih praksi SEO , neispravnih veza, dupliciranog sadržaja i još mnogo toga. Alat će također potvrditi CSS , JS i HTML .

Checkbot otkriva pogreške dizajnera i kodera u stvarnom vremenu i štedi vam nevolje da se morate vraćati i ponovno provjeravati svoj rad.

Ako tražite kvalitetan alat koji će popraviti neispravne veze na stranicama, osigurati jedinstven sadržaj i naslove stranica te eliminirati lance preusmjeravanja, ovaj bi alat bio koristan.

Za dizajnere, može vam pomoći da minimizirate svoj CSS i JS, kao i dati preporuke o tome kako smanjiti svoj CSS i iskoristiti predmemoriju preglednika.

4. GistBox Clipper

GistBox je jedno od najkorisnijih proširenja za Chrome za web dizajnere.

GistBox može stvoriti GitHub Gist iz bilo kojeg bloka koda na web stranici koju gledate.

U gornjem desnom kutu bilo kojeg bloka koda vidjet ćete mali gumb koji će, kada se pritisne, omogućiti skočni prozor koji vam omogućuje spremanje koda u Gist .

Možete stvoriti nove Gists desnim klikom miša i spremiti blokove koda za kasniju provjeru i korištenje.

Integracija s GitHubom^(GitHub) omogućuje dizajnerima i programerima prikupljanje blokova koda i manipulaciju njima ili kategoriziranje za kasniju upotrebu. To ga čini praktičnim i učinkovitim alatom za proširenje za Chrome .

5. ColorZilla

ColorZilla je nevjerojatno korisno proširenje za Chrome za prikupljanje hex kodova koji se mogu označiti, označiti i kategorizirati za pojedinačne projekte web dizajna.

Omogućuje vam da odaberete alat za kapaljku koji će izdvojiti boju s bilo koje web stranice i spremiti je u međuspremnik ColorZilla .

Pomoću njega možete brzo razviti palete boja za kasniju upotrebu i kao način da osigurate dosljednu upotrebu boja u web dizajnu i razvoju.

ColorZilla također djeluje kao analizator boja i CSS uređivač gradijenta tako da možete pretvoriti sliku u CSS .

6. WhatFont

 Ovo proširenje^{(Chrome Extension)} za Chrome pravi je uštedu vremena za one koji žele upotrijebiti svoje omiljene fontove i ugraditi ih u vlastiti projekt web dizajna.

WhatFont Chrome proširenje omogućuje programerima da brzo analiziraju i identificiraju gotovo svaki font na bilo kojoj web stranici.

Proširenje je dobro razvijeno i umjesto otvaranja inspekcijskih alata, proširenje radi jednostavnim mahanjem mišem preko fonta.

Ne samo to, već će proširenje također identificirati uslugu koja se koristi za posluživanje fonta za odlazak stranica^(Pages) i podržavat će Google Font API i Typekit.^{(Google Font API and Typekit.)}

7. LightShot

LightShot je brzi alat za snimku zaslona koji vam omogućuje da snimite cijelu ili dio bilo koje stranice i da je prenesete ili preuzmete ili pošaljete na odredište treće strane.

Snimke zaslona koje je napravio LightShot mogu se koristiti i dijeliti na društvenim mrežama ili tiskati.

Možete označiti i dodati tekst, strelice i više u odabrani dio zaslona. No, možda je jedna od najbriljantnijih značajki ovog jednostavnog alata za web dizajnere to što odabirom slike možete nastaviti s punim pretraživanjem Google slika za slične slike na mreži.

LightShot se može konfigurirati na više jezika.

Proširenje je napisano u čistom JavaScriptu^(JavaScript) i također će raditi za Windows , Chromebook , Linux i Mac OS . Također mu se može pristupiti kao desktop aplikaciji^{(desktop application)} što ga čini izvrsnim izborom za web dizajnere koji ovise o više uređaja.

8. Sjajna snimka zaslona

Poput Lightshota^(Lightshot) , Awesome Screenshot je proširenje za snimanje zaslona i slika.

Međutim, razlikuje se od Lightshota^(Lightshot) na više načina. Sjajna snimka zaslona^{(Awesome Screenshot)} može se konfigurirati da poveže sve vaše snimke zaslona s vašim Google pogonom.

Omogućuje vam da snimite one elemente koji su izvan vašeg pogleda kako biste snimili cijelu stranicu. Ima dodatne alate za uređivanje i bilješke, zarez omogućuje izrezivanje i uređivanje slika unutar ekstenzije.. ili uz korištenje dodatnih aplikacija Awesome Screenshot

Njegove značajke možete proširiti tako da instalirate i aplikaciju Chrome za stolna računala. Proširenje također omogućuje snimanje i dijeljenje videozapisa kako biste mogli surađivati ​​s drugim programerima ili dizajnerima kada radite na bilo kojoj web stranici.

Snimci zaslona možete dodati dodatne slike, kao i plave ili izbrisati elemente koje ne biste radije pokazivali drugima.

9. Izbrišite predmemoriju

Chromeovo proširenje^{(Cache Chrome Extension)} Clear Cache brz je i jednostavan alat koji vam omogućuje brisanje kolačića i predmemorije stranice koju gledate. Uklanja potrebu za navigacijom do stranice s postavkama vašeg preglednika kako biste izbrisali nekoliko jednostavnih elemenata stranice.

Za web dizajnere koji rade višestruke uređivanja i žele ih vidjeti u stvarnom vremenu, ovo je izvrstan alat koji će eliminirati većinu frustracija gledanja starih podataka.

Ponekad morate izbrisati predmemoriju i kolačiće, ali navigacija do postavki Chromea je zamorna. ^(Chrome)Brisanje predmemorije^(Cache) omogućuje vam brisanje predmemorije, kao i globalnih ili lokalnih kolačića jednim klikom na gumb.

Clear Cache omogućit će vam da konfigurirate koje elemente želite izbrisati sa stranice. Varijable^(Variables) uključuju gotovinu^(Cash) , preuzimanja, sve sustave, podatke obrasca, na Cashu^(Cash) , indeksnu bazu podataka, podatke dodataka, lozinke i još mnogo toga.

10. Web Developer proširenje za Google Chrome

Proširenje za Google Chrome za web razvojne programere^{(Web Developer Google Chrome Extension)} omogućuje razvojnim programerima i dizajnerima da jednostavno revidiraju, analiziraju i provjere svoje web stranice na kršenje najboljih praksi dizajna, kodiranja, upotrebljivosti i optimizacije tražilice.

To je izvrstan sve-u-jednom alat koji nije težak za pregledavanje naših resursa, ali pruža gomilu informacija korisnih za web dizajn, također je odgovoran za elemente optimizacije tražilice unutar web stranice ili stranice.

 Proširenje instalira alatnu traku s više alata za web programere.

Alat će vam dati naznake o veličini, širini i dimenzijama stranice koje su u suprotnosti s najboljom praksom korištenja na više uređaja. Omogućuje vam provjeru ugrađenog JavaScripta^(JavaScript) i pregled vaše web stranice kroz simulaciju različitih uređaja.

Proširenje dobro funkcionira na Windows , Linux i Mac OS . Uz probleme kodiranja i dizajna, također će pružiti uvid u informacije o metaoznakama, zaglavlja odgovora, informacije o boji i topografske informacije.

Glavne značajke alata kao i njegove pune mogućnosti možete pregledati na web stranici programera Chrisa Pedericksa^{(Chris Pedericks’ website)} .

Nema sumnje da postoji mnoštvo drugih visokokvalitetnih i korisnih proširenja za Chrome koje bi web dizajneri ili programeri mogli koristiti.

Ovaj popis prikazuje nekoliko najpopularnijih i najkorisnijih alata. Imate li kakvu preporuku za alate za koje mislite da su korisniji ili bolji od onih na ovom popisu? Obavijestite nas.

Top 10 Chrome Extensions and Tools for Web Designers

If you are dеsigner in need of some useful tools to speed up, collaborate or audit your web development projects, Chrome extension has a multitude оf tооls.

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 najboljih društvenih mreža za grafičke dizajnere da pokažu svoje portfelje

• Spotify Web Player: Kako mu pristupiti i koristiti

• 7 najboljih alata i aplikacija za besplatno stvaranje vlastitog mema

• Zašto se još uvijek isplati koristiti Bing za vaša web pretraživanja

• 8 alata za izradu slika savršene veličine za stranice društvenih medija

• 10 osnovnih alata za digitalnog nomada

• 6 mjesta za besplatno igranje retro igara na mreži

• Funimation vs Crunchyroll: Što je najbolje za streaming animea?

• 10 najboljih besplatnih stranica za hosting slika u 2022

• 3 najbolja online OCR alata za izdvajanje teksta iz slika

• 7 web-mjesta za pronalaženje dioničkog materijala u javnoj domeni za svoje video projekte

• 8 političkih subreddita za mirnu političku debatu

• 16 najboljih mjesta za pronalaženje besplatnih audioknjiga na mreži

• 5 najboljih web-mjesta za popravak udaljenih računala na kojima možete odmah dobiti pomoć

• Gdje je veganska hrana blizu mene? 6 najboljih mjesta za pretraživanje vašeg područja

• 7 najboljih Deepfake aplikacija i web stranica

• Kako besplatno slušati radio postaje na mreži

• Najbolji online kalkulatori za rješavanje bilo kojeg problema

• 5 najboljih web-lokacija i aplikacija za učenje gitare

• 5 najboljih web-mjesta za pronalaženje online učitelja za odrasle i djecu