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

Скачать материалы:

Скачать 4-ый бонусный видеоурок по CSS Размер: 10.29 MB, скачали: 423 раз.
Скачать исходники к 4 бонусному видеоуроку по CSS Размер: 529.24 kB, скачали: 392 раз.
Скачать браузер Google Chrome

Как запустить видеоурок:

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

Полезные расширения 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, потому что мы его убрали.

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