Ако сте дизайнер, който се нуждае от някои полезни инструменти за ускоряване, сътрудничество или одит на вашите проекти за уеб разработка, разширението за Chrome има множество инструменти.

Този списък включва някои от най-популярните – и някои биха твърдят, че са необходими – инструменти и разширения за Chrome,^{(tools and Chrome extensions)} които всеки потребител, който извършва дизайнерска работа, трябва да има в чантата си с комплект.

1. DomFlags

DOM Flags е лесно за използване разширение за Chrome , което предоставя нов начин за разработчиците да работят с инструменти на браузъра. Той позволява на разработчиците да ускорят задачата за стилизиране на елементи.

С помощта на клавишни комбинации за всеки елемент можете да маркирате навигацията си.

Всички сме изпитвали трудностите при инспектирането на много детайлни елементи и е лесно да се изгубите.

Флаговете на DOM^{(DOM Flags)} ви позволяват да проследявате стилизиращи елементи, включва функция за автоматично инспектиране на компоненти с точност. Това от своя страна ще помогне за ускоряване на работния процес и внедряването на DevTools .

DOM Flags ви позволява да проследявате промените. И поддържайте фокуса си върху елементите, с които работите.

2. Огромен

Sizzy дава на дизайнерите и разработчиците лесен начин да тестват своите сайтове в множество изгледи.

Sizzy предоставя лесен начин да проверите дизайна си в реално време. Той предлага интерактивен изглед на произволен брой устройства и размери на екрана. Можете дори да симулирате клавиатура на устройството и след това да превключвате между пейзажен и портретен режим.

Инсталирането на разширение за Chrome ще добави бутон към вашата лента с инструменти, който при щракване ще отвори текущия URL адрес^(URL) в платформата Sizzy . Разширението ще блокира всички заглавки „ x-frame-options “, така че ще можете да разгледате всеки уебсайт онлайн.

Sizzy е проект с отворен код и можете да видите целия код тук^(here) .

3. Checkbot

Checkbot може да тества вашия сайт за проблеми със сигурността и също така да одитира скоростта на зареждане на страницата на вашия уебсайт. Той ще предостави на дизайнерите средство за идентифициране на типични грешки и ще препоръча подобрения в сигурността на сайта, търсачката и скоростта на сайта.

Използвайки повече от 50 показателя за най-добри практики, той ще одитира уебсайт за най-добри практики за SEO , неработещи връзки, дублирано съдържание и др. Инструментът също така ще валидира CSS , JS и HTML .

Checkbot улавя грешките на дизайнера и кодера в реално време, като ви спестява неприятностите да се налага да се връщате и да проверявате работата си многократно.

Ако търсите качествен инструмент, който ще поправи неработещи връзки към страници, ще осигури уникално съдържание и заглавия на страници и ще премахне вериги за пренасочване, този инструмент би бил полезен.

За дизайнерите това може да ви помогне да сведете до минимум вашите CSS и JS, както и да предостави препоръки как да минимизирате своя CSS и да използвате кеширането на браузъра.

4. GistBox Clipper

GistBox е едно от най-полезните разширения на Chrome за уеб дизайнери.

GistBox може да създаде GitHub Gist от всеки кодов блок на уеб страницата, която разглеждате.

В горния десен ъгъл на всеки кодов блок ще видите малък бутон, който, когато бъде натиснат, ще позволи изскачащ прозорец, който ви позволява да запишете кода в Gist .

Можете да създадете нови Gists с щракване с десния бутон на мишката и да запазите блокове код за по-късна проверка и използване.

Интегрирането с GitHub позволява на дизайнерите и разработчиците да събират кодови блокове и да ги манипулират или да ги категоризират за по-късна употреба. Това го прави удобен и ефективен инструмент за разширение на Chrome .

5. ColorZilla

ColorZilla е невероятно полезно разширение за Chrome за събиране на шестнадесетични кодове, които могат да бъдат маркирани, етикетирани и категоризирани за индивидуални проекти за уеб дизайн.

Той ви позволява да изберете инструмент за капкомер, който ще извлече цвета от всяка уеб страница и ще го запази в клипборда на ColorZilla .

С него можете бързо да разработите цветови палитри за по-късна употреба и като начин да се уверите, че използвате цветовете последователно в уеб дизайна и разработката.

ColorZilla също действа като цветен анализатор и CSS градиентен редактор, така че можете да конвертирате изображение в CSS .

6. WhatFont

 Това разширение за Chrome^{(Chrome Extension)} е истинско спестяване на време за тези, които искат да използват любимите си шрифтове и да ги включат в собствен проект за уеб дизайн.

Разширението WhatFont Chrome^{(WhatFont Chrome)} позволява на разработчиците бързо да анализират и идентифицират почти всеки шрифт на всяка уеб страница.

Разширението е добре развито и вместо да се налага да отваря инструментите за проверка, разширението работи, като просто махнете с мишката върху шрифта.

Не само това, но разширението също така ще идентифицира услугата, която се използва за обслужване на шрифт от страниците^(Pages) и ще поддържа Google Font API и Typekit.^{(Google Font API and Typekit.)}

7. LightShot

LightShot е бърз инструмент за снимки на екрана, който ви позволява да заснемете цялата или част от всяка страница и или да я качите, или да я изтеглите, или да я изпратите до дестинация на трета страна.

Екранните снимки, направени от LightShot, могат да бъдат използвани и споделяни в социалните медии или отпечатани.

Можете да коментирате и добавяте текст, стрелки и други към избраната част от екрана. Но може би една от най-брилянтните функции на този прост инструмент за уеб дизайнери е, че като изберете изображение, можете да продължите да извършвате пълно търсене на изображения в Google за подобни изображения онлайн.

LightShot може да бъде конфигуриран на няколко езика.

Разширението е написано на чист JavaScript и ще работи и за Windows , Chromebook , Linux и Mac OS . Може да бъде достъпен и като настолно приложение^{(desktop application)} , което го прави отличен избор за уеб дизайнери, които зависят от множество устройства.

8. Страхотна екранна снимка

Подобно на Lightshot , Awesome Screenshot е разширение за заснемане на екран и изображения.

Той обаче се различава от Lightshot по редица начини. Страхотната екранна снимка^{(Awesome Screenshot)} може да бъде конфигурирана да свързва всичките ви екранни снимки с вашето устройство в Google .

Позволява ви да снимате на екрана онези елементи, които са извън вашия изглед, за да заснемете цялата страница. Той има допълнителни инструменти за редактиране и анотации, запетая позволява изрязване и редактиране на изображения в рамките на разширението... или с използването на допълнителни приложения за страхотни екранни снимки

Можете да разширите функциите му, като инсталирате приложението Chrome и за десктоп. Разширението също така позволява заснемане и споделяне на видео, така че да можете да си сътрудничите с други разработчици или дизайнери, когато работите на всеки сайт.

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

9. Изчистване на кеша

Разширението за изчистване на кеша за Chrome^{(Cache Chrome Extension)} е бърз и прост инструмент, който ви позволява да изчистите бисквитките и кеша на страницата, която разглеждате. Премахва необходимостта да навигирате до страницата с настройки на вашия браузър, за да изчистите няколко прости елемента на страницата.

За уеб дизайнери, които правят множество редакции и искат да ги преглеждат в реално време, това е отличен инструмент, който ще премахне голяма част от разочарованието от разглеждането на стари данни.

Понякога трябва да изчистите кеша и бисквитките си, но навигирането до настройките на Chrome е досадно. Изчистване на кеша^(Cache) ви позволява да изтриете кеша си, както и глобалните или локални бисквитки с едно натискане на бутон.

Clear Cache ще ви позволи да конфигурирате кои елементи искате да изчистите от страницата. Променливите^(Variables) включват Cash , изтегляния, всички системи, данни за формуляр, в Cash , индексна база данни, данни за плъгини, пароли и др.

10. Разширение за уеб разработчик за Google Chrome

Разширението за Google Chrome за уеб разработчици^{(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 dеsigner in need of some useful tools to speed uр, collaborate or audit yoυr web development projects, 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-те най-добри сайта за социални мрежи за графични дизайнери, които да представят портфолиото си

• Spotify Web Player: Как да получите достъп и да го използвате

• 7 най-добри инструменти и приложения за създаване на свой собствен мем безплатно

• Защо все още си струва да използвате Bing за вашите уеб търсения

• 8 инструмента за създаване на изображения с перфектен размер за сайтове за социални медии

• 8 най-добри канала в YouTube за уроци по фотография и видео

• 5 най-добри уебсайта за отдалечен ремонт на компютри, за да получите помощ сега

• 16-те най-добри сайта за намиране на безплатни аудиокниги онлайн

• 5-те най-добри безплатни онлайн инструменти за създаване на блок-схеми

• 7 най-добри Deepfake приложения и уебсайтове

• 10-те най-добри безплатни сайта за хостинг на изображения през 2022 г

• 10 образователни ресурса за безплатни PDF учебни материали и помагала

• Как да блокирате политически публикации във Facebook

• Amazon Prime си струва ли цената?

• Най-добрите инструменти да се научите на език

• 3 най-добри онлайн OCR инструмента за извличане на текст от изображения

• 10 основни инструмента за цифровия номад

• Funimation срещу Crunchyroll: Кое е най-доброто за поточно предаване на аниме?

• 8 най-добри сайта за четене на манга онлайн безплатно

• Как да редактирате видеоклипове в YouTube: 5 най-добри практики