Firebug — это уникальная программа-плагин для Firefox, которая помогает при  создании сайтов, а точнее при верстке страниц. При создании сайта, в независимости от движка на котором он будет работать, макет нужно сначала сверстать в HTML 5 и CSS 3. Firebug дает возможность менять все стили, слои и т.д. и видеть изменения в реальном времени, прямо в браузере. Firebug будто дарит Вам глаза, и установив его Вы перестанете верстать html на слепо.

Не нужно сохранять каждое изменение в style.css и в index.html, не нужно после этого заменять их на сервере. Вы просто открываете Firefox, и меняете все онлайн, цвет бекраунда или текста, размер шрифта — все! Увидете который слой «поскачет вниз» если увеличить его ширину и т.д. Все эти изменения Вы увидите мгновенно. Если вы еще не пользовались Firebug, вы будете поражены, насколько это удобно.

Далее инструкция по установке Firebug, и как ним пользоваться:

Firebug инструкция по установке

Открываем  Firefox,  нажимаем на кнопку  Firefox >>далее>> Дополнения

firebug-install

рис.1

В дополнении есть поиск дополнений, там набираем Firebug, и нажимаем на лупу

установка firebug

рис. 2

После завершения поиска, в результатах первым будет Firebug, нажимайте установить, не перепутайте с другими приложениями например FireFlash

как установить  firebug

рис. 3

Инструкция как пользоваться Firebug

После установки Firebug, справа вверху на панели Firefox должна появиться иконка жучка 🙂

Как пользоваться  firebug

рис. 4

Нажатие на жучка включает Firebug, снизу выезжает ее консоль, разделена на две части: слева html код, справа css

Как пользоваться  firebug

рис. 5

Выберем body, изменив цвет его фона на черный. Вы сразу, моментально  увидите результат изменения

Как пользоваться  firebug

рис. 6

Для того, чтоб  выбрать любой элемент для изменений  с помощью Firebug, нужно нажать на иконку, смотрите на рис.7

Как выбирать объекты в firebug

рис. 7

После нажатия на спец иконку, вы можете выбрать любой объект для изменений, его код и стиль Firebug моментально покажет в консоле

Выбрать любой слой или объект с помощью firebug

рис. 8

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