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

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

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

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

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

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

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

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

firebug_panel

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

firebug_inspect

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

firebug_icon

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

otkrit_v_otdelnom_okne

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

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

html_tab

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

node_view_pane

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

firebug_in_work

Обратите внимание, когда вы кликаете по 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-панели.

overwritten_css

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

edit_css

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

edit_css

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

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

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

code

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

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

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

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

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

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

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

Понравилась статья? Сохраните себе на стену:

Ваша оценка материала очень важна для нас. Просим вас оценить статью или оставить отзыв в комментариях ниже.

4.3076923076923 1 1 1 1 1 4.31

Добавить комментарий

Для отправки комментария введите код с картинки:
Защитный код
Обновить

Комментарии  

-1 # вывести на серверЕвгений Лернер 07.05.2013 17:21
Здравствуйте!
Могу ли я каким то образом передать выдаваемую firebug информацию на сервер (php)для последующей обработки
Ответить | Ответить с цитатой | Цитировать
-1 # RE: вывести на серверWedal 08.05.2013 01:58
Евгений, Firebug не работает с PHP, только со сгенерированной html-страницей. Про передачу на сервер не слышал. Стандартный Firebug этого не умеет. Возможно, есть какие-то дополнения.
Ответить | Ответить с цитатой | Цитировать
-1 # А как найти путь к файлу HTML?MDR 03.03.2013 05:54
Добрый день.
Буду рад если поможете найти путь к HTML файлу с помощью Firebug!
Ответить | Ответить с цитатой | Цитировать
-2 # RE: А как найти путь к файлу HTML?Wedal 04.03.2013 02:09
MDR, фокус в том, что на сервере HTML-файлов не существует. Они генерируются автоматически при каждом запросе пользователя. Пишите, что хотите найти - подскажу где.
Ответить | Ответить с цитатой | Цитировать
-1 # Хочу найти indexMDR 04.03.2013 04:13
Благодарю за отклик Wedal! Респект тебе!
Я работаю с джумла 2.5 и часто требуется что-то убрать из шаблона и тут один CSS не сможет (по моему) и придется редактировать html файл. Вот я хочу найти в джумла тот HTML (может php) файл которое в данный момент открыт firebug-ом.
Файлов типа index.php, index.html там куча.
Ответить | Ответить с цитатой | Цитировать
-1 # В локалкеMDR 04.03.2013 04:15
Имеется в виду в локальном сервере.
Ответить | Ответить с цитатой | Цитировать
-1 # RE: В локалкеWedal 05.03.2013 01:27
MDR, вот так, в двух строчках, это и не опишешь. Читайте серию статей по созданию шаблона Joomla(http://wedal.ru/shabloni_joomla/shablony-joomla-chast-1sozdanie-shablona-joomla.html). Там я по косточкам разбирал что, где и зачем. Она хоть и написана еще во времена Joomla 1.5, но все базовые принципы остались неизменны.
Ответить | Ответить с цитатой | Цитировать
+1 # RE: Руководство по Firebug для веб-разработчиковNadaff 01.11.2012 20:23
Я в силу обстоятельств и привычки до сих пор пользуюсь Opera Dragonfly, пробовал перейти на жука, НО нашел в нем недостатки по сравнениюс OD:
В OD подсветка фрагмента идет не только при наведении на тег - при наведении мышью тоже подсвечивается. Удобно. И второй существенный недостаток - в OD везде где стоит цвет с решеткой# можно открыть палитру и наглядно подобрать цвет.
Ответить | Ответить с цитатой | Цитировать
+1 # RE: Руководство по Firebug для веб-разработчиковpiterden 29.10.2012 10:28
Несомненный плюс файрбага в том, что он работает в оффлайн режиме, а драгонфлай - нет. По поводу хрома я не в курсе. Для меня, например, это критичное отличие.
Ответить | Ответить с цитатой | Цитировать
-1 # RE: Руководство по Firebug для веб-разработчиковMerkury 20.09.2012 09:23
"Могут возникнуть сложности при редактировании HTML-элементов со свойствами :hover..."
Виталь, врежиме просмотра хтмл справа в окне отображения css есть выпадающий список стиль/style там можно выбрать для выбранного элемента hover, focus, active.
Однако все это может делать Фокс (мне очень понравилась возможность просматривать блоки элементов в виде 3д, что помагает легко отловить слои) и без firebag-а (исключение pixelperfect). Но это, конечно, не все возможности, кроме того у фиребага есть много полезных дополнений.
Хотя опять же, у Фокса очень хороший встроенный отладчик явскрипта (файербаг тоже дайет приличные возможности для отладки js).
Не смотря на встроенные возможности Фокса, пользуюсь по привычке файербагом (его фозможности работы с консолью и профайлером js меня устраивают)
Ответить | Ответить с цитатой | Цитировать
-1 # RE: Руководство по Firebug для веб-разработчиковWedal 18.09.2012 02:08
Справедливости ради стоит добавить, что все современные браузеры имеют средства отладки, похожие на Firebug. Например, очень функционален веб-инспектор Гугл Хрома. Но каждый выбирает для себя сам.
Ответить | Ответить с цитатой | Цитировать
-1 # RE: Руководство по Firebug для веб-разработчиковДимыч 17.09.2012 19:26
Перешел с Файрбага на Веб-инспектор в Гугл Хроме, и не жалею. Работает гораздо быстрее и функционал шире.
Ответить | Ответить с цитатой | Цитировать
+1 # RE: Руководство по Firebug для веб-разработчиковMerkury 20.09.2012 09:32
Насчет удобства - это да каждый выбирает, а вот насчет быстрее, это вы о чем?
Да отладка тормозит работу скриптов и браузера, но это не ощущается во время отладки (особенно при программировании графики вебгл это заметно по падению фпс с 55-65 до 45-50, но для графики достаточно фпс не ниже 25), а когда ни чего не отлаживается, то есть кнопка вкл/выкл у файербага.
Ответить | Ответить с цитатой | Цитировать
-1 # RE: Руководство по Firebug для веб-разработчиковMagnum79 25.09.2012 05:26
Цитирую Димыч:
Перешел с Файрбага на Веб-инспектор в Гугл Хроме, и не жалею. Работает гораздо быстрее и функционал шире.


Простите ламера, а где взять тот веб-инспектор для хрома?
Ответить | Ответить с цитатой | Цитировать
0 # RE: Руководство по Firebug для веб-разработчиковcalypso 27.09.2012 18:10
Он встроен изначально.
Вызывается Ctrl+Shift+J.
Ответить | Ответить с цитатой | Цитировать
-1 # RE: Руководство по Firebug для веб-разработчиковVARion 17.09.2012 11:03
Статья полезная, особенно тем кто начинает учиться разработке сайтов.
Добавлю. Чтобы редактировать свойства hover в Firebug можно у отдельного элемента в панели свойств выбрать Стиль \ :hover, тогда можно будет спокойно посмотреть стиль.
Также интересно узнать как отлаживать JavaScript через Firebug.
Ответить | Ответить с цитатой | Цитировать
+4 # RE: Руководство по Firebug для веб-разработчиковSinister 17.09.2012 10:36
Хорошая статья!
Но я, в силу исторических причин и привычки, ползуюсь Opera Dragonfly. Будет ли статья о ней? ;-)
Ответить | Ответить с цитатой | Цитировать
-2 # RE: Руководство по Firebug для веб-разработчиковWedal 18.09.2012 02:05
Sinister, вряд ли.
Ответить | Ответить с цитатой | Цитировать

Вверх