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

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

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

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

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

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

firebug6 300x236 Отлов жуков. Firebug. фото

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

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

firebug8 280x300 Отлов жуков. Firebug. фото

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

firebug9 300x107 Отлов жуков. Firebug. фото

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

firebug10 300x120 Отлов жуков. Firebug. фото

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

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

Статья будет дополняться по мере поступления полезного материала и изменениях текущего, подписывайтесь на RSS чтобы своевременно узнать о продолжении или обновлении статьи.

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