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

Этот видеоурок мы посвятим разбору следующих вопросов:

  • Как добавить расширения для браузера Google Chrome?
  • Какие 5 полезных расширений для разработчика следует установить?
  • Как пользоваться панелью разработчика в браузере Google Chrome?
  • Как работать с полезными расширениями для Google Chrome, которые я рекомендую установить?

Скачать материалы:
Как запустить видеоурок:

  1. Разархивировать скачанный файл.
  2. Открыть папку index.
  3. Запустить файл index.html в браузере.

Добро пожаловать в четвертый бонусный видеоурок по курсу CSS. С расширениями для браузеров Opera и Mozilla Firefox, вы уже знакомы. В этом видеоуроке мы поговорим про расширения для браузера Google Chrome. Они будут очень похожи на те, которые мы рассматривали в прошлом видеоуроке, поэтому я постараюсь не затягивать изложение материала.

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

Давайте перейдем в браузер Google Chrome. В нем у нас открыта наша страница. Первым делом установим расширения. В файле Ссылки.txt приведены все ссылки на расширения, которые мы будем устанавливать. Первое — Web Developer, второе — MeasureIt!, третье — Eye Dropper, четвертое — SeoQuake, пятое — RDS bar. Я уже перешел по всем ссылкам и добавил все расширения.

Панель разработчика

Начинаем, как обычно, с панели разработчика. Жмем F12, и у нас открывается окно. Здесь все то же самое, что и в панелях разработчика для других браузеров. Это аналог расширению Firebug. Справа, как мы уже знаем, располагаются стили. Здесь же вы можете посмотреть блочную модель какого-нибудь элемента, а чуть выше посмотреть вычислительные стили. Нажав галочку «Show inherited», вы увидите наследуемые стили. Ниже располагается навигация по элементам, кнопка поиска (дает возможность выбрать любой элемент на странице для его последующего анализа). Есть еще одна очень интересная вкладка — ресурсы. Здесь вы видите нашу папку img. Вы можете посмотреть любое изображение, которое в ней находится. Справа, как обычно, поиск. В нижнем правом углу — настройки, в нижнем левом углу — кнопка, которая дает нам возможность открыть панель расширения в отдельном окне. Я закрываю панель разработчика.

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

Мы приступаем к следующему расширению — Web Developer. С этим расширением тоже должно быть все понятно. Мы разбирали его для браузера Firefox. Здесь все аналогично.

Расширение Eye Dropper

Следующее расширение — Eye Dropper. Кнопка определяет цвет на веб-странице, но она заблокирована, потому что наш сайт не располагается в интернете. Давайте откроем мой сайт. А теперь используем это расширение. Жмем «Pick color from webpage», и у нас появляется возможность выбрать цвет на веб-странице. Мы выбрали цвет, он определился и отобразился. Чтобы его скопировать, просто копируем внизу HEX-код этого цвета. Чтобы очистить историю, жмем кнопку «Clear Colors History».  Вторая вкладка — Color Picker. С этим расширением мы уже знакомы. Здесь мы можем выбрать тот цвет, который нам понравится.  Внизу можем скопировать HEX-код.

Расширение MeasureIt!

Теперь предлагаю перейти к следующему расширению — MeasureIt! — линейка. Она, кстати, тоже работает только с теми сайтами, которые находятся в интернете. Работает так же, как и в браузере Firefox.

Расширение RDS bar

Пятое расширение — RDS bar. Оно опять нам знакомо. Чтобы посмотреть настройки, жмем правой клавишей мыши на настройки, у нас открывается новое окно с настройками на русском языке. Закрываем.

Расширение SeoQuake

Переходим к последнему расширению — SeoQuake. Работает оно так же, как и в браузере Mozilla Firefox. Чтобы посмотреть настройки этого расширения, мы нажимаем на вкладку SeoQuake и переходим в Preferences. Если вам нужно будет включить SEObar (у меня он был выключен), то вы изменяете Disabled на Enabled. Вы также можете указать, где он будет располагаться, с помощью третьего и четвертого поля. Жмем «Save». Если мы обновим мою страницу, то увидим, что сверху располагается SEObar. Теперь давайте что-нибудь поищем, например «популярные ошибки в дизайне». У нас выдается страница, на которой под каждым результатом располагается панель SeoQuake. Отключить SEObar  или панель для поисковиков вы можете нажав на SeoqQuake и убрав галочки с поисковых сервисов (например Google) и с Seobar. Обновляем страницу, теперь у нас не высвечиваются параметры SeoQuake для запросов Google, а при загрузке новой страницы у нас не отображается SEObar, потому что мы его убрали.

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

Подпишись на info-line:

Получать новые уроки на e-mail:

3 комментария на “Полезные расширения Google Chrome для разработчика”

  1. Юлия 17 марта 2012 в 15:35 #

    Установила полезные расширения себе в Гугл Хром, теперь подчеркнутые ссылки на сайтах браузер отображает как перечеркнутые. Как это отменить, вернуть нормальный вид?

    • Олег Зубцов 17 марта 2012 в 19:12 #

      Это делает плагин RDS bar или SeoQuake. Как определить? Можно проверить настройки, а можно просто один отключить из них и посмотреть решилась ли проблема. Таким образом, мы определим расширение, который меняет вид ссылок. А после этого решаем проблему с этим расширением.

      Если первый (RDS bar), то в настройках уберите галочки напротив данных действий (там на русском). Мы их убирали в уроке про 7 полезных дополнений для Mozilla Firefox.

      Если второй (SeoQuake), что скорее всего, то все тоже делается в настройках. Жмете на иконку расширения и выбираете пункт Preferences (это параметры расширения SeoQuake). И в первой же вкладке General ищите пункт «Highlighting no-follows links» (подсветка ссылок с атрибутом rel имеющим значение «nofollow», по этой теме еще будет видеоурок) и меняете значение Enabled (включено) на Disabled (выключено).

      Проблема решена 🙂

  2. Юлия 17 марта 2012 в 19:30 #

    Ура! снова привычный вид, спасибо большое)))

Оставить ответ