13 расширений для Google Chrome в помощь вебдизайнеру и разработчику

Стандартом де факто для веб-разработки давно уже стал браузер Mozilla Firefox, имеющий огромное количество расширений упрощающих процесс создания сайтов. Но стремительно развивающийся Google Chrome всеми силами старается изменить это положение. В данной статье я расскажу какие расширения для этого браузера могут помочь веб-разработчику в его нелегком труде.

Speed Tracer


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

Используя Speed Tracer вы получите наглядную картинку того, на что тратится время браузера, включая
  • разбор и исполнение js-кода
  • рендеринг верстки
  • применение CSS
  • работа с DOM-событиями
  • загрузка сетевых ресурсов
и т.д.

Speed Tracer

Для корректной работы расширения не забудьте добавить флаг --enable-extension-timeline-api при запуске Google Chrome.

Страница расширения Speed Tracer
Страница проекта на Google Code

Firebug Lite


Ну, что тут рассказать. Ага, это тот самый FireBug, но в несколько облегченной версии. Как утверждают сами разработчики, FireBug Lite не является заменой Google Chrome Developer Tools и рекомендован к использованию совместно с ними. Что в общем-то и логично, так как технически приложение является букмарклетом. А набор фичей вам, думаю, и без меня известен: подсветка, отладка, редактирование HTML, CSS, DOM и прочая, прочая.

FireBug Lite

Страница расширения
Страница проекта

Pendule


Pendule — инструмент для работы с CSS-файлами страниц. Он позволяет просматривать CSS в отдельной вкладке, перезагружать его на лету (без перезагрузки страницы), имеет несколько валидаторов (CSS, HTML), умеет проверять битые ссылки и, как говорится, many many more.

Pendule

Страница расширения Pendule

Eye Dropper


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

Eye Dropper

Страница расширения Eye Dropper

Aviary Screen Capture


Aviary Screen Capture — очень мощное расширение для захвата страниц и редактирования захваченных изображений. Список возможностей поражает:
  1. захват веб-страницы полностью или частично;
  2. сохранение захваченного изображения локально или на веб-сервисе Aviary;
  3. редактирование изображения;
  4. выделение областей, добавление пометок и графических примитивов на захваченные изображения;
  5. обрезка и повороты изображения;
  6. быстрый запуск других инструментов Aviary из пакета Design Tools.
Тут, пожалуй, не грех и целое кино показать.



Страница расширения
Страница проекта Aviary

PlainClothes


Это расширение чудесным образом изменяет стили страницы заменяя их на ваши. Любите единообразие и хотите, чтобы ссылки на всех страницах всегда были синими и подчеркнутыми, фон — белым, а гарнитура — черным Arial? Смело ставьте.

PlainClothes

Страница расширения
Страница проекта на Google Code

Chrome Sniffer


Chrome Sniffer — маленький индикатор, который показывает используемые на посещенном сайте CMS и фреймворки. Быстро и удобно. На момент написания статьи «знает в лицо» 45 CMS и js-библиотек и довольно оперативно развивается.

Chrome Sniffer

Страница расширения Chrome Sniffer

Lorem Ipsum Generator


Генератор рыбных текстов для заполнения сайта на этапе разработки. Минимальные настройки: количество слов в параграфе и количество параграфов — а большего и не требуется.

Lorem Ipsum Generator

Страница расширения
Страница проекта на Google Code

Chrome SEO


Chrome SEO — мощный инструмент оптимизатора сайтов. Комплексно предоставляет информацию о вашем сайте.

Chrome SEO

Страницы в индексе поисковиков
  • Baidu
  • Bing
  • Google
  • Yandex
  • Yahoo
  • Ask ←[Coming Soon]

Бэклинки
  • Alexa
  • Google
  • MajesticSeo
  • Open Site Explorer
  • Yahoo

Текущий трафик и рейтинги
  • Alexa Rank
  • Compete
  • Google PageRank
  • Quantcast
  • SEMRush
  • Technorati
  • Yandex Quotation Index ←[Coming Soon]

Букмарки
  • Delicious
  • Digg
  • Dmoz
  • StumbleUpon

Кэшированые версии
  • Archive.org Wayback Machine
  • CoralCDN
  • Google
  • WebCite

Доменная информация
  • DNS
  • IP Address
  • Server Location
  • Whois details

Страница расширения

IE Tab


Расширение, которое позволяет отобразить сайт в Google Chrome, воспользовавшись движком Internet Exlorer. Неплохо подходит для начального тестирования верстки и отображение сайтов, оптимизированных для просмотра в этом браузере (ха-ха-ха).

IE Tab

Страница расширения
Сайт разработчика

Resolution Test


Незаменимая проверялка вида сайта в различных разрешениях. Все просто: выбрал, посмотрел, пошел переверстывать.

Resolution Test

Страница расширения
Сайт разработчика

MeasureIt!


Пискомерка Линейка для вашей страницы. Легко и просто измеряет размер любого элемента.

MeasureIt!

Страница расширения MeasureIt!

Validity


Простенькая считалка ошибок валидации страницы в один клик.

Validity

Страница расширения

5 комментариев

avatar
Оличная подборка, спасибо:)
ЗЫ — в описании писькомерки Линейки ошибка, название расширения не совсем то:)
avatar
Пожалуйста.
Поправил.
avatar
Pendule, Sniffer, Resolution Test, MeasureIt! нужны и полезны.
Firebug тупо дублирует функциональность вебкитовского инспектора.
avatar
Aviary еще очень мощная штука.
А Firebug просто интерфейс более знакомый предоставляет для поклонников Mozilla.
avatar
Для скриншотов на маке есть LittleSnapper. С хромым пока вроде бы не очень, но я больше Сафари пользуюсь.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.