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

Speed Tracer

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

Используя Speed Tracer вы получите наглядную картинку того, на что тратится время браузера, включая

• разбор и исполнение js-кода
• рендеринг верстки
• применение CSS
• работа с DOM-событиями
• загрузка сетевых ресурсов

и т.д.



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

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

Firebug Lite

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



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

Pendule

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



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

Eye Dropper

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



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

Aviary Screen Capture

Aviary Screen Capture — очень мощное расширение для захвата страниц и редактирования захваченных изображений. Список возможностей поражает:

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

Тут, пожалуй, не грех и целое кино показать.



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

PlainClothes

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



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

Chrome Sniffer

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



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

Lorem Ipsum Generator

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



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

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. Неплохо подходит для начального тестирования верстки и отображение сайтов, оптимизированных для просмотра в этом браузере (ха-ха-ха).



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

Resolution Test

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



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

MeasureIt!

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



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

Validity

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



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