Обложка статьи «10 полезных расширений Google Chrome для разработчиков и дизайнеров»

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

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

ColorZilla

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

Расширение для веб-разработчика ColorZilla

Можно сразу скопировать нужный цвет

WhatFont

Часто в макетах используются несколько начертаний или разные шрифты. Чтобы не выискивать свойства в коде, установите WhatFont и проверяйте шрифты прямо в браузере.

Расширение WhatFont

Удобное окно с характеристиками шрифта

CSSViewer

CSSViewer — отличное расширение для исследования CSS-свойств элементов. Включите его, наведите курсор на нужный объект и посмотрите подробное описание стилей.

Расширение CSSViewer

Подробное описание элемента

Code Cola

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

Расширения для веб разработчика CodeCola

Изменения сохраняются, для перезагрузки страницы требуется подтверждение

Windows Resizer

Простой инструмент для изменения размеров окна и вьюпорта. Можно выбрать разрешение из списка или задать свои параметры. В параметрах расширения доступны настройка горячих клавиш и создание пресетов для тестирования. Для удобства можно вывести Windows Resizer как всплывающее окно.

Расширение Windows Resizer

Пресеты для тестирования адаптивности

PerfectPixel

PerfectPixel накладывает изображение макета поверх вёрстки в браузере. Это позволяет подогнать страницу с точностью до нескольких пикселей. В настройках расширения регулируются прозрачность и расположение изображения макета.

Расширение PerfectPixel

Можно наложить любое изображение

PageLiner

В паре с PerfectPixel отлично работает расширение PageLiner. С его помощью вы добавите в окно браузера горизонтальные и вертикальные линии — прямо как в графическом редакторе.

Расширение PageLiner

Удобно равнять элементы интерфейса по линиям

Siteimprove Accessibility Checker

Siteimprove Accessibility Checker помогает убедиться в том, что HTML соответствует стандартам доступности — то есть вашей странице могут пользоваться люди с разными возможностями и ограничениями.

Подробнее о доступности и способах её проверки можно узнать из этой статьи.

Расширение Siteimprove Accessibility Checker

Быстрая проверка доступности страницы

Wappalyzer

Увидели классный сайт и захотели повторить отдельные фишки в своём проекте? Узнайте с помощью Wappalyzer, какие технологии, фреймворки и библиотеки для этого нужны.

Расширение Wappalayzer

Вся информация представлена в виде удобной таблицы

Web Developer

Мощное расширение, с помощью которого можно отключать CSS и JavaScript, удалять изображения, проверять валидность HTML и CSS, изменять стили, тестировать формы, смотреть мета-теги, изменять размер окна браузера. В принципе, Web Developer способен заменить практически все указанные выше расширения вместе взятые. Вопрос только в удобстве.

Расширение Web Developer

Все необходимые инструменты на одной панели

Если вы используете другие расширения для веб-разработчиков, расскажите о них в комментариях. Будем обмениваться полезным опытом.

Пользуетесь расширениями Google Chrome для вёрстки?