Прежде чем применять 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 # RE: Руководство по Firebug для веб-разработчиковSinister 17.09.2012 10:36
Хорошая статья!
Но я, в силу исторических причин и привычки, ползуюсь Opera Dragonfly. Будет ли статья о ней? ;-)
Ответить | Ответить с цитатой | Цитировать
-2 # RE: Руководство по Firebug для веб-разработчиковWedal 18.09.2012 02:05
Sinister, вряд ли.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Руководство по Firebug для веб-разработчиковVARion 17.09.2012 11:03
Статья полезная, особенно тем кто начинает учиться разработке сайтов.
Добавлю. Чтобы редактировать свойства hover в Firebug можно у отдельного элемента в панели свойств выбрать Стиль \ :hover, тогда можно будет спокойно посмотреть стиль.
Также интересно узнать как отлаживать JavaScript через Firebug.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Руководство по Firebug для веб-разработчиковДимыч 17.09.2012 19:26
Перешел с Файрбага на Веб-инспектор в Гугл Хроме, и не жалею. Работает гораздо быстрее и функционал шире.
Ответить | Ответить с цитатой | Цитировать
+1 # RE: Руководство по Firebug для веб-разработчиковMerkury 20.09.2012 09:32
Насчет удобства - это да каждый выбирает, а вот насчет быстрее, это вы о чем?
Да отладка тормозит работу скриптов и браузера, но это не ощущается во время отладки (особенно при программировании графики вебгл это заметно по падению фпс с 55-65 до 45-50, но для графики достаточно фпс не ниже 25), а когда ни чего не отлаживается, то есть кнопка вкл/выкл у файербага.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Руководство по Firebug для веб-разработчиковMagnum79 25.09.2012 05:26
Цитирую Димыч:
Перешел с Файрбага на Веб-инспектор в Гугл Хроме, и не жалею. Работает гораздо быстрее и функционал шире.


Простите ламера, а где взять тот веб-инспектор для хрома?
Ответить | Ответить с цитатой | Цитировать
0 # RE: Руководство по Firebug для веб-разработчиковcalypso 27.09.2012 18:10
Он встроен изначально.
Вызывается Ctrl+Shift+J.
Ответить | Ответить с цитатой | Цитировать
-1 # RE: Руководство по Firebug для веб-разработчиковWedal 18.09.2012 02:08
Справедливости ради стоит добавить, что все современные браузеры имеют средства отладки, похожие на Firebug. Например, очень функционален веб-инспектор Гугл Хрома. Но каждый выбирает для себя сам.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Руководство по Firebug для веб-разработчиковMerkury 20.09.2012 09:23
"Могут возникнуть сложности при редактировании HTML-элементов со свойствами :hover..."
Виталь, врежиме просмотра хтмл справа в окне отображения css есть выпадающий список стиль/style там можно выбрать для выбранного элемента hover, focus, active.
Однако все это может делать Фокс (мне очень понравилась возможность просматривать блоки элементов в виде 3д, что помагает легко отловить слои) и без firebag-а (исключение pixelperfect). Но это, конечно, не все возможности, кроме того у фиребага есть много полезных дополнений.
Хотя опять же, у Фокса очень хороший встроенный отладчик явскрипта (файербаг тоже дайет приличные возможности для отладки js).
Не смотря на встроенные возможности Фокса, пользуюсь по привычке файербагом (его фозможности работы с консолью и профайлером js меня устраивают)
Ответить | Ответить с цитатой | Цитировать
+1 # RE: Руководство по Firebug для веб-разработчиковpiterden 29.10.2012 10:28
Несомненный плюс файрбага в том, что он работает в оффлайн режиме, а драгонфлай - нет. По поводу хрома я не в курсе. Для меня, например, это критичное отличие.
Ответить | Ответить с цитатой | Цитировать
+1 # RE: Руководство по Firebug для веб-разработчиковNadaff 01.11.2012 20:23
Я в силу обстоятельств и привычки до сих пор пользуюсь Opera Dragonfly, пробовал перейти на жука, НО нашел в нем недостатки по сравнениюс OD:
В OD подсветка фрагмента идет не только при наведении на тег - при наведении мышью тоже подсвечивается. Удобно. И второй существенный недостаток - в OD везде где стоит цвет с решеткой# можно открыть палитру и наглядно подобрать цвет.
Ответить | Ответить с цитатой | Цитировать
0 # А как найти путь к файлу HTML?MDR 03.03.2013 05:54
Добрый день.
Буду рад если поможете найти путь к HTML файлу с помощью Firebug!
Ответить | Ответить с цитатой | Цитировать
-2 # RE: А как найти путь к файлу HTML?Wedal 04.03.2013 02:09
MDR, фокус в том, что на сервере HTML-файлов не существует. Они генерируются автоматически при каждом запросе пользователя. Пишите, что хотите найти - подскажу где.
Ответить | Ответить с цитатой | Цитировать
0 # Хочу найти indexMDR 04.03.2013 04:13
Благодарю за отклик Wedal! Респект тебе!
Я работаю с джумла 2.5 и часто требуется что-то убрать из шаблона и тут один CSS не сможет (по моему) и придется редактировать html файл. Вот я хочу найти в джумла тот HTML (может php) файл которое в данный момент открыт firebug-ом.
Файлов типа index.php, index.html там куча.
Ответить | Ответить с цитатой | Цитировать
0 # В локалке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, но все базовые принципы остались неизменны.
Ответить | Ответить с цитатой | Цитировать
0 # вывести на серверЕвгений Лернер 07.05.2013 17:21
Здравствуйте!
Могу ли я каким то образом передать выдаваемую firebug информацию на сервер (php)для последующей обработки
Ответить | Ответить с цитатой | Цитировать
-1 # RE: вывести на серверWedal 08.05.2013 01:58
Евгений, Firebug не работает с PHP, только со сгенерированной html-страницей. Про передачу на сервер не слышал. Стандартный Firebug этого не умеет. Возможно, есть какие-то дополнения.
Ответить | Ответить с цитатой | Цитировать
0 # firebugЮлия 18.02.2017 18:14
Переключала различные возможности Firebug и у меня это приложение открылось сбоку справа. Как включить нижнее расположение окна? Также не открывается полноэкранный режим. Переустановила Firefox и Firebug, но всё осталось по прежнему, только исчез зачёк программы -жук. Через меню "Инструменты" перенастроить что либо не получается - кнопки не срабатывают. Работа стоит.
Ответить | Ответить с цитатой | Цитировать
0 # RE: firebugWedal 20.02.2017 04:46
Юлия, растяните боковое окно Firebug по горизонтали. Тогда справа появятся три красные кнопки, позволяющие переключать отображение. Нажмите на среднюю, на которой изображены два квадратика друг за другом.
Ответить | Ответить с цитатой | Цитировать
0 # HTML-файлы на сервереpetr 01.05.2017 14:52
Цитирую Wedal:
MDR, фокус в том, что на сервере HTML-файлов не существует. Они генерируются автоматически при каждом запросе пользователя. Пишите, что хотите найти - подскажу где.

Отличный инструмент Firebug несомненно. В интерактивном режиме можно просмотреть изменения, корректировки производимых правок. вот только когда приходит время переносить эти правки на реальный сайт все стопориться, нельзя найти документ (файл) в который необходимо внести поправки. Вы Wedal назвали это фокусом, что на сервере HTML-файлы не существуют, а как начинающему сайтостроителю выйти из ситуации, к Вам за подсказкой не набегаешься. Имеется наверно какая-то зацепка, отметина по которым например Вы ориентируетесь и находите необходимый файл)))). Было бы здорово если статью дополнили такими секретиками или подсказками.
Ответить | Ответить с цитатой | Цитировать
0 # RE: HTML-файлы на сервереWedal 02.05.2017 09:08
petr, если речь идет о CSS или JS коде, то Firebug показывает точный путь к нужному файлу на сервере.
Если же речь идет об html, генерируемом средствами PHP, то показать точный путь невозможно, т.к. чаще всего конечный код страницы складывается во многих файлах. Здесь уже требуется некоторый опыт, чтобы ориентироваться что и где можно найти.

Первой подсказкой места расположения кода является URL(без включенного SEF). В нем указан компонент и макет(в простонародье "вьюха"). К примеру, для такого URL:
index.php?option=com_virtuemart&view=productdetails&virtuemart_product_id=3770&virtuemart_category_id=145
вы уже можете понять, что код находится в компоненте com_virtuemart в макете productdetails.
Не всегда этого достаточно, но уже можно понять направление поиска.

Ну а самый железобетонный способ для новичка: поиск по файлам. Подробнее про него можно почитать здесь: http://wedal.ru/uroki-joomla/joomla-faq.html.

Если вы будете заниматься созданием сайтов постоянно, то со временем к вам придет опыт и нужные файлы будут находиться довольно быстро даже без поиска по файлам. А пока только так.
Ответить | Ответить с цитатой | Цитировать

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

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

Вверх