Дизайн

15 полезных расширений для Хрома для веб-дизайнеров и разработчиков

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

Ведущие современные браузеры, такие как Google Chrome, Opera, Mozilla Firefox и Safari — это лишь некоторые из наиболее важных браузеров, на которых необходимо проводить тестирование проектов.

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

Firebug Lite

Firebug Lite — «упрощенная» версия одноименного багтрекера, который используется в браузере Firefox.
Screen Shot 2015-02-26 at 11.19.01

WhatFont

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

Похожее расширение есть и для Safari, называется FontFaceNinja.
Screen Shot 2015-02-26 at 11.19.10

MeasureIt

Каждый дизайнер хочет, чтобы его идеальный пиксель-перфектный макет выглядел идеально и после верстки. Поэтому незаменимый инструмент для разработчика — MeasureIt, который позволит пиксель в пиксель сверстать макет, измерив все отступы на сайте.
Screen Shot 2015-02-26 at 11.19.17

Web Developer

Расширение Web Developer добавляет браузеру функционал, позволяющий проводить тестирование для браузеров в различных условиях: отключено отображение баннеров, отключены куки и многое другое.
Screen Shot 2015-02-26 at 11.19.24

Resolution Test

Resolution Test позволяет проводить тестирование верстки сайта на различных разрешениях.
Screen Shot 2015-02-26 at 11.19.30

ColorPicker

ColorPicker — отличный инструмент, чтобы «скопировать» понравившийся цвет с сайта в формате RGB и сразу использовать его в макете.
Screen Shot 2015-02-26 at 11.19.36

BuiltWith Technology Profiler

BuiltWith Technology Profiler позволит проверить «актуальность» используемых на странице веб-сайта технологий.
Screen Shot 2015-02-26 at 11.19.42

CSS-Shack

CSS-Shack позволяет добавлять собственные параметры CSS непосредственно в код и сразу отображать изменения на странице в окне браузера.
Screen Shot 2015-02-26 at 11.19.48

Codev.it

Codev.it — лучшее расширение для редактирование кода непосредственно в браузере.
Screen Shot 2015-02-26 at 11.19.53

PageSpeed Insights

PageSpeed Insights, как понятно из названия, оценивает скорость загрузки страницы для пользователей из различных стран. Полезно, когда ваша аудитория сосредоточена не в одной стране, а сразу на нескольких континентах.
Screen Shot 2015-02-26 at 11.20.54

CSSViewer

Открыть консоль в браузере легко, но вот выделить нужный элемент, узнать его ID и посмотреть все его параметры в CSS — обычно проблематично. CSSViewer с легкостью решит эту проблему, отобразив только необходимую информацию того элемента, на который наведена мышка.
Screen Shot 2015-02-26 at 11.21.03

PageRAnk Status

PageRAnk Status позволит получить всю доступную информацию, касательно SEO сайта: ключевые показатели, позиции в поисковиках, оценку поискавиками и количество входящих ссылок.
Screen Shot 2015-02-26 at 11.21.17

Subtle Patterns Preview

Subtle Patterns Preview позволит добавить на сайт в качестве фонового изображения любой паттерн из предложенной галереи. Паттерн добавляется лишь в режиме «предпросмотра», т.е. только для понимания внешнего вида сайта с изменениями.

Pixlr Editor

Pixlr Editor — это мини-фотошоп для браузера: позволяет производить с картинками минимальные действия, такие как поворот, вырезание, цветокоррекция.
Screen Shot 2015-02-26 at 11.21.23

Источник: twelveskip

  • https://plus.google.com/+ЮрийЗеленковский Юрий Зеленковский

    Не вижу смысла в расширениях Firebug Lite, Resolution Test, CSS-Shack и CSSViewer.
    В стандартном хромовском веб-инспекторе (он же Firebug) можно напрямую редактировать, добавлять и просматривать измененные стили без перезагрузки, а также подменять User-Agent и разрешение экрана для определенных устройств. А нажав на иконку “Лупа” можно выбрать на странице нужный для просмотра элемент.