Полезные расширения для браузеров Firefox и Opera | Часть 2: Firebug для Firefox — возможности и принципы работы
В этой статье мы продолжим рассмотрение возможностей плагина Firebug для браузера Firefox, которое мы начали в предыдущей статье — Firebug — самый необходимый инструмент при работе над дизайном сайта. Там мы в общих чертах коснулись работы с Firebug, а именно того, как можно использовать этот плагин для определения участка кода, отвечающего за тот или иной элемент дизайна сайта — Методы работы с Firebug. Но мы отвлеклись на рассмотрение вопроса поиска файла движка сайта, отвечающего за вывод нужного участка кода — Поиск по содержимому файлов сайта при помощи Total commander. В этой статье мы вернемся непосредственно к Firebug и продолжим рассмотрение его возможностей.
Возможности и принципы работы плагина Firebug для браузера Firefox
Кроме описанного в предыдущей статье Полезные расширения для браузеров Firefox и Opera | Часть 1: Firebug для Firefox способа активации плагина Firebug (щелкнуть по интересующему месту страницы правой кнопкой и выбрать из контекстного меню — «Анализировать элемент») его можно вызвать к жизни простым нажатием на иконку паучка в правом нижнем углу страниц или же с помощь нажатия клавиши F12. Повторное нажатие этой клавиши приведет к закрытию окна плагина Firebug.
Если вы хотите, чтобы плагин открылся в отдельном всплывающем окне, то щелкайте по паучку удерживая Shift на клавиатуре или используйте сочетание клавиш Ctrl+F12. Вы сами выберите наиболее удобный для вас вариант. Окно плагина будет выглядеть у вас примерно так:
Сверху расположены кнопки панели управления, а основная часть окна плагина разделена на левую и правую половину. В левой половине вы можете наблюдать структуру HTML данной страницы сайта, а в правой половине стили CSS, которые используются для задания того или иного вида этого HTML документа. Как я уже говорил ранее, в современной верстке страниц сайта принято использовать HTML для задания наполнения сайта, а для задания нужного внешнего вида этого наполнения используются правила таблицы стилей CSS.
Работа с HTML кодом страницы с помощью плагина Firebug
Рассмотрим сначала левую половину окна плагина, отвечающую за отображение HTML кода данной страницы сайта. Вы можете наглядно видеть вложенность друг в друга тех или иных элементов кода, например, контейнеров DIV. Для рассмотрения содержимого элемента можно нажать на плюсик рядом с его названием. Подводя мышку к тому или иному контейнеру DIV в окне плагина Firebug, вы можете наблюдать его наглядное отображение на открытой странице сайта. Содержимое данного контейнера будет закрашено синим муаром, через который вы сможете видеть, что именно из элементов страницы находится в данном контейнере. Правда открытая вами страница сайта может быть очень большой и тогда вам придется использовать прокрутку, для поиска выделенного синим фрагмента страницы сайта.
Как видно из приведенного выше рисунка, контейнер <div id="header-in"> отвечает за вывод на страницу блока с заголовком и описанием сайта. Можно пойти от обратного для получения информации о том, какой участок кода HTML за вывод какого блока на данной странице сайта отвечает. В этом случае, мы будем подводить мышь не к блокам с кодом, а напрямую к интересующим нас элементам страницы сайта, а в окне плагина Firebug, в области для показа HTML кода страницы, синим фоном будут подсвечиваться те элементы кода (контейнеры), которые отвечают за формирование данного блока страницы вашего сайта. Все это происходить динамично, в соответствии с перемещением мыши по странице вашего сайта. Очень наглядный способ.
Для реализации этого способа нужно будет нажать показанную на рисунке кнопочку на панели управления плагина Firebug:
После того как вы нажали эту кнопку, ведите мышью над нужными участками страницы, а в левой части окна плагина Firebug сможете наблюдать участки кода, отвечающие за формирование данных элементов страницы (они будут выделены синим фоном). При этом элемент страницы, над которым находится курсор мыши, будет заключен в синюю рамочку:
После того, как нужный элемент страницы найден, вы можете щелкнуть по нему левой кнопкой мыши и перейти в левое поле окна плагина Firebug, для дальнейшей работы с кодом этого элемента. Как я уже упоминал в первой статье данного цикла Полезные расширения для браузеров Firefox и Opera | Часть 1: Firebug для Firefox, с HTML кодом в окне плагина Firebug можно производить любые манипуляции и результат вы увидите сразу же на открытой странице сайта.
При этом, естественно, никаких изменений в реальных файлах движка сайта производиться не будет. Но зато, вы сможете в реальном времени промоделировать различные варианты построения данной страницы. Если же новый, смоделированный с помощью Firebug вариант кода HTML вас устроит, то придется вносить изменения уже в реальные файлы движка сайта, найти которые вы сможете используя следующий способ: Поиск по содержимому файлов сайта при помощи Total commander.
Работа с CSS свойствами нужного участка страницы с помощью плагина Firebug
В правом окне плагина Firebug отображаются все свойства CSS, которые отвечают за оформление выделенного в левом окне блока HTML кода. Эти свойства будут определять внешний вид данного блока. Это может быть его положение относительно других блоков данной страницы, размер, тип и цвет шрифта, используемого в данном блоке для отображения цвета или ссылок и много другое.
Для наглядной демонстрации возможностей CSS в оформлении какого-либо элемента страницы, вы можете подвести курсор мыши к какому-либо правилу CSS, приведенному в правой части окна плагина Firebug. Рядом с этим правилом появится серый перечеркнутый кружочек. Щелкнув по нему мышью вы отключите данное правило на этой странице сайта, а рядом с этим правилом появится красный кружочек.
При этом вы сможете наблюдать на открытой странице сайта в реальном времени произошедшие изменения. Это очень сильно помогает разобраться в том, какое правило за что отвечает в оформлении данного элемента страницы. Для того, чтобы снова включить данное свойство, нужно снова щелкнуть по красному перечеркнутому кружку рядом с ним.
Эти свойства CSS, расположенные в правой части окна плагина Firebug, можно редактировать точно так же, как мы редактировали HTML код страницы в левой части окна Firebug. Все внесенные изменения будут тут же отображаться на открытой странице сайта, но ни как не повлияют на реальные свойства CSS,прописанные в файле, имя которого вы можете видеть над данным блоком свойств CSS:
Там даже будет указана строка в файле CSS, на которой прописано данное свойство. Поэтому, если промоделированные с помощью плагина Firebug изменения в оформлении внешнего вида данного элемента страницы сайта вам понравятся, то для внесения этих же изменений в CSS файлы вашего сайта нужно будет лишь открыть нужный файл и найти там указанную строку. Все намного проще, чем в случае с внесением изменений в HTML код страницы.
Измерение скорости загрузки страниц сайта с помощью плагина Firebug
Ну и напоследок, хотел бы рассказать о возможности плагина Firebug для браузера Firefox измерять скорость загрузки страниц вашего сайта. Скорость, с которой загружается ваш сайт, блог или форум, является очень важным показателем. Если у вашего проекта с этим показателем не все в порядке, то это может повлечь за собой довольно неприятные последствия. И самое важное из них то, что посетители могут отказаться от работы с вашим ресурсом, т.к. он очень долго подгружает страницы. Кроме этого, поисковые системы, в особенности Google, учитывают скорость загрузки сайта при общей оценке полезности того или иного ресурса.
Чтобы выявить и устранить узкие места в загрузке элементов вашего сайта можно воспользоваться специальным сервисами, позволяющими измерить скорость загрузки всех элементов любой страницы. Об этом я рассказывал здесь — Сервисы для определения скорости загрузки сайта. Вам достаточно будет ввести адрес нужной страницы своего сайта и через некоторое время вы получите полную разблюдовку по тому, какой элемент страницы сколько загружается. Таким образом можно выявить явно тормозящие элементы и принять меры к ускорению их загрузки.
Но то же самое можно сделать и не обращаясь к сторонним сервисам. У нашего любимого плагина Firebug для браузера Firefox имеется такая возможность. Достаточно просто нажать кнопку «Сеть» и обновить открытую страницу сайта.
В результате, вам будет предоставлена полная информация по загрузке всех элементов страницы. Анализируйте и принимайте при необходимости меры по ускорению загрузки. На сегодня, пожалуй, что все. В следующей стать я хочу рассказать об еще одном замечательном плагине для браузера Firefox, который поможет нам при работе с оформлением страниц сайта. Плагин это называется Web Developer и имеет просто огромное количество всевозможных инструментов, позволяющих упростить работу по верстке или корректировки шаблона вашего сайта. Ну а дальше мы перейдем к рассмотрению SEO плагинов для FireFox и Opera.
Если вы не хотите пропустить появление новых материалов на этом сайте, то можете подписаться на рассылку новостной ленты через форму, расположенную чуть ниже, или же выбрать удобный для вас способ подписки на странице Подписка. Если у вас остались нерешенные вопросы из области вебмастеринга, то вы можете поискать на них ответы, посетив страницу Вопросы и ответы.
Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru
Почитать еще на эту же тему:
FireBug это вообще вещь. Одна из лучших, что я видел за последние годы. До сих пор недоумеваю почему ранее до такой вещи не додумались. Сравнить Web разработку с и без FireBug можно что разве с сексом с девушкой и без нее. Понятное дело, что рядовому пользователю этот плагин не нужен, но вебмастеру необходим как воздух.
Этот плагин очень много указал мне на ошибки и мой сайт ускорился в работе в разы после устранения всех ошибок. Также именно этот плагин окончательно убедил меня FF использовать как основной браузер. Кстати жалкое подобие дебагера в IE (CTRL+F12) не добавило тому плюсов а наоборот. Вообще был возмущен как такая корпорация допустила такое Г в эфир.
В общем FB рулит
Дмитрий: отличное сравнение с сексом с девушкой и без нее
Шикарный плагин, а я по каким-то неведомым причинам до сих пор им не пользовался. Жесть просто
Да чуть не забыл. Если автор будет писать третью статью про FireBug то обязательно нужно описать как прекрасно отлаживать через FB приложения написанные на Javascript а особенно AJAX
Дмитрий: я бы написал, но не работаю с Javascript. Не хотите написать гостевой пост на эту тему? Этот блог, конечно же, не блог Димка, но определенное количество трафика и открытые ссылки на свой сайт вы получите. =)