Ако сте дизајнер и требају вам неки корисни алати за убрзавање, сарадњу или ревизију ваших пројеката веб развоја, проширење за Цхроме^(Chrome) има мноштво алата.

Ова листа садржи неке од најпопуларнијих – а неки би тврдили да су неопходни – алата и Цхроме екстензија^{(tools and Chrome extensions)} које сваки корисник који ради на дизајну треба да има у својој торби.

1. ДомФлагс

ДОМ Флагс^{(DOM Flags)} је проширење за Цхроме^(Chrome) једноставно за коришћење које програмерима пружа нови начин да раде са алаткама претраживача. Омогућава програмерима да убрзају задатак стилизованих елемената.

Користећи пречице на тастатури за сваки елемент можете да обележите своју навигацију.

Сви смо искусили потешкоће у прегледу веома детаљних елемената и лако се изгубити.

ДОМ заставице^{(DOM Flags)} вам омогућавају да пратите елементе стила укључује функцију за аутоматску проверу компоненти са тачношћу. Ово ће заузврат помоћи да се убрза радни ток и имплементација ДевТоолса .^(DevTools)

ДОМ заставице^{(DOM Flags)} вам омогућавају да пратите промене. И задржите фокус на елементима са којима радите.

2. Сиззи

Сиззи^(Sizzy) даје дизајнерима и програмерима једноставан начин да тестирају своје веб локације у више оквира за приказ.

Сиззи^(Sizzy) пружа једноставан начин да проверите свој дизајн у реалном времену. Нуди интерактивни приказ било којег броја уређаја и величина екрана. Можете чак и да симулирате тастатуру уређаја, а затим прелазите између пејзажног и портретног режима.

Инсталирање Цхроме^(Chrome) екстензије ће додати дугме на вашу траку са алаткама, које ће, када се кликне, отворити тренутни УРЛ^(URL) на Сиззи^(Sizzy) платформи. Екстензија ће блокирати сва заглавља „ к-фраме-оптионс^{(x-frame-options)} “ тако да ћете моћи да погледате било коју веб локацију на мрежи.

Сиззи^(Sizzy) је пројекат отвореног кода, а цео код можете видети овде^(here) .

3. Цхецкбот

Цхецкбот^(Checkbot) може да тестира вашу веб локацију на безбедносне проблеме и такође ревидира брзину учитавања странице ваше веб странице. Он ће дизајнерима пружити средства за идентификацију типичних грешака и препоручиће побољшања у безбедности сајта, претраживачу и брзини сајта.

Користећи више од 50 метрика најбоље праксе, извршиће ревизију веб-сајта за најбољу СЕО^(SEO) праксу , неисправне везе, дуплирани садржај и још много тога. Алат ће такође потврдити ЦСС^(CSS) , ЈС и ХТМЛ^(HTML) .

Цхецкбот открива грешке дизајнера и кодера у реалном времену и штеди вам невоље да се морате враћати и поново проверавати свој рад.

Ако тражите алат доброг квалитета који ће поправити покварене везе на страницама, осигурати јединствен садржај и наслове страница и елиминисати ланце преусмеравања, овај алат би био користан.

За дизајнере, може вам помоћи да минимизирате ЦСС^(CSS) и ЈС, као и да пружи препоруке о томе како да умањите свој ЦСС^(CSS) и искористите кеширање претраживача.

4. ГистБок Цлиппер

ГистБок^(GistBox) је једно од најкориснијих проширења за Цхроме^(Chrome) за веб дизајнере.

ГистБок може да креира ГитХуб Гист^{(GitHub Gist)} од било ког блока кода на веб страници коју гледате.

У горњем десном углу било ког блока кода, видећете мало дугме које ће, када се притисне, омогућити искачући прозор који вам омогућава да сачувате код у Гист^(Gist) .

Можете креирати нове Гистове десним кликом миша и сачувати блокове кода за каснију инспекцију и употребу.

Интеграција са ГитХуб-^(GitHub) ом омогућава дизајнерима и програмерима да прикупљају блокове кода и манипулишу њима или их категоришу за каснију употребу. Ово га чини погодним и ефикасним алатом за проширење за Цхроме .^(Chrome)

5. ЦолорЗилла

ЦолорЗилла^(ColorZilla) је невероватно корисно проширење за Цхроме^(Chrome) за прикупљање хексадецималних кодова који се могу означити, означити и категорисати за појединачне пројекте веб дизајна.

Омогућава вам да изаберете алатку за капаљку која ће издвојити боју са било које веб странице и сачувати је у међуспремнику ЦолорЗилла^(ColorZilla) .

Помоћу њега можете брзо да развијете палете боја за каснију употребу и као начин да се уверите да доследно користите боју у веб дизајну и развоју.

ЦолорЗилла^(ColorZilla) такође делује као анализатор боја и ЦСС^(CSS) уређивач градијента тако да можете да конвертујете слику у ЦСС^(CSS) .

6. ВхатФонт

 Ово проширење за Цхроме^{(Chrome Extension)} прави уштеду времена за оне који желе да искористе своје омиљене фонтове и да их уграде у свој пројекат веб дизајна.

ВхатФонт Цхроме^{(WhatFont Chrome)} проширење омогућава програмерима да брзо анализирају и идентификују скоро сваки фонт на било којој веб страници.

Проширење је добро развијено и уместо да отвара алате за инспекцију, проширење функционише тако што се мишем помера преко фонта.

И не само то, већ ће проширење такође идентификовати услугу која се користи за приказивање фонта за одлазак на странице^(Pages) и подржаваће Гоогле Фонт АПИ и Типекит.^{(Google Font API and Typekit.)}

7. ЛигхтСхот

ЛигхтСхот^(LightShot) је алатка за брзе снимке екрана која вам омогућава да снимите целу или део било које странице и да је отпремите или преузмете или пошаљете на одредиште треће стране.

Снимци екрана које је направио ЛигхтСхот^(LightShot) могу се користити и делити на друштвеним медијима или одштампати.

Можете да коментаришете и додате текст, стрелице и друго у изабрани део екрана. Али можда је једна од најбриљантнијих карактеристика овог једноставног алата за веб дизајнере то што одабиром слике можете наставити са потпуним претраживањем Гоогле^(Google) слика за сличне слике на мрежи.

ЛигхтСхот^(LightShot) се може конфигурисати на више језика.

Екстензија је написана у чистом ЈаваСцрипт-^(JavaScript) у и такође ће радити за Виндовс^(Windows) , Цхромебоок^(Chromebook) , Линук^(Linux) и Мац ОС^{(Mac OS)} . Такође му се може приступити као десктоп апликација^{(desktop application)} што га чини одличним избором за веб дизајнере који зависе од више уређаја.

8. Сјајан снимак екрана

Као и Лигхтсхот^(Lightshot) , Авесоме Сцреенсхот^{(Awesome Screenshot)} је додатак за снимање екрана и слика.

Међутим, разликује се од Лигхтсхот^(Lightshot) -а на више начина. Сјајан снимак екрана^{(Awesome Screenshot)} се може конфигурисати да повеже све ваше снимке екрана са вашим Гоогле^(Google) диском.

Омогућава вам да снимите оне елементе који су изван вашег видокруга како бисте снимили целу страницу. Има додатне алате за уређивање и напомене, зарез омогућава исецање и уређивање слика у оквиру екстензије.. или уз коришћење додатних апликација Авесоме Сцреенсхот

Можете проширити његове функције инсталирањем Цхроме^(Chrome) апликације и за десктоп. Екстензија такође омогућава снимање и дељење видео записа како бисте могли да сарађујете са другим програмерима или дизајнерима када радите на било ком сајту.

Можете додати додатне слике на снимак екрана, као и плаве или избрисати елементе које не бисте радије приказивали другима.

9. Обришите кеш меморију

Цхроме екстензија^{(Cache Chrome Extension)} за брисање кеша је брза и једноставна алатка која вам омогућава да обришете колачиће и кеш меморију странице коју гледате. Уклања потребу за навигацијом до странице са подешавањима вашег претраживача да бисте обрисали неколико једноставних елемената странице.

За веб дизајнере који праве вишеструке измене и желе да их прегледају у реалном времену, ово је одличан алат који ће елиминисати већину фрустрација гледања старих података.

Понекад морате да обришете кеш меморију и колачиће, али навигација до подешавања Цхроме -а је заморна. ^(Chrome)Цлеар Цацхе^(Cache) вам омогућава да обришете своју кеш меморију, као и глобалне или локалне колачиће притиском на дугме.

Цлеар Цацхе^(Cache) ће вам омогућити да конфигуришете које елементе желите да обришете са странице. Променљиве^(Variables) укључују Цасх^(Cash) , преузимања, све системе, податке обрасца, на Цасх^(Cash) -у , индексну базу података, податке о додацима, лозинке и још много тога.

10. Екстензија за Гоогле Цхроме за веб програмере

Екстензија за Гоогле Цхроме за веб програмере^{(Web Developer Google Chrome Extension)} омогућава програмерима и дизајнерима да лако ревидирају, анализирају и провере своје веб странице да ли постоје кршења најбољих пракси дизајна, кодирања, употребљивости и оптимизације претраживача.

То је одличан алат „све-у-једном“ који није тежак за претраживање наших ресурса, али пружа гомилу информација корисних за веб дизајн, а такође је одговоран за елементе оптимизације претраживача на веб локацији или страници.

 Екстензија инсталира траку са алаткама са више алата за веб програмере.

Алат ће вам дати индикације о величини, ширини и димензијама странице које су у супротности са најбољом праксом коришћења на више уређаја. Омогућава вам да проверите уграђени ЈаваСцрипт^(JavaScript) и прегледате своју веб локацију кроз симулацију различитих уређаја.

Екстензија добро функционише на Виндовс^(Windows) , Линук^(Linux) и Мац ОС^{(Mac OS)} . Поред проблема са кодирањем и дизајном, такође ће пружити увид у информације о мета ознакама, заглавља одговора, информације о бојама и топографске информације.

Можете прегледати главне карактеристике алата, као и његове пуне могућности на веб локацији програмера Цхриса Педерицкс-а^{(Chris Pedericks’ website)} .

Нема сумње да постоји мноштво других висококвалитетних и корисних додатака за Цхроме^(Chrome) које би веб дизајнери или програмери могли да користе.

Ова листа приказује неколико најпопуларнијих и најкориснијих алата. Имате ли неке препоруке за алате за које мислите да су кориснији или бољи од оних на овој листи? Обавестите нас.

Top 10 Chrome Extensions and Tools for Web Designers

If you are designer in need of some useful tools to speed up, collaborate or audit your web development projects, Chrоme 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 најбољих друштвених мрежа за графичке дизајнере да покажу своје портфеље

• Спотифи Веб Плаиер: Како му приступити и користити

• 7 најбољих алата и апликација за бесплатно креирање сопственог мема

• Зашто још увек вреди користити Бинг за ваше веб претраге

• 8 алата за прављење слика савршене величине за сајтове друштвених медија

• 7 локација за проналажење снимка у јавном домену за ваше видео пројекте

• 10 основних алата за дигиталног номада

• 8 најбољих ИоуТубе канала за часове фотографије и видеа

• Фуниматион против Црунцхиролл: Шта је најбоље за стримовање анимеа?

• 12 најбесмисленијих веб локација за убијање времена и забаву

• Како уредити ИоуТубе видео записе: 5 најбољих пракси

• 5 најбољих бесплатних онлајн алата за креирање дијаграма тока

• 54 најбоље алтернативе Амазону за куповину на мрежи

• 8 политичких субредита за мирну политичку дебату

• Како бесплатно слушати радио станице на мрежи

• Започните онлајн часопис са ових 6 најбољих веб локација и апликација

• 10 најбољих бесплатних сајтова за хостовање слика у 2022

• Како блокирати политичке постове на Фејсбуку

• Најбољи алати за учење језика

• 10 најбољих сајтова за бесплатно гледање цртаних филмова на мрежи