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

Почему я так люблю расширения Google Chrome, ведь в большинстве случаев, они дублируют онлайн-сервисы. Мне, как веб-разработчику, за день приходится открывать десятки сервисов: тестировать, валидировать, замерять, сжимать, оптимизировать, генерировать.

Список действий внушительный. Открыть Google, вбить хотя-бы первые три буквы нужного сервиса, подождать пока сайт загрузится, потом закрыть сайт – это все лишние телодвижения. Для сравнения – клик по иконке с расширением в браузере, моментально открывает сервис, что сильно экономит моё время.

Топ 10 расширений для Google Chrome

1) HTML Book

С помощью справочника, можно оперативно узнать информацию по тегам и свойствам, актуально для новичков.

2) Web Developer

Выбрав вкладку Tools, можно быстро сделать валидацию HTML/CSS кода, как на локальном сайте, так и опубликованным в интернете.

На вкладке Outline, мы можем сделать обводку для каких-нибудь элементов сайта, например увидеть все заголовки с тегом h или внешние ссылки, не залезая в код. Зачем это нужно? Как вариант, быстро проанализировать чужой сайт.

3) CSSViewer

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

4) ColorPicker

Вам безумно понравилось сочетание цветов на сайте: "Я непременно хочу сделать следующий сайт, применив именно эти цвета" – подумаете вы! И тут вы берёте пипетку и тыкаете по нужным цветам. Расширение запоминает эти цвета, в дальнейшем, вы копируете их из Picked Color History.

5) Font Awesome Icon Finder

Это фантастика, мы можем искать иконки прямо у себя браузере, копировать код и сразу вставлять в проект. Если бы я раньше знал об этом, сколько бы времени уже было сэкономлено.

6) Google PageSpeed Insights

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

Сделал сайт – будь добр, выложи на хостинг, протестируй и если, что не так, то Google подскажет, что сжать и настроить.

7) WhatRuns

Мы можем узнать, на чём построен сайт – библиотеки, скрипты, фреймворки, виджеты, какая используется аналитика.

8) WordPress Theme Detector and Plugin Detector

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

Как же нам выгодно воспользоваться полученной информацией?

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

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

9) Search Stackoverflow

Поиск по сервису вопросов и ответов для программистов. По своим наблюдениям, 80% моих поисковых запросов по веб-разработке и программированию, ведут на Stackoverflow.

10) Google Переводчик

Данное расширение хоть и не имеет прямого отношения к веб-разработке, но если вы не владеете английским, то как вы поймёте, о че там рассуждают на Stackoverflow?

Я даю название классам и идентификатором на английском (так и надо делать) и в случае затруднений, обращаюсь к переводчику. Представленный топ расширений перекрывает большую часть потребностей веб-разработчика. Здесь нет ничего лишнего и часто мною используется.

Напишите в комментариях, какие вы используете Google Chrome расширения в работе?