Расширения Google Chrome для веб-разработки и не только

С момента своего появления браузер Google Chrome отличился хорошей скоростью работы, простотой и удобством, чем с первых дней завоевал массу поклонников. В то же время, на Хром обрушилось много «критики» от людей которые привыкли к удобным плагинам на Firefox — плагины были одним из факторов, которые не позволяли использовать Google Chrome в качестве привычного рабочего инструмента. В их числе были веб-дизайнеры, веб-мастера, разработчики и др.

К счастью, эти времена давно остались позади и сегодня для Google Chrome разработано (или адаптировано) огромное количество расширений (Extentions). Давайте рассмотрим те что будут полезны веб-дизайнеру или веб-мастеру.

Обновление 19.08.2019: Спустя несколько лет мы выпустили еще одну (более новую) статью по данной теме, но с небольшим уклоном в веб-дизайн — смотрите 10 лучших расширений Chrome для дизайнеров — там все приложения 100%-работающие и практически не повторяются с теми, что описаны здесь.

Web Developer

Web Developer Google Chrome

Web Developer — это не один, а целый набор инструментов для дизайнера и веб-разработчика. С помощью этого расширения вы можете получить информацию о том или ином элементе страницы, стилях, изображения и прочее. Лично я использую Web Developer но только под Firefox, чаще всего с его помощью просматриваю страницы в размере 1024*768 для корректного отображения в меньших мониторах, тестирую и правлю CSS на лету, использую для валидации, можно удалить Cookies и еще много чего.

Firebug Lite

Firebug Lite Google Chrome

Firebug Lite — облегченная версия популярного плагина Firebug (известного так же на Firefox). Расширение представляет из себя инспектор элементов и удобный инструмент отладки. В Lite-версии отсутствует Net-панель и JavaScript debugger. Для опытных разработчиков, думаю, нет смысла рассказать в чем преимущества Firebug.

CSSViewer

CSSViewer Google Chrome

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

Window Resizer

Window Resizer Google Chrome

Window Resizer позволяет вам посмотреть как ваша страница будет выглядеть при различных разрешениях экрана. Имеется предустановленные форматы мониторов, ноутбуков и мобильных устройств, что выгодно отличает это расширение Google Chrome от того же Web Developer, где (насколько я знаю в Firefox) нужно самому создавать размеры для проверки.

HTML Validator

HTML Validator Google Chrome

Согласитесь, каждый раз заходить на сайта W3C чтобы проверить валидность кода не очень удобно? Расширение HTML Validator делает процесс удобным и практически молниеносным. В одной из прошлый статей Tod’s Blog я рассматривал вопрос валидности HTML в том числе с использованием noindex. После обсуждений пришел к выводу, что она хоть и не является обязательным на 100% условием успешного сайта, но поможет выявить ошибки верстки, которые (по возможности) лучше всего исправить. Кстати, если сравнивать с тем же Web Developer, при валидации в нем вас перебрасывает на сайт W3C где можно посмотреть ошибки, но нет просмотра в текущем окне как это показано для Google Chrome на картинке выше.

PHP Consol

PHP Consol Google Chrome

PHP Consol — мощный инструмент отладки PHP. Причем, данное расширение не такое простое каким кажется с первого взгляда (полный набор функций вы можете изучить на странице расширения). Консоль позволяет увидеть ошибки, исключения и разные отладочные сообщения.

ColorPicker

ColorPicker Google Chrome

ColorPicker — это «пипетка» для Google Chrome. С помощью этого расширения вы можете определить значение цвета в любой области страницы. Основные особенности плагина:

  • — Регулируемая область пипетки — от 1 до 101 пикселя (вы можете определить значение цвета определенного пикселя или области);
  • — Проверка на совместимость (соответствие) с WCAG 2.

Одним словом — архиважный и очень удобный инструмент для дизайнера.

Chrome Palette

Chrome Palette Google Chrome

Chrome Palette — еще одно полезное расширение для работы с цветом. Благодаря Chrome Palette можно за считанные секунды сформировать палитры из любого изображения:

Font Editor

Font Editor Google Chrome

Расширение Font Editor позволит вам посмотреть как будут выглядеть те или иные шрифты (включая гарнитуру, начертание, размер шрифта и прочее) на любом сайте:

Chrome Page Extended

Chrome Page Extended Google Chrome

Chrome Page Extended нельзя назвать чисто «дизайнерским» плагином, зато он поможет вам управлять (в том числе и с помощью горячих клавиш) всеми имеющимися (установленными) расширениями. Надеюсь эти 10 расширений для Google Chrome повысят вашу производительности и эффективность в этом, безусловно, очень перспективном браузере! И если раньше одним из немногих останавливающих факторов от его использования был недостаток расширений Google Chrome, то сегодня этой преграды нет.

P.S. Если вы новичок в интернете и пока еще не знаете как создать свой блог можете попробовать бесплатный и полезный видеокурс по вордпресс.
Компания СпецСервис Логистика поможет с сертифицировать продукцию для которой держспоживстандарт требует наличие специальных сертификатов.
Хотите установить интересный статус посмотрите готовые статусы о любви в контакте которые можно использовать для своих персональных страниц соц.сети.

9 комментариев к статье “Расширения Google Chrome для веб-разработки и не только”
  1. maccen

    интересный сайт, спасибо за инфу

  2. Спасибо огромное! Теперь можно полностью переехать на Хром и для работы и для жизни, а Мозиллу использовать только для проверки кроссбраузерности!

  3. Sergey

    У меня небольшой вопросик, а не подскажете расширение для google Chrome которое бы позволяло делать примечания для сайта на который зашел и чтобы в следующий раз когда зайти на сайт можно было увидеть свое примечание к этому сайту.

  4. Tod

    Sergey, google chrome не так часто пользуюсь, поэтому не смогу подсказать.

  5. ну теперь все заиграет новыми красками бытия. спасибо

  6. Евгений

    Спасибо за инфу. Я сам — приверженец хрома и кому — как, конечно, но для меня это самый оптимальный браузер из немногих популярных. Хочу узнать, есть ли такие расширения для Chrome, как WINDOW RESIZER, CSS VIEWER, HTML VALIDATOR и FONT EDITOR на русском языке? Очень надо.

    За ответ заранее огромное спасибо!

  7. Tod

    Евгений, к сожалению, Хромом не пользуюсь, поэтому не знаю.

  8. Vanessa

    Спасибо большое за интересную статейку. Я очень люблю google chrome и с помощью некоторых из перечисленных расширений сделала его очень удобным и быстрым.

  9. Andris

    Огромное спасибо! Очень полезная подборка)

Оставить комментарий

Внимание! Если вы комментируете впервые, текст будет отправлен на модерацию.
Ваш e-mail не публикуется. Обязательные поля помечены *