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

Это перепечатка статьи, которая вышла в нашей группе «ВКонтакте».

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

ColorZilla

ColorZilla – это целый набор инструментов для работы с цветом. Здесь есть пипетка, с помощью которой можно определить цвет каждого пикселя на сайте, цветовой миксер, генератор CSS-градиентов и многое другое. Для вызова пипетки можно назначить горячие клавиши.

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

Font swap

Расширение позволяет «примерить» шрифт из библиотеки Google Fonts на любой сайт. Можно отфильтровать шрифты по определенным признакам или ввести название в строку поиска. Переключатель «Apply to» позволяет изменять шрифт разных частей сайта.

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

Page Ruler

Page Ruler – простая и удобная линейка, для измерения высоты и ширины элементов, а также их позиций на странице (top, bottom, left, right).

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

WhatFont

Расширение позволяет в один клик определять шрифты, используемые на страницах. После щелчка по значку расширения названия будут показываться при наведении на текст. Чтобы выйти из режима, нужно нажать «Exit WhatFont».

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

Corporate Ipsum

Генерация шаблонного текста («рыбы») для заполнения сайта. Из всех подобных расширений это, пожалуй, самое простое в использовании. Выбираете количество слов с помощью ползунка и получаете разбитый на абзацы текст.

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

User-Agent Switcher

User-Agent Switcher помогает проверить отображение сайта на разных устройствах и браузерах.

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

Wappalyzer

Нажав на иконку расширения, можно узнать о технологиях, используемых на сайте: язык программирования, CMS, фреймворки, системы аналитики и прочих.

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

Visual Inspector

Мощный инструмент, позволяющий не только тщательно исследовать каждый элемент сайта (шрифты, палитры, графику, блоки), но и совместно работать над проектом, оставлять комментарии и делиться результатами работы. Для полноценного использования нужно пройти регистрацию (она бесплатна).

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

Check My Links

Это расширение пригодится не только разработчикам, но и сеошникам. С помощью него можно определять нерабочие («битые») ссылки на странице.

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

Lighthouse

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

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

Формируя подборку, я отобрала приложения, которые проще всего использовать во время работы. Расскажите, а чем пользуетесь вы?

Читайте также:

©