Полезные расширения Google Chrome для веб-разработчика

Полезные расширения Google Chrome для веб-разработчика

Всем привет!

Мы уже писали про различные расширения для веб-разработчиков для браузеров: Жека написал статью про средства для разработчиков в разных браузерах, а я писал про дополнения для FireBug в Mozilla Firefox.

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

Всего в заметке представлено 17 расширений.

Узнайте все о продвижении сайта самостоятельно
на сайте Маулнет.ру.

Web Developer

Google Chrome Web Developer

Хром версия расширения Web Developer для Firefox. Мощнейший набор инструментов и сервисов для разработки.

IE Tab

Google Chrome IE Tab

Позволяет запустить ИЕ в табе в Хроме. Полезно, если лень открывать ИЕ отдельно. Но работает только на Виндах.

MultiSwitch

Google Chrome MultiSwitch

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

Chrome Flags

Google Chrome Flags

Показывает флаг страны, где физически расположен сервер просматриваемого вами сайта. При клике можно посмотреть подробную информацию, такую как WhoIs.

BuiltWith

Google Chrome BuildWith

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

Color Picker

Google Chrome Color Picker

Позволяет получить цвета любого элемента на странице. В Хроме на Маке работает достаточно тормознуто.

Aviary Screen Capture

Google Chrome Aviary Screen Capture

Расширение от одноименного сервиса, которое позволяет сделать скриншот страницы и отредактировать его на сайте сервиса.

Resolution Test

Google Chrome Resolution Test

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

MeasureIt!

Google Chrome MeasureIt!

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

Speed Tracer

Google Chrome Speed Tracer

Позволяет измерить скорость выполнения... почти всего: JS, CSS рендеринг, обработку событий в DOM, запросы и другое. Полезная штучка.

Validity

Google Chrome Validity

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

META SEO Inspector

Google Chrome Meta SEO Inspector

Проверяет не только meta теги страницы, но и другие показатели, такие как XFN теги, микроформаты и другое.

Chrome SEO

Google Chrome SEO

Показывает многие данные, полезные при анализе страницы для продвижения: ключевые слова, ссылки (подсвечивает nofollow), количество проиндексированных страниц и бэклинков, трафик, количество упоминаний в соцсетях и сервисах.

XML Tree

Google Chrome XML Tree

Как ясно из названия, отображает XML в виде дерева. При этом различные закодированные символы так же показываются верно.

CSSViewer

Google Chrome CSSViewer

Показывает CSS свойства любого элемента на странице.

JSONView

Google Chrome JSONView

Отображает JSON в «человеческом виде».

CSS Reloader

Google Chrome CSS Reloader

Позволяет перезагружать CSS без перезагрузки всей страницы нажатием F9. Подробнее о подобных плагинах для других браузеров можно прочитать в статье Жени «Сброс CSS-стилей».

 

А что используете вы?

Ребят, какие плагины используете вы? Делимся в комментариях ;-)

Расскажите друзьям

Оцените статью:
  • 1
  • 2
  • 3
  • 4
  • 5

Комментарии — 25

Dan
есть еще
Pendule
https://chrome.google.com/webstore/detail/gbkffbkamcejhkcaocmkdeiiccpmjfdi
что то вроде web developer toolbar

Firebug Lite for Google Chrome
https://chrome.google.com/webstore/detail/bmagokdooijbeehmkpknfglimnifench

#
Dan  
art
поставил парочку. некоторые уже были (:
#
art  
vovanx
Awesome Screenshot: Capture & Annotate - Скриншот страницы
https://chrome.google.com/extensions/detail/alelhddbbhepgpmgidjdcjakblofbmce
#
vovanx  
Ден
мне очень нравиться Мозила! очень доволен!
Alex Beep
Без Firebug'a нормального - незачем жить. Разве что программистам
floatdrop
Для верстки полезно https://chrome.google.com/extensions/detail/bjpngjgkahhflejneemihpbnfdoafoeh
Линейки, гайды, сетка и прочее.
Иван Золотов
Ищу плагин для прогона текстов через типограф аналогичный тому, что есть для FF.
#
Иван Золотов
bNN
Подскажите, как сделана загрузка картинок у вас? Они грузятся только когда это необходимо :)
#
bNN
Grin
Dan, floatdrop, vovanx, спасибо за дополнения, добавим в обзор.
Grin
bNN, уже не раз спрашивали, это LazyLoad.
bNN
Grin, спасибо!
#
bNN
art
че то отписывалка от каментов не работает тут. по ссылке какой то хэш, а сообщения на почту сыпятся и сыпятся
#
art  
Grin
art, да, у нас с этим определенные проблемы, сейчас отпишу вас вручную.
Vect0r
ИМХО, Вас обокрали http://ruseller.com/lessons.php?rub=28&id=890
влад
Неделю поковырял Хром и сделал вывод,что пока он уступает Мозилле,явно уступает,удалил и оставил обратно Лису!!!
#
влад
Сергей
Ещё одно отличное расширение для разработчиков под Chrome:

JavaScript Errors Notifier - Notify about JavaScript errors by icon in address bar
https://chrome.google.com/extensions/detail/jafmfknfnkoekkdocjiaipcnmkklaajd
#
Сергей
Dan
недавно появился Page Speed от гугла - анализирует скорость загрузки страницы и дает конкретные советы по данной странице.
http://code.google.com/speed/page-speed/docs/extension.html
так же как и у фокса показывается вкладкой в панели web developer tools
#
Dan  
Юрий
Я еще юзаю для SEO замечательный плагин - SEOQuake. Очень мощная вещь, если конечно правильно настроить.
Александр
Установил несколько плагинов. Спасибо!
MANN
Отличная штуковина
https://chrome.google.com/webstore/detail/oiaejidbmkiecgbjeifoejpgmdaleoha
#
MANN
One
Harvester-ищет изображения.Можно выбрать и сохранить в rar-архив.Так же можно сохранить похожие или добавлять картинки в галерею расширения и много другого.
#
One
One
Harvester- https://chrome.google.com/webstore/detail/emifleoeiocbgagblpkochakjfodbnje
#
One
Василь
також корисним є використання pixel perfect (можна перевірити чи співпадає макет зверстаному результату)
#
Василь

Новый комментарий

как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть
как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть

metin2 pvp metin2 pvp serverler pvp serverler