FL.ru – фриланс сайт удаленной работы №1. Поиск удаленной работы, фрилансеры.

Плагин Firebug для Firefox и консоль для работы с кодом Google Chrome

Привет, читатели http://max1net.com/. Сегодня я опять коснусь технической стороны деятельности, потому что практически каждый день, рассекая по просторам интернета, возникает тысяча и одна задача вебмастерского плана. А чем больше разных навыков у тебя, тем успешнее ты будешь работать.

консоль Google Chrome

Речь пойдет о консоли Google Chrome, а также о полезном плагине Firebug. При помощи плагина Firebug можно изучать стили CSS прямо на сайте, или вносить правки на сайте прямо из консоли плагина в браузере.

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

Консоль Google Chrome

При помощи упомянутых выше инструментов можно прямо на сайте выделить какой-то элемент и если нам не понравится, как он расположен или как он выглядит, подкорректировать его сразу на странице. Результат будем видеть только мы, сразу же после внесения изменений (например, мы изменили размер шрифта), а потом эти изменения мы можем внести в файл стилей css нашего сайта. На картинке мы видим, как работает анализатор от Google Chrome – при выделении куска текста и перехода в контекстном меню в анализаторе будут видны и css, и html коды именно выделенного фрагмента со всеми подробностями.

панель коды Google Chrome

И Firebug, и расширение Google Chrome удобны тем, что они дают весьма подробный анализ всей страницы или выделенного элемента. То есть, мы можем сразу увидеть свои ошибки в работе с сайтом, которые были допущены или при его создании, или позже. Ошибки в коде html и css, в блочном построении сайта, и еще многое другое, ну просто даже тупо посмотреть код любого фрагмента на сайте конкурента.

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

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

Функционал консоли Google Chrome

Для начала разберемся с первым инструментом – консолью, которая реализована по-умолчанию в Google Chrome. Чтобы запустить анализатор CSS кода, нажимаем правой кнопкой мыши на интересующий нас элемент (или просто на любое место на странице, а потом выбираем интересующий элемент) и выбираем в выпавшем меню пункт «Просмотр кода элемента». Внизу экрана появится панель инструментов, которая содержит исходный html код выделенного элемента. То есть, в любом случае полностью загружается исходный код всей страницы, а внутри этого кода мы увидим исходный код выделенного элемента. Также этот элемент будет подсвечиваться синим цветом на странице, вот так:

консоль Google Chrome

Как видите, работать с расширением просто – выделенное изображение тут же раскладывается по полочкам – и HTML, и CSS коды видны и понятны. В правом окошке в меню «Computed Style» можно поэкспериментировать с внешним видом изображения – уменьшить его, сместить, добавить рамку – да все, что угодно. Стили просто прописываются в этом окошке, и тут же меняется внешний вид нашего изображения. В левом окошке мы увидим подсказки о том, где искать наш элемент в файле стилей, в каком из div-ов. Тут все понятно – какой из элементов div кому подчиняется, и где его искать. Добившись желаемого результата, мы просто вносим эти поправки в файл стилей, и все. Пока мы работаем с каким-либо участком кода в расширении Google Chrome, этого никто из пользователей сайта не видит, кроме нас. Но после того как мы отредактируем файл стилей, изменения будут видеть все.

Анализ кода CSS в браузере Google Chrome

Передвигая курсор по странице и наводя его на разные элементы, мы увидим, что они по очереди подсвечиваются синим цветом с указанием их длины, ширины и названия блока в файле стилей style.css нашей темы. Выбрав нужный элемент, действуем по описанной схеме – панель «Computed Style» покажет все свойства элемента (выравнивание снаружи и внутри, размер выравнивания каждой стороны, путь к изображению, цвет объекта, цвет фона, размер шрифта и название шрифта, высоту и ширину блока). Для примера я пропишу в «Computed Style» новые свойства для этого изображения, но заведомо неправильные. Анализатор сразу укажет, что этот стиль нерабочий, и применять его нельзя или просто не имеет смысла – он не будет отображаться:

консоль Google Chrome

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

консоль Google Chrome

Попробуем изменить размер изображения прямо в панели инструментов от Google Chrome. Здесь видно, что изображения стоят в ряд, а значит, объединены в один элемент div. То есть, по идее, нужно все изображения привести к одинаковому размеру. Но сначала нужно представить себе, как они должны выглядеть в новом оформлении. Здесь видно, что размер картинки – 178х200px, и обрамлена она серой рамкой. Размер можно изменить в строке, которая выделена синим цветом, а цвет рамки – в инструменте «Computed Style». После таких двухминутных изменений наши кошечки выглядят вот так:

консоль Google Chrome

Это видно только нам, и в файл стилей эти изменения еще не внесены. Чтобы это сделать, нам нужно узнать, где искать элементы, управляющие изображением. Из анализатора видно, что изображение находится в div класса box featured_post. Теперь идем в файл style.css нашей темы, ищем там элемент box featured_post и правим его с теми значениями, которые мы подобрали в анализаторе. Вот так:

консоль Google Chrome

Все просто и быстро, если знать основы HTML и CSS. Таким образом, проверкой любого элемента можно узнать о нем все — стили, исходную информацию, имя элемента, исходный код, место в блочной верстке, и т.д. А схема, приведенная ниже, даст представление о блочном расположении элемента, и о том, что такое padding, margin и border:

консоль Google Chrome

Другие функции Google Chrome — анализ загружаемых элементов

Кроме исходного кода и кода CSS, в Хроме можно просматривать загруженные с сайта изображения, файлы стилей, скрипты, и так далее. Также можно просматривать использование файлов cookie, БД и кэша страниц. Но эти изменения мы можем использовать только в своем браузере. То есть, если мы отключим визуализацию изображений на сайте (при медленном соединении есть смысл отключить), то они не будут отображаться только у нас. Просто мы ускорим загрузку какого-то сайта у себя в браузере, и все. Если отключить выполнение скриптов, то и в списке загруженных файлов они не будут отображаться.

консоль Google Chrome

Думаю, что все-таки больше пригодится вкладка «Network» в расширении, которая отображает загружаемые файлы и все данные к этим файлам (тип, метод передачи (GET или POST), статус файла, инициатор загрузки, размер файла и время по временной шкале). Все элементы страницы в том порядке, в котором они выстроены в шаблоне, то есть, если первым элементом был скрипт, то и в таблице первым мы увидим скрипт, а потом все остальные элементы сайта – изображения, контент, файлы, и т.д.

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

консоль Google Chrome

Как анализировать время загрузки сайта

Оригинальная и интересная функция – «Timeline», которая работает в реальном времени. Здесь можно подробно рассмотреть, сколько загружается каждый элемент страницы, узнать начало и конец загрузки, и много чего еще. У нас в руках – превосходное дополнение для инструмента «Network». Здесь увидим все загрузочные процессы, как используется память, и полное время загрузок.

консоль Google Chrome

И последнее, что мы рассмотрим для расширения Google Chrome –  это вкладка «Audit», с помощь которой можно посмотреть ошибки на сайте и их причины, рекомендации о том, как ускорить время загрузки страниц, и эти рекомендации будут касаться не нашего браузера, а именно нашего сервера. То есть, польза для всех наших посетителей очевидна. Внизу списка увидим кнопку проверки «Run Audit», нажмем на нее (только нужно будет перегрузить страницу) и наш анализатор Google Chrome выдаст рекомендации, как ускорить сайт, с причиной и следствием. Все пункты «Network Utilization» открываются и содержат подробное описание проблем.

консоль Google Chrome

Для Google Chrome это, пожалуй, все, если коротко. Теперь перейдем к Мозилле и его плагину – Firebug.

Плагин Firebug для анализа кода страниц

Пришел черед плагина Firebug, который можно установить в браузер Firefox для анализа контента. Плагин установить очень просто – заходим в «Дополнения», и там во вкладке «Найти дополнения» пишем название плагина. Браузер перенаправит нас на страницу со всеми дополнениями Firebug, а там остается только установить плагин, вот так:

Firebug

Теперь можно делать то же самое, что и в браузере Google Chrome, только будет это немного проще – и интерфейс понятнее, и вообще, все здесь на русском языке. Запустить расширение можно правой кнопкой мыши — щелкаем по интересующему нас объекту и нажимаем «Инспектировать элемент с помощью Firebug». Внизу экрана появится окно плагина Firebug, которое тоже будет разделено на две части – окно с исходным кодом страницы в HTML коде, и окно с CSS кодом элемента.

Firebug

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

Firebug

Во вкладке панели инструментов Firebug «Скомпилированный стиль» найдем всю информацию о выделенном фрагменте, включая и унаследованные стили. Вкладка «Макет» показывает блочное построение фрагмента со всеми выравниваниями. Если навести курсор на блок, то на странице увидим направляющие линии, которые будут соответствовать выделенному фрагменту документа. На вкладке CSS панели инструментов плагина можно увидеть код основного документа и его отдельных элементов и плагинов.




Firebug

Таким образом, практически использовать Firebug можно точно так же, как и анализатор от Google Chrome — проводить анализ кода и изучать его, править и вносить любые изменения прямо на странице с последующими изменениями в файле CSS шаблона. Но работать с плагином Firebug проще и быстрее, и особенно это касается предоставления информации об элементе. Это и понятно — Firebug создавался как отдельный функционал, поэтому и интерфейс, и расположение блоков с информацией более понятно, как и отображение кодов HTML и CSS. Особенно симпатичен функционал, с помощью которого без проблем найти нужный элемент или блок на странице для анализа и редактирования – кнопка «Анализировать элемент» cody_gooogle_chrome_16 в панели браузера.

Плагин Firebug для Firefox

Еще от Firebug — загрузка flash видео с Youtube и других видеосервисов

Еще одна любопытная вкладка в Firebug, которая похожа на функцию в Google Chrome «Network» — это вкладка «Сеть». Здесь все функциональнее, чем в Хроме, намного больше информации. Вся информация о сайте выводится тоже в порядке загрузки страницы, от первого запроса до последнего, но здесь мы сразу видим и временной промежуток, и домен элемента, и размер и статус ответа. Можно включить фильтрацию этой информации, то есть, мы можем сделать так, чтобы отображались только HTML запросы, CSS файлы и коды, JS скрипты, картинки и Flash элементы сайта.

Плагин Firebug для Firefox

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

Плагин Firebug для Firefox

На этом, пожалуй, буду заканчивать. Как вы, наверное, поняли, работать с этими инструментами можно не только для анализа сайтов. Можно постараться и найти еще миллион решений, как применять эти инструменты. Вы сами видели, что их очень много, и каждый имеет развернутый функционал, поэтому невозможно в одной статье рассказать подробно обо всем. Если есть интерес, изучайте сами, и уверяю вас, вы обязательно найдете для себя что-то интересное. Я, например, люблю иногда побаловаться с вкладкой «Audit» в Google Chrome , а в Firefox — возможностью просто и быстро работать с файлами стилей, так как не всегда внешний вид какой-то темы полностью может устраивать. А пользоваться услугами дизайнера, если сам можешь это сделать – по меньшей мере, неразумно. Вот такие дела, друзья. У меня на сегодня все. До связи на волнах http://max1net.com/




Подпишитесь на рассылку блога
max1net.com:
Уже подписались человек
Укажите свой e-mail