Добрый вечер, уважаемые читатели wmbn.ru! Сегодня хотелось бы поговорить о двух замечательных инструментах, которые помогут как в изучении Css, так и в работе с дизайном и блочной верстке сайта — это плагин Firebug для Firefox и дополнение от Google Chrome для анализа страницы. Хороши оба инструмента тем, что они в очень подробном анализе могут указать на многие изъяны при работе с сайтом, т.е. его создании, ошибок в коде и других событий. Помимо показа Css в кодовом варианте, можно наглядно рассмотреть блок на схеме, так же выбрать сам элемент, не ведя поиск среди исходника, который имеет не малые размеры.

Firebug и google chrome для анализа страницы сайта

Кроме простого анализа Css кода и его дополнений, оба инструмента имеют другие дополнения, которые тоже помогу в анализе сайта, показывая различные данные по загрузке изображений, скриптов, составляющих файлов сайта (html страницы и файлы стилей style.css), совмещая данные со временной шкалой, информацией о файле, методах передачи и прочей информацией. Польза от таких инструментов так же заключается в аудите сайта на скорость загрузки, в частности Google Chrome предлагает такой анализ, указывая при этом рекомендации для улучшения показателей. В основном это изображения и лишние селекторы (операторы) в файле style.css. Более опытные Веб мастера могут обнаружить в данном коде так же различные нежелательные скрипты и файлы, которые были загружены злоумышленниками или самим же администратором в исходный код сайта или в один из его составляющих.

Обзор функций анализа страницы в Google Chrome

Давайте рассмотрим первый инструмент от Google Chrome, который поможет в анализе кода Css и его изучению. Для запуска анализа на любое место на сайте нажмите правой кнопкой мыши и выберите Проверить элемент. После этого появится окно (панель) визу экрана, содержащая в себе исходный код в html выделенного объекта. Получается, загружается полностью исходный код страницы, а внутри него уже указывается исходник объекта, точнее его блок, при этом подсвечивая его на самой странице.

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

Анализ кода Css с помощью Google Chrome

А теперь практическое применение расширения от Google Chrome — для примера потребуется отредактировать некоторый объект, не зная его название и в общем всю верстку страницы. Проверив элемент, о нем можно получить информацию о стилях, в частности выравнивания (в особенности от основного документа, когда потребуется переместить целый блок с элементами внутри). Зная его исходные данные, название и код, который уже точно расположен в файле style.css его можно без труда найти и изменить на конечный. А схема, которая наглядно предоставляет некоторые данные о блоке по крайней мере даст пояснения о том, что такое margin, padding и border, хотя понять это смогут не все, в особенности кто вообще ни разу не работал с Css и html.

Функции для анализа кода страницы Css от Firebug

Разберем дополнение Firebug для Firefox, которое так же поможет в редактировании и анализе Css, а так же верстки дизайна. Работа в нем гораздо проще, чем в Chrome, благодаря переводу на русский язык и более понятному интерфейсу, который в удобном варианте представляет код на страницы, так и Css отдельного элемента. Запускается Firebug так же — правой кнопкой мыши щелкните на интересующий объект и нажмите Inspect Element with Firebug. Появится окно Firebug, разделенная на две части — исходный код страницы в html и Css код объекта.

Анализ кода Css с помощью firebug

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

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

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

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

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

Но больше полезна страница Network, в которой указаны загружаемые элементы и информация к ним (тип объекта, метод передачи, статус в виде кода, инициатор загрузки, размер и время загрузки со шкалой, в которой в виде диаграммы указаны данные о времени загрузки). Компоненты страницы загружаются динамически и в том порядке, в котором они построены, т.е. если первый элемент был скрипт, а только потом изображение, то и первым в таблице будет этот скрипт, а только потом все остальные составляющие сайта. Сопровождается загрузка временной шкалой, отдельной для каждого элемента, отключив некоторые элементы, сокращается время для обработки остальных данных — это можно заметить, если отключить JavaScript, которые отображаются на вкладке Scripts.

Анализ времени загрузки сайта

Не знаю полезная или нет, но очень интересная функция записи процессов загрузки (Timeline) в реальном времени. Получается отличное дополнение для предыдущего инструмента. Если не найти ей практического применения, то в качестве игрушки она вполне подойдет. Так же указываются процессы загрузки, использование памяти и время.

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

Другие расширения от Firebug — как загрузить flash видео с youtube и других видео сервисов интернета

Из Firebug интересным показалась только одна функция, которая аналогична той же, что и в Google Chrome — это Сеть, если быть точнее, то это лишь вкладка. Она намного функциональнее, чем тот же инструмент от Google и несет больше информации. Данные так же загружаются по порядку, от первого запроса до конечного, при этом указывая временной промежуток, домен загружаемого элемента, его размер и статус ответа. Данные можно отфильтровать, выбрав соостветсвтенно показ только html запросов, Css файлы и код, JS скрипты, картинки и flash объекты (XHR — по теории это API браузера, являющаяся технологией Ajax).

Каждый элемент имеет свое описание, которое скрыто в список, нажав на кнопку разворачивания, то можно посмотреть информацию об объекте — данные заголовка (кодировка текста, сервер, исходный браузер — версия, технология, coockie (куки) и хост, а также использование кеша). Все это касается каждого элемента.

Загрузка элементов сайта с помощью firebug

А теперь хотелось бы поговорить о том, как загрузить видео с youtube (ютуба) с помощью firebug. Пожалуй наиболее полезная функция для многих интернет пользователей, в особенности для тех, у кого мало времени на онлайн просмотры. Загрузить видео с youtube, да и любой другое flash видео можно с той же страницы сеть, только выбрав показ только flash элементов. Список зависит от плеера, который используется на сайте, но в основном больше 5-7 файлов я не встречал. Далее ждем, пока загрузится видео минимум на минуту и ищем в списке самый весомый файл — он как раз является искомым роликом.

Нажав на него правой кнопкой мыши, выберите Копировать адрес, который надо вставить в адресную строку (она же строка поиска) в браузер Google Chrome (на Firefox видео отказывалось загружаться). Сначала появится страница от Google с ошибкой 404 — искомая страница не найдена, но через несколько секунд начнется процесс загрузки файла videoplayback (или другого, в зависимости от сайта), который, к сожалению или наоборот, загружается в наивысшем качестве, хотя возможно это зависит от выставленных настроек плеера на сайте.

После загрузки ролика его можно открыть в любой программе, которая поддерживает воспроизведение формата flv. С помощью такого же метода, можно загрузить видео с ВКонтакте (VK) и любых других сайтов, где поддерживается flash технология. Это же касается и изображений, загрузки музыки, в особенности с того же ВКонтакте, Facebook и других социальных сетей.

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

Комментариев: 4

  1. West Blogger

    Я бы сказал просто необходимый плагин, который при правке шаблона (на том же вп) позволяет быстро найти в коде нужный элемент для правки. Маст Юз в общем :)

    1. writer

      При правке шаблона как в WP так и в Drupal пользуюсь тоже FireBug — весь css на виду и по полкам разложен

  2. Вадим

    Панель для просмотра кода Google Chrome

    Подскажите, неисправленный код, точнее css можно сразу сохранить? чтоб вручную эти изменения не прописывать

    если изменения много в панели много, вспомнить и прописать вручную, много времени и сил.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>