Это перепечатка статьи, которая вышла в нашей группе «ВКонтакте».
Перечисленные ниже плагины упростят работу с подбором цветов, шрифтов, размеров элементов, помогут протестировать производительность и другие показатели сайта.
ColorZilla
ColorZilla – это целый набор инструментов для работы с цветом. Здесь есть пипетка, с помощью которой можно определить цвет каждого пикселя на сайте, цветовой миксер, генератор CSS-градиентов и многое другое. Для вызова пипетки можно назначить горячие клавиши.
![10 браузерных расширений для веб-разработчиков и дизайнеров 10 браузерных расширений для веб-разработчиков и дизайнеров](/upload/img/14-08-2019/2/1.jpg)
Font swap
Расширение позволяет «примерить» шрифт из библиотеки Google Fonts на любой сайт. Можно отфильтровать шрифты по определенным признакам или ввести название в строку поиска. Переключатель «Apply to» позволяет изменять шрифт разных частей сайта.
![10 браузерных расширений для веб-разработчиков и дизайнеров 10 браузерных расширений для веб-разработчиков и дизайнеров](/upload/img/14-08-2019/2/2.jpg)
WhatFont
Расширение позволяет в один клик определять шрифты, используемые на страницах. После щелчка по значку расширения названия будут показываться при наведении на текст. Чтобы выйти из режима, нужно нажать «Exit WhatFont».
![10 браузерных расширений для веб-разработчиков и дизайнеров 10 браузерных расширений для веб-разработчиков и дизайнеров](/upload/img/14-08-2019/2/4.jpg)
Corporate Ipsum
Генерация шаблонного текста («рыбы») для заполнения сайта. Из всех подобных расширений это, пожалуй, самое простое в использовании. Выбираете количество слов с помощью ползунка и получаете разбитый на абзацы текст.
![10 браузерных расширений для веб-разработчиков и дизайнеров 10 браузерных расширений для веб-разработчиков и дизайнеров](/upload/img/14-08-2019/2/5.jpg)
User-Agent Switcher
User-Agent Switcher помогает проверить отображение сайта на разных устройствах и браузерах.
![10 браузерных расширений для веб-разработчиков и дизайнеров 10 браузерных расширений для веб-разработчиков и дизайнеров](/upload/img/14-08-2019/2/6.jpg)
Wappalyzer
Нажав на иконку расширения, можно узнать о технологиях, используемых на сайте: язык программирования, CMS, фреймворки, системы аналитики и прочих.
![10 браузерных расширений для веб-разработчиков и дизайнеров 10 браузерных расширений для веб-разработчиков и дизайнеров](/upload/img/14-08-2019/2/7.jpg)
Visual Inspector
Мощный инструмент, позволяющий не только тщательно исследовать каждый элемент сайта (шрифты, палитры, графику, блоки), но и совместно работать над проектом, оставлять комментарии и делиться результатами работы. Для полноценного использования нужно пройти регистрацию (она бесплатна).
![10 браузерных расширений для веб-разработчиков и дизайнеров 10 браузерных расширений для веб-разработчиков и дизайнеров](/upload/img/14-08-2019/2/8.jpg)
Check My Links
Это расширение пригодится не только разработчикам, но и сеошникам. С помощью него можно определять нерабочие («битые») ссылки на странице.
![10 браузерных расширений для веб-разработчиков и дизайнеров 10 браузерных расширений для веб-разработчиков и дизайнеров](/upload/img/14-08-2019/2/9.jpg)
Lighthouse
Полезная штука для быстрого аудита производительности, доступности, SEO и других показателей сайта. Проверка занимает некоторое время, а отчет по результатам открывается в новом окошке.
![10 браузерных расширений для веб-разработчиков и дизайнеров 10 браузерных расширений для веб-разработчиков и дизайнеров](/upload/img/14-08-2019/2/10.jpg)
Формируя подборку, я отобрала приложения, которые проще всего использовать во время работы. Расскажите, а чем пользуетесь вы?
Читайте также: