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

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

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

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

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

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

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

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

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

Необходимый для всех веб-разработчиков, Speed Tracer помогает выявлять и устранять проблемы, связанные с производительностью веб-сайта и приложений. Speed Tracer распознает проблемы, вызванные в процессе выполнения JavaScript, Layout, обратных запросов XML http, перерасчета стиля CSS и многое другое.

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

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

Очень важный инструмент для веб- и SEO-разработчиков, Alexa Traffic Rank включает вас в панель трафика Alexa и дает детальное представление о всех сайтах, которые вы посещаете, не прерывая просмотра.

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

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

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

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

Подготовка

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

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

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

Создайте на компьютере папку, в которой будут храниться файлы приложения или расширения. Присвойте ей имя приложения.
Создайте файл манифеста.
1. Создайте в текстовом редакторе файл JavaScript ® Object Notation (JSON). Посмотрите пример файла JSON для приложения-закладки.
2. Проверьте, правильно ли отформатирован код в файле JSON, с помощью специального инструмента, например JSONLint .
Поместите файл manifest.json в папку приложения или расширения.
Создайте логотип.
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 можно настраивать

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

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

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

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

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

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

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

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

Ни для кого не секрет, что сегодня веб-сайты используют каскадные таблицы стилей (CSS), содержащие параметры всех элементов страницы. В CSS указываются шрифты, размеры объектов, рамочек, картинок, блоки и таблицы. Мы решили собрать для вас подборку дополнений Google Chrome, которые позволят отредактировать стиль любой страницы в интернете. Бонусом мы покажем, как поменять фон странички.

У каждого человека есть свои предпочтения и интересы, особенно, когда дело касается веб-дизайна. Вспомните хотя бы вечные холивары после каждого обновления YouTube. Да и у вас наверняка есть несколько замечаний к отображению информации на любимом сайте: где-то шрифт некрасивый или мелкий, где-то вообще ненужный блок уведомлений висит. А вот здесь было бы неплохо добавить фоновую картинку!

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

Stylebot

Пожалуй, самое популярное расширение с открытым исходным кодом. Позволяет на лету редактировать шрифты, цвета, размеры и многое другое. Имеет простой режим редактирования: при открытом окне Stylebot вы можете выбрать нужный элемент, просто наведя на него указатель мыши. Изменения сохраняются моментально, пользовательскими стилями можно делиться с друзьями.

Web Override

Приложение для подключения Javascript’овых скриптов ко внешним веб-сайтам. Уже содержит в себе jQuery, async.js, moment.js и Lodash, так что функции этих библиотек можно свободно использовать. Подходит для продвинутых пользователей, умеющих пользоваться Javascript, однако новички могут использовать расширение для внедрения уже написанных кем-то скриптов.

Styler

Принцип тот же, что и у Stylebot: быстро редактируем стиль странички, изменения сохраняются моментально. Интерфейс и последовательность действий немного другие, чуть меньше возможностей. Так что выбор остается за вами: что больше по душе придется.

Stylish

Мощнейший инструмент для кастомизации веб-сайтов, по возможностям близок к Stylebot. Позволяет скрывать ненужные элементы, редактировать стили, делиться результатом с друзьями. Веб-сайт дополнения содержит более 10 000 пользовательских стилей для изменения внешнего вида Facebook, YouTube, App Store и многих других популярных ресурсов.

Live CSS Editor

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

Расскажем, как и обещали, как отредактировать фон любой странички на примере Stylebot.

Важно! Этот метод красиво смотрится на “легких” страницах, не перегруженных блоками и меню и представлен только для ознакомления с возможностями дополнений. Советуем пробовать его на сайте Google.com.

заходим на необходимую страничку
кликаем по иконке Stylebot в правом верхнем углу Chrome
нажимаем Open Stylebot
внизу выбираем опцию Edit Css
Вводим следующий код:

body {
background: url(https://dl.dropboxusercontent.com/u/28029149/NGC_2818_by_the_Hubble_Space_Telescope.jpg) ;
background-size: 100% 100%;
!important;
}

закрываем Stylebot

Готово! Вместо картинки, приведенной в качестве примера, можно использовать любую другую (нужно просто заменить ссылку в коде выше). Для более сложной кастомизации сайтов придется почитать мануалы по CSS, но поверьте: в этом нет ничего сложного.

Google Chrome поддерживает нескольких различных каналов обновлений, начиная от ежедневных сборок Canary и заканчивая стабильными релизами с 6-недельным циклом выхода.

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

Обзоры каналов Google Chrome

Stable : данный канал получает полностью протестированные тестовой командой Google версии браузера, которые не содержат серьезных сбоев и значительных проблем. Канал обновляется каждые 2 недели для промежуточных выпусков и каждые 6 недель для основных релизов. Скачать стабильную версию можно на странице - Google Chrome .
Beta : Если Вы хотите протестировать новые функции и улучшения с минимальными риском, канал Beta будет отличным выбором. Сборки обновляются каждую неделю, а основные версии появляются каждый 6 недель, более, чем за месяц до выхода стабильной версии.
Dev : Если Вы хотите ознакомиться с нововведениями как можно быстрее, вам подойдет канал Dev. Канал Dev получает обновление один или два раза в неделю и наглядно демонстрирует над какими улучшениями ведет работу команда Chrome. Задержка относительно основных версий отсутствует, и пользователь получает последний код. Несмотря на то, что данные сборки проходят тестирования, в них может содержаться большое количество ошибок.
Canary : В сборках Canary тестируются изменения, связанные с риском. Релизы выпускаются ежедневно и не проходят предварительное тестирование. Так как нет гарантий, что данные версии запустятся, они используют собственный профиль и настройки, а значит могут работать параллельно релизам другого канала Chrome. По умолчанию версии Canary сообщают о сбоях и статистке использования в Google, но Вы можете отключить данную опцию на странице загрузки.
Другие сборки : Если Вы - абсолютно бесстрашный тестировщик, Вы можете загрузить последнюю рабочую сборку из непрерывного потока разработки Chromium, посмотрев на номер под "LKGR", перейдя в загрузочный сегмент Google и скачав соответствующую сборку.

Примечание: Релизы раннего доступа (сборки Canary, Dev и Beta) будут лишь частично переведены на другие языки, отличные от английского. Текст, связанный с новыми функциями может не быть переведен на другие языки до того, как выйдет стабильная версия.

Что нужно знать, перед изменением канала?

Резервное копирование данных

Перед тем, как Вы перейдете на другие сборки, Вы должны создать резервное копирование данных профиля (закладки, самые посещаемые страницы, история, файлы куки и т.д.) Если Вы захотите снова перейти на более стабильный канал, обновленный данные могут быть несовместимыми со старыми версиями.

Сделайте копию папки User Data\Default directory (например, скопируйте в папку "Default Backup" в той же директории). Путь зависит от операционной системы:

Каналы Stable, beta, и dev: \Documents and Settings\username\Local Settings\Application Data\Google\Chrome\User Data\Default
Сборки Canary: \Documents and Settings\username\Local Settings\Application Data\Google\Chrome SxS\User Data\Default

Windows Vista или 7:

Каналы Stable, beta, и dev: \Users\username\AppData\Local\Google\Chrome\User Data\Default
Сборки Canary: \Users\username\AppData\Local\Google\Chrome SxS\User Data\Default

Каналы Stable, beta, и dev: ~/Library/Application Support/Google/Chrome/Default
Сборки Canary: ~/Library/Application Support/Google/Chrome Canary/Default

~/.config/google-chrome/Default

Примечание: если Вы используете Проводник Windows для поиски папки, может потребоваться включение опции “Показывать скрытые папки и файлы” в Панели управления> Свойства папки (Параметры Проводника) > Вид