Firebug – полезный инструмент для web-разработчика

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

Также плагин firebug предоставляет следующий функционал:

• Инспектор (Inspect)– функция, предназначенная для быстрого обнаружения тега и просмотра всех «привязанных» к нему свойств и стилей;
• Возможность редактировать HTML-код и таблицы стилей CSS непосредственно в окне браузера. Можно вносить различные изменения в атрибуты тега и сразу же наблюдать результат. Это очень удобно для нахождения нужного оформления;
• Возможность отладки JavaScript;
• Дополнительный функционал, который позволяет просмотреть процесс загрузки страницы.

Это далеко не полный список функций, которые представляет плагин для web-разработчиков. Помимо всего прочего были созданы дополнения к firebug:

• Firecookie — инструмент для просмотра и управления cookies;
• FirePHP — инструмент для отладки PHP-кода при помощи HTTP-заголовков;
• FireRainbow — инструмент, который выделяет (подсвечивает) вставки JavaScript;
• Page speed firebug — дополнение, позволяющее измерить и оптимизировать скорость загрузки сайта.

Firebug для firefox

Для того чтобы установить firebug для firefox, необходимо перейти на официальную страницу, на которой представлен список версий данного продукта: следует выбрать последнюю на данный момент.

Если страница была открыта в Firefox, то при наведении курсора на ссылку с версией firebug отобразится предложение в виде кнопки с надписью «+Добавить в Firefox». Для начала установки плагина необходимо кликнуть по данной кнопке, а после ее окончания перезагрузить браузер:

Использование firebug

Как пользоваться firebug? Чтобы запустить плагин, необходимо кликнуть на его значок в форме жука. После загрузки открывается окно плагина, и пользователь наблюдает примерно следующее:

На данном скриншоте видно, что в окне слева представлен HTML-код страницы, а справа –CSS стили выделенного фрагмента кода. Это ускоряет поиск и отладку. Также в меню присутствуют следующие разделы для обработки:

• HTML;
• CSS;
• Script;
• DOM;
• NET.

Редактирование HTML-кода

Для редактирования html-кода достаточно выделить нужный фрагмент и выбрать пункт «Редактировать». Изменения сразу же отобразятся на web-странице. Если навести курсор на какой либо участок кода, то firebug выделит на странице элемент, описанный данным кодом, как показано на следующем скриншоте:

Редактирование CSS

CSS стили представлены в правой части окна firebug. В окно выводятся стили, отвечающие выделенным на данный момент фрагментам html-кода. Чтобы увидеть, как стиль изменяет внешний вид элементов страницы, можно «отключить» свойство, нажав на красный перечеркнутый кружок. Для возвращения к изначальному виду элемента, необходимо повторно кликнуть на кружок:

На рисунке видно, что после отключения свойства меню, изменилась позиция данного элемента.

Page speed firebug

Рассмотрим важное дополнение к плагину firebug – page speed firebug. Этот инструмент предназначен для анализа загрузки веб-страницы. При правильном использовании полученных данных, можно повысить скорость загрузки сайта.

Это расширение для firebug можно найти, перейдя по следующей ссылке: https://developers.google.com/speed/pagespeed/?csw=1. После установки и запуска нет никаких препятствий для того, чтобы начать анализ:

Результатом анализа является список советов по оптимизации обрабатываемой страницы, пример которого представлен на следующем скриншоте:

Выполнение данных рекомендаций значительно повысит скорость загрузки web-страниц. Красные кружки указывают на то, что соответствующие пункты оказывают большое влияние на скорость, а советы, помеченные желтыми треугольниками, не так важны для оптимизации.

Горячие клавиши firebug

Горячие клавиши (быстрые клавиши) ускоряют процесс работы в несколько раз. Ниже приведен список некоторых полезных горячих клавиш, действующих в плагине firebug:

Firebug для других браузеров

Чтобы установить firebug для chrome, нужно зайти в настройки браузера, выбрать вкладку «расширения», затем кликнуть на «еще расширения» и с помощью поиска найти плагин:

Установить плагин для opera можно на официальном сайте:

Firebug для safari и для IE можно найти на сайте. Нужно отметить, что версии для браузеров, отличных FireFox, имеют не полный функционал, а являются Lite-версиями плагина.

Firebug является прорывом в сфере web-конструирования. Это отличный инструмент, который дает возможность сделать работу верстальщика более приятной и увлекательной, а самое главное – более быстрой.

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