Отлов жуков. Firebug.

8
607

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

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

И сейчас я попробую внятно донести полезности этого плагина. Показывать работу этого инструмента я буду в браузере Firefox, так как изначально это была привилегия именно этого браузера. Но если вы по каким-то причинам не пользуетесь мазилой, не спешите расстраиваться, в Опере тоже есть подобная фишка, называется Opera Dragonfly, которая работает аналогично  Firebug. А для Chrome есть плагин один в один как и для Firefox.

Скачиваете плагин по ссылке. Перезапустите Firefox и в правом нижнем углу видим значок в жука firebug.

Нажимаем, видим следующее(картинка кликабельна):

Отлов жуков. Firebug.
Первая из самых юзабельных функций плагина является функция инспект элементов страницы  , При выборе данной функции можно выбрать любой элемент страницы, просто подведя к нему курсор мыши и кликнув по нему можно подробно с ним ознакомится. Плагин покажет его HTML код в самой странице( эта область на скрине отмечена цифрой 1), и связанную с этим элементом таблицу стилей ( область под цифрой 2). Править можно начинать «не отходя от кассы». На самом деле ничего изменить нельзя ,но посмотреть как измениться элемент посмотреть можно. И потом можно открыть нужный файл и провести уже изменения непосредственно в файле.

В окне где указан CSS стиль ,есть вкладка «макет», нажав которую вы наглядно увидите все границы/отступы данного элемента.

Отлов жуков. Firebug.

Думаю вы согласитесь с тем что это очень удобно.

Далее, вернёмся опять к панели инструментов Firebug. Выбрав пункт CSS, плагин представит все css стили которые задействованы на данной странице. То-есть не только стили вашей темы, но и подключённых плагинов.  Всё также можно менять в реальном времени и смотреть как это будет смотреться после внесённых изменений.

Отлов жуков. Firebug.

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

Отлов жуков. Firebug.

Скрипты Java-script также подвластны плагину . За отладку последних отвечает вкладка DOM(Document Object Model). В ней вы увидите все скрипты данной страницы, и сможете не выходя с браузера отлаживать существующие или писать новые.

Отлов жуков. Firebug.

Данная статья очень поверхностна, и показывает лишь основные принципы работы Firebug, так как плагин мега-функционален. Но для первого знакомства этого будет достаточно.

Ещё один нюанс, Firebug иногда достаточно сильно загружает браузер, и использовать один и тот-же браузер для серфинга и отладки страниц я бы не рекомендовал.

С уважением OlegS9.^_^

8 КОММЕНТАРИИ

    • Аркадий, не совсем понял о чём Вы ? :)
      Firebug по сути ничего не меняет. Он позволяет манипулировать старицей, выбранным элементом. Но править так или иначе придётся руками.
      Если вам нужно закрыть ссылки в noindex или nofollow то, либо ручками оборачивать, либо плагином воспользоваться.

  1. не знаю, как я раньше жила без firebugа))) Особенно мне в нем нравится, что можно css редактировать на лету и смотреть, что получается…
    Кстати у самого firebuga есть парочку плагинов, которые подключаются дополнительно, YSlow, SenSeo и другие.

ОСТАВЬТЕ ОТВЕТ