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

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

Вот несколько полезных расширений для Google Chrome.

Расширение Web Developer

Хочу отметить самый удобный и мощный инструмент для веб-разработчика и веб-дизайнера - расширение Web Developer для Google Chrome.

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

Расширение имеет большое количество опций.

Например, многим надо просто узнать цвет элемента на экране монитора в шестнадцатиричном формате. Для этого в плагине есть специальная функция. В разделе Miscellaneous выбрать пункт Display Color Picker .

Выбрав пункт Display Color Picker , курсор становится в виде крестика. Теперь, кликая на любую область экрана в правом нижнем углу браузера отображается цвет в шестнадцатиричной системе для использования в CSS.

Существует несколько версий, созданных для различных категорий пользователей. Одна из них называется Google Chrome Developer Edition . Что это за версия такая и зачем она нужна? Об этом и пойдет речь в данном материале.

Стоит отметить, что альтернативные сборки Хрома появились уже давно. Они сопровождают сей популярный браузер почти со стартовой версии. Но далеко не всем пользователям подходят альтернативные варианты.

Дело в том, что «другие» сборки Хрома предназначаются для профессионалов в той или иной области: верстальщиков, тестировщиков, разработчиков и так далее. Обычным юзерам такие браузеры не подойдут. И тем не менее, нужно рассказать о них.

Какие вообще версии Chrome бывают?

На самом деле, их не так уж и много. Однако стабильная из них всего одна. Это как раз та, которая выкладывается в свободный доступ. Скачать ее может любой пользователь. Но есть и альтернативные версии. Давайте тезисно их рассмотрим.

Вот такие версии всеми любимого Гугл Хрома существуют. Однако в данном контексте нам интересна именно Developer Edition. Поэтому нужно рассмотреть все ключевые особенности данной версии подробнее. Только тогда можно сделать заключение.

Особенности Developer Edition

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

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

Еще одна «фишка» — наличие всех последних новшеств, которые перекочевали в данную версию из Canary. Благодаря этому разработчики могут оптимизировать свои расширения под новые возможности веб-обозревателя.

Частые обновления – еще одна отличительная черта Developer Edition. Они приходят иррегулярно, но не позднее, чем раз в две недели. В некоторых случаях обновления могут приходить уже через два дня. Это удобно для тех, кто тестирует новые возможности веб-обозревателя.

Заключение

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

Стоит отметить, что обычным пользователям вовсе не нужно устанавливать Developer Edition. Толку от этого не будет никакого. Тем более, что особой стабильностью эта сборка не отличается. Если вы не разработчик, то лучше использовать Stable.

Браузер Google Chrome – отличный выбор для дизайнеров и веб-девелоперов. С помощью расширений для GoogleChrome, вы можете добавить больше функций, которые могут помочь в дизайне, поиске ошибок и остальных работах с сайтом. Здесь мы представляем лучшие расширения для Chrome, предназначенные для дизайнеров и разработчиков.

3.

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

4.

Pendule расширяет функции встроенных в Google Chrome инструментов. Благодаря данному расширению пользователи располагают множеством дополнительных возможностей, таких как: оценка ограничительных тегов с использованием автоматических веб-сервисов W3C, скрытие изображений на странице, просмотр скриптов, встроенных в страницу, а также многих других.

5.

Plain Clothes делает хорошо только одну вещь – она удаляет все CSS на странице. Одним из излюбленных способов оценки доступности веб страницы является удаление стилей CSS и сопоставление читабельности страницы со стилями и без них. Такой подход симулирует ситуацию, при которой у пользователя на экране страница отображается лишь частично и они могут полагаться только на теги страницы для того, чтобы получить доступ к контенту.
Хотя эта программа была изначально создана для тестирования веб - страниц, вы можете использовать ее для просмотра любимых стилей в «нестилизованном» виде (так что ваш босс не поймает вас за просмотром в тот момент, когда вам надо заканчивать функцию на javascript).

6.

Если вы хотите вырезать определенные части веб - страницы, Image Cropper – ваш очевидный выбор. Эта программа проста как палка и не имеет финтифлюшек. Просто укажите область, которую хотите вырезать, и приложение ее заберет. Нужна точность вплоть до пикселя? Расширение отображает размеры и расположение вырезанных вами фрагментов, так что вы можете подобрать необходимый размер.

7.

Это расширение может гордиться своей минималистичностью и простотой – и это хорошо, потому что нет никаких причин усложнять создание текстов Lorem Ipsum. Lorem Ipsum generator позволяет вам заполнять текстом рамки при дизайне вашего сайта для презентаций.

8.

Выявление багов в рамках движка Internet Explorer Trident – совсем невеселое занятие. Используя IE Tab, вы как минимум можете сэкономить немного времени и не использовать Internet Explorer (не говоря уже о том, что у него маловато расширений) для поиска проблем с рендерингом.

9.

jQuery Shell позволяет вам прогонять команды javascript и jQuery в контексте открытой веб страницы. Очень полезное расширение для изучения и экспериментирования с jQuery.

10.

Это приложение – мастер одного трюка. Трюк состоит в том, что программа позволяет быстро получать значения Hex и RGB любого цвета на любой веб странице. Эта функция может вам пригодиться в том случае, если нужно определить, какие цвета использует ваш любимый вебсайт без использования фотошопа и его инструмента Eyedropper.

11.

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

12.

Вам никогда не хотелось узнать, какие технологии, структуры и приложения с открытым кодом использует конкретный вебсайт? Опытные разработчики могут ответить на эти вопросы, изучая исходный код, но если вам бы хотелось получить ответ быстрее и легче, то испытайте Chrome Sniffer. Chrome Sniffer перечисляет все известные структуры/библиотеки javascript (jQuery, MooTools, etc.) и CMS (Drupal, WordPress, etc.), которые используются вебсайтом.

13.
Eye Dropper – расширение для Google Chrome, которое позволяет определять цвет на любой веб-странице. Более того, программа выдает цветовое «колесико» и образцы цветов (которые можно найти в любой графической программе), так что вы может экспериментировать и манипулировать с цветами для выбора нужного.

15.

Правильно построенная веб-страница с хорошей разметкой в конечном итоге приводит к тому, что у странички будут впечатляющие результаты в поисковиках. Однако, если вы бы хотели оценить ваш вебсайт с точки зрения известных параметров оптимизации для поисковых серверов, то вам стоит попробовать SEO Site Tools – расширение, которое предлагает вам огромный спектр полезных инструментов и функций для оценки SEO. Оно может считать массу параметров на странице и вне ее, получить информацию из социальных СМИ и все такое прочее.

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

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

1 Web Developer

Web Developer Tools является одним из самых полезных расширений для любого разработчика. Он добавляет панель инструментов в Chrome. С её помощью можно удобно редактировать CSS, просматривать JavaScript и многое другое. Расширение доступно для браузеров Chrome, Firefox и Opera.

2 Accessibility Web Developer Tools

Миллионы людей пользуются Интернетом, в том числе люди с ограниченными возможностями. Поэтому обязательно ваши сайты должны быть доступны этой категории пользователей. Это расширение позволяет запустить проверку доступности на любой странице в сети. Добавьте его в список инструментов для веб-разработчика. Чтобы использовать его, щелкните на вкладке аудиты, выберите аудит доступности, далее пункт выполнить. Если страница нарушает какие-либо правила, они будут отображаться в виде списка с одним или несколькими нарушениями элементов на странице.

3 Responsive Web Design Tester

Используйте расширение Responsive Web Design Tester, чтобы проверить, как страница реагирует на различные устройства. Оно отражает размер и браузер мобильного устройства, поставляется с пресетами различных Android устройств. Он также работает в автономном режиме, который полезен при разработке сайтов на локальном хостинге без доступа к Интернету.

4 Wappalyzer

Если вы когда-либо использовали Built With, вы будете знакомы с концепцией Wappalyzer . Это расширение определяет системы управления контентом, платформы электронной коммерции, веб-серверы, базы JavaScript, аналитические инструменты и многое другое. Кроме того, приложение доступно для браузера Firefox.

5 PerfectPixel

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

6 Refined GitHub

Если вы разочарованы пользовательским интерфейсом GitHub, это расширение является обязательным для вас. Оно упрощает интерфейс GitHub по умолчанию и добавляет все виды дополнительных функций: маркировка вопросов; выделение запросов, как непрочитанных; добавление кнопки быстрого редактирования; добавление авторской ссылки и многое другое.

7 CDN Headers & Cookies

Это расширение позволяет просматривать все HTTP-заголовки и куки в одном месте. Это легкое и простое расширение. Вы можете добавлять, редактировать или удалять пользовательские заголовки запросов и куки, а также заголовки запросов на экспорт и куки в файл CSV.

8 User Agent Switcher

Используйте это расширение , чтобы изменить агента пользователя для подмены устройства и/или браузера. Вы можете быстро переключаться между различными пользователями или добавлять свои собственные с настройками, имитирующими Internet Explorer, iPhone, или имитирую работу Google бота. Это полезно для отладки и тестирования поведения сайта на различных устройствах.

9 JSON Viewer

Расширение для печати JSON и JSONP, которое вы можете настроить под свой вкус. Оно включает в себя такие функции, как разборные узлы; интерактивные URL-адреса; блокнот, в который вы можете внести JSON формат на неопределенное время с помощью одной кнопки или комбинации клавиш; 27 встроенных тем и много другое.

10 Check My Links

Если вы регулярно редактируете страницы с большим количеством ссылок, не забудьте включить это расширение в свой список помощников для веб-разработчика. Оно может быстро найти все ссылки на странице и проверить каждую из них. Хорошие ссылки выделяются зеленым цветом, а битые красным. Расширение также будет публиковать полные URL-адреса битых ссылок в журнале консоли.

11 Usersnap

Часто веб-разработчики ежедневно сотрудничают с несколькими людьми, работая над проектом. Это небольшое расширение позволит упорядочить процесс совместной работы, поскольку оно создает скриншоты текущего контента. Вы сможете общаться более эффективно по различным вопросам, обмениваться обратной связью между другими разработчиками, клиентами и другими людьми, участвующими в веб-разработке проекта.

12 IE Tab

IE Tab эмулирует Internet Explorer, используя свой движок рендеринга непосредственно в Chrome. Приложение позволяет использовать элементы управления ActiveX для проверки разрабатываемых сайтов с различными версиями IE, начиная от IE6 до IE9.

13 DevTools AutoSave

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

14 Chrome MySQL Admin

Если вы ежедневно работаете с базами данных, рассмотрите возможность включения этого расширения в свой рабочий процесс. Это простой MySQL клиент со всеми необходимыми инструментами для управления базами данных и таблиц MySQL. Вы сможете подключиться к базам данных и управлять ими, выполнять запросы, создавать и удалять таблицы и многое другое в быстром и легком интерфейсе приложения.

15 Grunt Devtools

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

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

Эта статья предназначена для администраторов Chrome Enterprise и разработчиков, имеющих опыт создания пакетов приложений Chrome и их публикации.

Если в Интернет-магазине Chrome не оказалось продукта с нужной вам функциональностью, вы можете создать собственное приложение или расширение, а пользователи смогут добавить его на свои устройства с Chrome OS или в браузер Chrome. Например, как администратор, вы можете автоматически установить на устройствах пользователей частное приложение-закладку, ссылающееся на веб-сайт отдела кадров.

Подготовка

• Если в файле манифеста указан целевой сайт, на который ссылается приложение или расширение, подтвердите право собственности на этот сайт .
• Если приложение или расширение размещено на частном сервере, можно указать, кто имеет право публиковать его в Интернет-магазине Chrome. Вы можете отключить подтверждение права собственности на сторонние сайты, на которые ссылается приложение.

Шаг 1. Создайте приложение или расширение

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

1. Создайте на компьютере папку, в которой будут храниться файлы приложения или расширения. Присвойте ей имя приложения.
2. Создайте файл манифеста.
   1. Создайте в текстовом редакторе файл JavaScript ® Object Notation (JSON). Посмотрите пример файла JSON для приложения-закладки.
   2. Проверьте, правильно ли отформатирован код в файле JSON, с помощью специального инструмента, например JSONLint .
3. Поместите файл manifest.json в папку приложения или расширения.
4. Создайте логотип.
   1. Изображение должно иметь размер 128 х 128 пикселей.
   2. Сохраните файл логотипа под названием 128.png в папке приложения.

Шаг 2. Протестируйте приложение или расширение

Разработчики могут тестировать свои приложения и расширения в браузере Chrome или на устройствах Chrome OS.

Чтобы устранить неполадки в приложении или расширении, воспользуйтесь журналами Chrome.

Шаг 3. Создайте коллекцию приложений (необязательно)

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

Шаг 4. Опубликуйте приложение или расширение в Интернет-магазине Chrome

Разработчик может сделать приложение или расширение общедоступным либо ограничить доступ к нему. При публикации в Интернет-магазине Chrome можно выбрать один из трех вариантов.

• Общедоступное : кто угодно может найти и установить приложение.
• Доступ по ссылке : установить приложение или расширение можно только по ссылке. Оно не включается в результаты поиска в Интернет-магазине Chrome. Ссылку можно отправить пользователям как в домене организации, так и за его пределами.
• Частное : найти и установить приложение или расширение могут только пользователи в вашем домене. Кроме этого, можно предоставить доступ к продукту только доверенным тестировщикам, чьи имена указаны в панели инструментов разработчика.

Чтобы добавить приложение или расширение в Интернет-магазин Chrome, создайте ZIP-архив соответствующей папки, а затем опубликуйте продукт .

Шаг 5. Настройте правила работы с приложением или расширением

В панели администратора Google можно управлять использованием приложений и расширений на устройствах Chrome и в браузере Chrome на компьютерах Windows, Mac и Linux в вашей организации. Правила Chrome можно настраивать