First Code

Курсы программирования

10 расширений Google Chrome для веб-разработчиков и дизайнеров

1

What Font — find font

Очень полезное расширение, которое позволяет очень быстро узнать, какой шрифт используется на любом веб-сайте. Инструмент достаточно прост в использовании для разработчиков. Для того, что бы просмотреть какой шрифт используется на сайте, достаточно просто навести курсор на текст.

Ссылка на расширение

2

ColorZilla

Одно из самых популярных расширений для разработчиков, которое позволяет получить цвет из любой точки браузера, быстро настроить этот цвет и вставить его в другую программу.

Основные функции расширения:

✓ Пипетка — получить цвет любого пикселя на странице
✓ Расширенная палитра цветов (похожа на Photoshop)
✓ Окончательный генератор градиентов CSS
✓ Анализатор цвета веб-страницы — получите цветовую палитру для любого сайта
✓ Средство просмотра палитры с 7 предустановленными палитрами
✓ История цветов недавно выбранных цветов
✓ Отображает информацию об элементе, такую ​​как имя тега, класс, идентификатор, размер и т. Д.
✓ Автоматическое копирование выбранных цветов в буфер обмена
✓ Со всеми функциями, Вы можете ознакомится здесь: http://colorzilla.com/chrome/features.html

Ссылка на расширение

3

Web Developer

Расширение Web Developer добавляет в браузер кнопку на панели инструментов с различными инструментами веб-разработчика.

Ссылка на расширение

4

GoFullPage — Full Page Screen Capture

С помощью GoFullPage Вы легко сможете делать скриншоты всей страницы сайта. Щелкните значок расширения (или нажмите Alt + Shift + P) и наблюдайте, как расширение захватывает каждую часть страницы и переносится на новую вкладку вашего снимка экрана, где Вы сможете скачать скрин как изображение или PDF.

Ссылка на расширение

6

Designer Tools

С помощью данного расширения Вы сможете идеально выравнивать элементы, измерить расстояние между ними и выявить размер любого блока или элемента на сайте. Вы можете использовать линейки для добавления направляющих. Также прямо в браузере, на любом сайте Вы сможете добавлять сетки, сохранять, перемещать и удалять направляющие.

Ссылка на расширение

6

Dimensions

Это расширение измеряет размеры от указателя мыши вверх / вниз и влево / вправо, пока он не достигнет границы. Так что, если Вы хотите измерить расстояния между элементами на веб-сайте, то это расширение Вам поможет. Следует учесть, что это расширение не работает с изображениями, потому что там цвета сильно меняются от пикселя к пикселю.

Ссылка на расширение

7

Wappalyzer

Очень полезное расширение, которое моментально позволяет узнать какие технологии используются на веб-сайте. Вы просто переходите на интересующий Вас сайт и кликайте на иконку расширения, и у Вас всплывает отчет по сайту, язык программирования, все библиотеки и фреймворки, аналитические и платежные системы, CMS, сервер и т.д.

Ссылка на расширение

7

WordPress Theme Detector and Plugin Detector

Расширение будет очень полезно для разработчиков, которые часто сталкиваются с WordPress.

Вы когда-нибудь были на действительно отличном сайте WordPress и хотели бы знать, как он был построен, какая тема установлена и какие плагины дают ему такую ​​функциональность?
Что ж, с помощью данного расширения это возможно, так как оно сканирует и определяет все установленные темы и плагины WordPress на сайте, который Вы просматриваете.

Еще одна очень хорошая особенность расширения в том, что если Вы просматриваете сайт, который работает на WordPress, значок расширения становится синим, если на текущем сайте нет WordPress, значок расширения станет серым.

Ссылка на расширение

8

Icon Search

Это расширение Chrome позволяет выполнять поиск, предварительный просмотр и выбирать значки Font Awesome 4 / Font Awesome 5 / Cryptocoins / Material icons / Foundation icons / OpenIconic icons из единого интерфейса поиска. Предварительный просмотр нескольких размеров и стилей позволяет копировать HTML / Unicode / CSS в буфер обмена для использования в своем проекте.

Ссылка на расширение

9

CSS3 Generator

CSS3 Generator — удобное расширение, которое позволяет генерировать код CSS:
— Тени;
— Градиенты (линейные, радиальные, полосатые);
— Радиус границы;
— Стрелки (для всплывающих подсказок).
— и т.д.

Ссылка на расширение

10

Google PageSpeed Insights API Extension

Данное расширение позволит Вам проверить производительность сайта. Необходимо просто перейти на сайт, который хотите проверить и нажать на иконку расширения. Расширение произведет проверку и покажет в реальном времени оценку Google PageSpeed ​​Insights для компьютеров и мобильных устройств.

Ссылка на расширение