Руководство по Firebug для веб-разработчиков

Firebug – бесплатное расширение Mozilla Firefox для веб-разработок. Оно настолько полезно и популярно (используется также и в других браузерах, только с ограниченным функционалом), что имеет свои собственные расширения. Например, Pixel Perfect (выводит полупрозрачный макет страницы поверх верстки), Page Speed (тестирует скорость загрузки страницы с выдачей советов по оптимизации кода), Firefinder (ведет поиск по селекторам) и т.д.

C помощью Firebug можно добавлять/изменять CSS-свойства (сразу же видеть результат), устранять проблемы верстки, а также просматривать структуру и оформление других сайтов.   

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

Для начала необходимо скачать и установить (если вы еще этого не сделали) браузер Mozilla Firefox, потом скачать и установить расширение Firefox – Firebug.

Вы выполнили все вышеперечисленное? Тогда Firebug готов к работе.

Как запустить Firebug

Когда Firebug запущен, то веб-страница выглядит следующим образом:

Запустить Firebug можно с помощью клавиши F12 (для Firebug есть и другие «горячие» клавиши) или через контекстное меню, которое открывается кликом правой кнопки мыши на страницу (или на конкретный HTML-элемент: гиперссылку, заголовок, картинку, кнопку и т.д.) –> «Инспектировать элемент с помощью Firebug».

Для быстрого запуска Firebugв Firefox предусмотрена иконка.

 Firebug можно открыть в отдельном окне через «Открыть Firebug в отдельном окне».

Просмотр макета и разметки веб-страницы

Веб-разработчики, глядя на страницу, над которой работают, часто спрашивают себя: «Где же ошибка?». Firebug помогает разобраться в коде и ответить на этот вопрос. Сразу же при открытии Firebug перед вами появляется панель HTML-элементов веб-страницы (вкладка HTML).

В свою очередь HTML-панель разделяется на 2 панели: панель просмотра HTML-разметки и боковую – панель стилей. Панель HTML-разметки, которая находится слева, показывает сгенерированный исходный код страницы.

Если вам надо просмотреть, где на странице находится тот или иной HTML-элемент, то нужно просто навести мышь (или кликнуть) на HTML–код этого элемента в панели HTML-разметки. И тогда браузер подсветит нужный вам элемент. Функция подсветки элемента сама по себе интересна, потому что показывает то, как браузер обрабатывает HTML-элементы и где они находятся на веб-странице. Такая функция наглядно показывает все padding-и, margin-ы и т.п.

Обратите внимание, когда вы кликаете по HTML-элементу в панели HTML-разметки , то в верхней строке панели появляется порядок вложения HTML-элементов, такая подсказка нужна во избежание повторов CSS-свойств где-либо на вашем сайте. По этой строке также смотрят наследование CSS-свойств.

В правой части HTML-панели Firebug предусмотрена функция поиска HTML-элементов (найденные элементы в панели HTML-разметки будут подсвечиваться серым).

Боковая панель стилей показывает дополнительную информацию о выделенном элементе, состоит из 4-х вкладок:

1) Стиль – показывает CSS-свойства конкретного элемента, название документа, в котором прописаны эти свойства и номер строки;

2) Во вкладке «Скомпилированный стиль» показаны все CSS-свойства, которые применяются к данному элементу и не задаются явно через стили (этот стиль сгенерирован на основе внутренних значений браузера и стиле родительских элементов);

3) Макет – визуально показывает вам margin, border и padding выбранного элемента, значения можно изменять (дважды кликнув по ним);

4) Вкладка DOM (DocumentObjectModel) используется JavaScript-разработчиками.

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

• добавление/удаление всех HTML-элементов;
• добавление/удаление идентификаторов и классов CSS-элементов;
• ввод длинного текста для проверки правильности переноса строк;
• просмотр различных вариантов оформления того или иного элемента;

Любой код, который вы напишите в Firebug, не сохранится: при обновлении страницы все внесенные изменения исчезают. Поэтому при разработке сайта важно все необходимые изменения сохранять в текстовом редакторе.

Рассмотрим более подробно устройство CSS-панели Firebug. CSS-стили элементов расположены в ней в алфавитном порядке, начиная с самых «свежих» свойств.

Иногда CSS-свойство одного элемента может быть прописано несколько раз с разными значениями, тогда браузер берет в рассмотрение только последнее CSS-свойство или CSS-свойство с более высоким приоритетом – !important. Отсюда и берутся зачеркнутые свойства в CSS-панели.

Редактировать CSS-свойства в Firebug – одно удовольствие. Все значения, названия свойств можно легко изменять «на лету». Очень удобно и то, что в Firebug есть автодополнения.

CSS-свойство можно отключить и посмотреть на веб-страницу без него.

С помощью клавиши Enter можно перемещаться по CSS-свойствам и их значениями, а также перейти на пустую строку для добавления нового CSS-свойства. Чтобы добавить CSS-свойство к элементу, у которого нет id или class, можно добавить новый атрибут в панели HTML-разметки во вкладке HTMLили CSS («Правка кода»).

Причуды и ограничения Firebug

Могут возникнуть сложности при редактировании HTML-элементов со свойствами :hover или JavaScript (например выпадающее меню), потому что панель HTML-разметки показывает свойства этих элементов только пока на них наведена мышь. Для решения этой проблемы можно прописать параметры видимости элемента в HTML-панели. Ниже рассмотрен пример выпадающего меню, где добавлен style="display:block":

Иногда CSS-панель не дает право редактировать свойства и выдает ошибку (особенно при проверке UserAgents). Для устранения ошибки нужно просто перезапустить браузер.

При работе с Firebug важно понимать, что этот инструмент выводит в панель HTML-разметки не только тот код, который хранится у вас в файлах HTML, но а также сгенерированный php-код.

Еще одна проблема, связанная с Firebug – это тот факт, что он создавался под Firefox, который может сам исправлять некоторый недочеты и ошибки в коде.

Например, в коде страницы есть такая вот строка:

<li><a href="/home.htm">Home</li>

В этой строке отсутствует закрывающий тег </a>. Некоторые браузеры могут не понять, что это ошибка и ссылка окажется недееспособной. Firebug в таких случаях надеется на встроенный механизм Firefox, который выведет на деле отсутствующий тег </a> (это называется сгенерированный код). При разработке сайта такую особенность надо держать в голове и проверять его работоспособность во всех остальных браузерах.

Итак, надеюсь, эта статья помогла вам понять основные принципы работы в такой замечательной программе как Firebug. Остальную информацию можно прочесть в официальной документации или проверить опытным путем. Удачи!