Firebug для Firefox – установка и использование. Что умеет Firebug. Каким образом использовать Firebug для редактирования CSS стилей

Firebug – бесплатный плагин для браузера Mozilla Firefox, одной из функций которого является работа с исходным кодом веб-страницы. С помощью расширения FireBug можно просматривать код страницы, редактировать или удалять элементы и атрибуты "на лету", при этом Вы можете просматривать результаты изменений на веб-странице в реальном времени. Т.е. при внесении изменения в код, страница браузера немедленно обновляется, отображая эти изменения в окне браузера. Бывает, что вам понравилось то или иное решение веб-мастера на чужом ресурсе, FireBug вам поможет подсмотреть как это работает и реализовать эти стили на своем сайте.

Установка расширения FireBug

Щелкните левой клавишей мышки в браузере Mozilla Firefox значок "Инструменты" и в выпадающем окне выберите "Дополнения", затем в поисковом окошке введите "FireBug" и нажмите клавишу "Enter". Найдите в появившемся списке расширений плагин Firebug и кликните большую зеленую кнопку "Add to Firefox".
После установки плагина Firebug в верхнем углу браузера Mozilla Firefox появится значок в виде жучка, а это значит, что данное дополнение успешно установилось.

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

Если щелкнуть правой кнопкой мышки по интересующему месту веб-страницы и выбрать из контекстного меню "Инспектировать элемент с помощью Firebug", то перед вами откроется участок кода страницы, который отвечает за формирование того элемента, который Вы выбрали.

Код интересующего нас элемента будет виден в открывшемся внизу страницы окне, при этом участок кода, который отвечает за выбранный элемент веб-страницы, будет подсвечен синим цветом.
Запустить Firebug можно также с помощью комбинации клавиш "Ctrl" + "F12" либо щелкнув по жучку в правом верхнем углу экрана. А если нажать клавишу "F12" , то Firebug откроется в новом окне браузера.

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

В левой половине окна плагина FireBug отображаются HTML - теги открытой в браузере веб-страницы. Здесь можно просматривать вложенность друг в друга тех или иных контейнеров, для открытия содержимого контейнера нужно нажать на плюсик рядом с ним, а также можно свернуть его, щёлкнув ещё раз. Для удобства перемещения по элементам можно использовать стрелки навигации на клавиатуре (смещает синее выделение элемента).

Если Вы подведете мышку к div- контейнеру в левой части окна Firebug, то сможете видеть, какие элементы открытой веб-страницы входят в этот div-контейнер.

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

Для того, чтобы быстро найти нужный элемент в коде страницы необходимо активировать соответствующий режим, нажав на кнопку панели "Исследовать элемент". После активизации кнопки, любой элемент веб-страницы на который Вы наводите курсор, автоматически ищется в HTML-коде. Ведите мышью над участками веб-страницы, а в левой части окна плагина просматривайте выделенные синим фоном фрагменты HTML- кода, которые отвечают за формирование данных элементов страницы. Фрагмент страницы, над которым находится курсор мыши, будет заключен в рамочку синего цвета.

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

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

Но если вы решили окончательно внести изменения в Html- код, то окажется, что отыскивать тот файл, который генерирует данный участок Html- кода не так-то просто.

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

Дело в том, что в отличие от обычного исходного HTML- кода, плагин Firebug учитывает все изменения в коде после его преобразования через JavaScript. Вероятнее всего, искомый Вами файл будет иметь расширение "php", и этот участок в нем может выглядеть совсем не так, как в исходном коде веб-страницы. Как же найти в каком файле формируется нужный нам фрагмент веб-страницы? Внимательно изучив нужный участок веб-страницы с помощью плагина Firebug, подищите какой-нибудь ID или CSS-класс, которые прописаны в контейнере с требуемым элементом веб-страницы. А далее с помощью программы Total commander осуществите поиск тех файлов, в которых присутствует данный класс или ID. Возможно Вам сразу не удастся найти нужный участок HTML- кода, тогда повторите поиск взяв за основу какой-нибудь другой маячок для поиска.

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

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

CSS-свойство одного и того же элемента может быть прописано несколько раз с разными значениями, тогда браузер учитывает только CSS-свойство с более высоким приоритетом – !important. . Если какая-то строка зачёркнута, значит у данного селектора специфичность ниже, чем у селектора с более высоким приоритетом. На рисунке видно, что у селектора .uk-article-title приоритет выше, чем у селекторов h1, .uk-h1 и h1, .uk-h1 , поэтому свойства font-size:40px и color: #444444 не применяются.
Любое CSS-свойство отключается и включается вновь простым щелчком по пустому полю перед свойством. Вы можете подвести курсор мыши к стилевому правилу, рядом с этим свойством появится красный перечеркнутый кружочек. Щелкнув по нему мышью можно отключить это CSS- свойство и посмотреть на веб-страницу без него. Отключенные свойства отображаются серым цветом, рядом с ними выводится серый перечеркнутый кружочек.

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

Перемещаться в панели CSS по свойствам и их значениям, а также вставить пустую строку для добавления нового CSS-свойства можно с помощью клавиши Enter. Щелчком правой клавишей мышки в панели CSS открывается контекстное меню.

• Через контекстное меню можно скопировать объявление свойства , имя свойства или значение свойства в буфер обмена, а затем вставить в CSS-файл Вашего сайта.
• Редактировать стиль элемента - установить встроенный стиль для элемента (устанавливается через атрибут style).
• Добавить правило – добавить правило к данному элементу.
• Новое свойство - добавить новое свойство и его значение текущему правилу.
• Редактировать, удалить или выключить – действия с текущим свойством.
• Обновить – обновить экран панели.
• Инспектировать во вкладке CSS - перейти во вкладку CSS для изучения объекта там.
• Инспектировать во вкладке DOM - перейти во вкладку DOM для изучения объекта там.

Во вкладке CSS доступен предосмотр цвета и изображений при наведении на свойство курсора

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

Вкладка "Скомпилированный стиль"

Во вкладке "Скомпилированный стиль" приведены свойства и их значения, которые применяются к данному элементу и не задаются явно через стили. Для каждого элемента сгенерирован свой стиль на основе внутренних значений браузера и стиле родительских элементов, и он приведён лишь для информации.

Вкладка "Макет"|Редактирование размеров в FireBug

Вкладка отображает размеры выбранного элемента, значение его полей, границ, отступов и позиционирования.

Для просмотра размеров и их редактирования необходимо в режиме "Анализ" навести курсор мыши и щелкнуть на элементе с размерами которого мы желаем поработать.
Для редактирования размера поля достаточно щелкнуть на его числовом значении во вкладке "Макет". При этом на странице сайта будут подсвечиваться соответствующие поля: сам элемент – светло-голубым, margin – желтым, а padding – фиолетовым цветом.

После изменения числового значения к выделенному элементу автоматически добавляется тег "style", а при открытии вкладки "Стиль" появится селектор "element.style". К нему можно добавлять другие свойства CSS и менять их значения, как и для любых других селекторов.

Вкладка "DOM" (Document Object Model - объектная модель документа) используется JavaScript-разработчиками.

Вкладка "DOM" показывает список всех методов и свойств выбранного на данный момент элемента. При необходимости можно просматривать свойства объекта или изменять их, одновременно просматривая результаты таких изменений на веб-странице.

Вкладка "Сценарий" (Script)|Отладчик JavaScript

Вкладка "Сценарий" – это мощный отладчик JavaScript, который позволяет запускать скрипты, в любое время приостановить их выполнение и посмотреть, как выглядела каждая переменная в момент останова. В основном окне мы устанавливаем (и удаляем) точки останова, а также проверяем код Javascript.

1. Кнопка с помощью которой можно выбрать файл скрипта, который вы хотите отладить. Вы также можете ввести фильтрацию для списка.
2. Функции отладки: Продолжить (F8), Шаг с заходом (F11), Шаг с обходом (F10), Шаг с выходом (Shift+F11) . Фунции действуют лишь тогда, когда выполнение кода достигает точки останова.
3. Вкладка "Наблюдение" даёт возможность просматривать переменные Javascript в текущем стеке.
4. Вкладка "Стек вызовов" показывает содержимое стека функций в реальном времени.
5. Вкладка "Точки останова" показывает список активных на данный момент точек останова. Отсюда можно только удалить точку останова.
Firebug позволяет устанавливать точки останова, которые сообщают отладчику о необходимости приостановить выполнение скрипта, когда он достигает определенной строки. Во время паузы, вы можете посмотреть значение любой переменной и обследовать объекты.
Для того чтобы установить точки останова, нажмите на любой номер строки и появится красная точка останова. Нажмите на красную точку ещё раз, чтобы её удалить.
После установки точки останова в нужном месте обновите страницу (F5) для срабатывания точки останова.

Для пошаговой отладки скрипта используйте кнопки на панели инструментов Firebug:
- продолжить выполнение до следующей точки останова (F8);
- зайти внутрь блока или функции (Шаг с заходом)(F11);
- перейти к следующему оператору без захода внутрь блока (Шаг с обходом) (F10);
- выйти из блока или функции (Шаг с выходом) (Shift+F11).

Измерение скорости загрузки сайта с помощью Firebug

Интересует сколько времени заняла загрузка вашей страницы? Вкладка "Сеть" для каждого файла покажет процесс загрузки в виде полосок от начала и до окончания. На диаграммах загрузки четко видно, что javascript-файлы загружаются по очереди, и никогда - параллельно. Данный факт поможет Вам оптимизировать порядок загрузки файлов на странице, чтобы пользователь не проводил много времени в ожидании загрузки страницы. Жмем вкладку "Сеть" в окне Firebug и обновляем (F5) веб-страницу.

В нижний строке списка запросов представлен обобщенный подсчет: количество запросов, объем информации в MB, сколько из них закешировано и суммарное время выполнения всех запросов.
На второй строке Firebug можно включить фильтрацию этой информации, то есть, если Вас интересует конкретный тип файлов, например javascript, HTML запросы, CSS файлы или изображения - нажимайте кнопки в в меню плагина, чтобы фильтровать список по типам. Благодаря фильтрации можно вычислять общий размер и время загрузки для конкретного типа файлов.
Некоторые сетевые запросы загружаются из кеша браузера, а не из сети. Плагин выделяет запросы из кеша полосками светло-серого оттенка, благодаря чему Вы можете легко определить насколько эффективно Ваш сайт использует кеш для оптимизации времени загрузки веб-страницы.

Для каждого загружаемого элемента есть подробное описание, которое расположено в свернутом списке. Кликните по плюсику, чтобы развернуть список и перед вами откроется вся информация о загружаемом файле: заголовки, ответ, кэш, cookie.

На этом все. Надеюсь, урок для Вас был интересен и полезен. Удачи Вам!

В этой статье вы узнаете все об использовании Firebug в Firefox. Файрбаг это плагин, который будет полезен всем блоггерам, оптимизаторам, верстальщикам и вебмастерам. Он расширяет возможности браузера Mozilla для тех людей, кто работает над сайтами.

Что умеет Firebug

Плагин Firebug имеет следующие возможности:

1. инспектирование и редактирование HTML, JavaScript кода, DOM
2. отладка и логирование JavaScript кода
3. выполнение JS напрямую через командную строку
4. автоматический поиск ошибок в JavaScript, XML, CSS
5. инспектирование и редактирование CSS-стилей
6. отображение CSS-метрик
7. отображение сетевых запросов при загрузке сайта

Пользователи Google Chrome могут обратить внимание, что это стандартные функции встроенные в Хром (доступные по нажатию F12), но выбор браузера - щепетильное и личное дело, поэтому кому-то удобнее пользоваться Firefox с плагином Firebug.

Успешная установка ознаменуется появившимся значком в виде жука.

Использование Firebug в верстке

Для того чтобы быстро посмотреть участок кода сайта (свойства CSS-стилей и пр.), нажмите правой кнопкой по элементу, затем нажмите «Анализировать элемент» («Inspect», F12, Ctrl+F12 - для открытия в новом окне). Плагин покажет вам и участок кода, и какие css-стили формируют его внешний вид, при этом сам html-код будет подсвечиваться синим.

После этого, мы можем отредактировать HTML «на лету». Для чего это нужно? Чтобы быстро посмотреть, как будет смотреться измененный код на сайте - для того чтобы не пересохранять по 10 раз исходные файлы на сервере, а сделать это лишь добившись необходимого результата при помощи плагина. И потом уже вносить изменения.

Также неоспоримым плюсом подобного «редактирования в браузере» является тот факт, что изменения происходят локально - их видите только вы. Особенно актуально это для высокопосещаемых вебсайтов, где мы не можем позволить себе внедрять HTMS+CSS код не проверив его на ошибки (искажение сайта).

Есть два варианта использования Firebug для поиска нужного куска кода. Первый - водить мышкой по сайту и тогда в окне плагина будет подсвечиваться соответствующий HTML код. Второй - водить мышкой по HTML коду в окне плагина и тогда будут подсвечиваться элементы на сайте, соответствующие коду, на который указывает мышь. Все это работает мгновенно и динамически, что позволяет быстро разобраться, сориентироваться в коде своего или чужого сайта.

Только не забудьте нажать кнопку для включения этой функции:

Затем, найдя нужный элемент, щелкните по нему левой кнопкой и перейдите к окну Firebug чтобы работать над кодом.

При этом элементы можно сворачивать и разворачивать - для компактного вида они сворачиваются по тегам: div, p, link и пр.

Как пользоваться Firebug для редактирования CSS

Очень просто. Если в левом окне у нас HTML код, то в правом - CSS-стили, которые можно на лету редактировать и наблюдать за изменениями в оформлении сайта.

Использование плагина firebug для работы с CSS предусматривает следующие сценарии:

1. Отключение CSS-стилей по клику (нажмите на кружочек, чтобы выключить какое-нибудь свойство)
2. Поиск файла.css из которого подгружаются стили к определенному элементу (а также поиск конкретной строки в этом файле, чтобы было удобно вносить изменения и редактировать таблицы каскадных стилей):

Как использовать плагин Firebug чтобы измерить скорость загрузки вашего сайта

Скорость загрузки сайта (наличие ошибок при загрузке) - важный показатель не только при оптимизации сайта для поисковых систем, но и для удобства пользователей. Никто не хочет ждать пока медленный сайт загрузится, а о пользователях нужно заботиться.

И в этом нам тоже поможет чудесный плагин. Как это посмотреть? Перейдите на вкладку «Сеть» в плагине и обновите страницу на которой находитесь. После этого вы получите раскладку - какие элементы сколько грузятся, в каком порядке и какой ответ дает сервер при запросах к элементам. Эта информация позволит оптимизировать сайт и работать над ускорением загрузки.

Вот и все, теперь вы знаете как использовать и работать с плагином файрбаг, используя его как визуальный редактор сайта. Зачем? Задачи разные: поправить форму поиска или подписки, поиграться со шрифтами и размерами текста и заголовков, найти HTML-код элемента чтобы удалить его и многие другие бытовые задачи, стоящие перед вебмастерами и блоггерами.

Здравствуйте, уважаемые читатели! Сегодня речь пойдет об очень важном инструменте верстальщика — бесплатном дополнении . Лозунг на сайте разработчиков гласит — «Эволюция web-разработки». Не верьте этому! Firebug -это настоящая революция web-разработки. После знакомства с Firebug вы будете недоумевать, как обходились без него раньше.

До того, как я связался с web технологиями, моим любимым браузером была Opera. Быстрая, легкая, удобная. И все-то меня в ней устраивало, но чем дальше я погружался в изучение html и css, тем чаще встречал упоминания о бесплатном дополнении Firebug для FireFox. «Подумаешь, какое-то дополнение! Неужели ради него стоит менять браузер?!» — думал я тогда. Практика показала, что стоит. Попробовав один раз в действии Firebug, я уже не мог работать без него. Это действительно очень важный инструмент веб-мастера. Без него, как без рук. Скоро Вы в этом сами убедитесь.

Аналоги FireBug есть и в других браузерах, но они не идут ни в какое сравнение с оригиналом. Быть может я просто очень привык к оригинальному FireBug и все иное мне кажется чуждым и неудобным.

Как установить FireBug в FireFox

Браузер FireFox хорош тем, что его функционал легко можно расширить с помощью бесплатных дополнений, коих очень и очень много. Одним из таких дополнений является FireBug.

Устанавливается FireBug очень просто и быстро. Откройте браузер FireFox и зайдите на страницу, посвященную данному дополнению.

На момент написания этих строк дополнением FireBug уже пользуются более 3 миллионов человек. Давайте присоединимся к ним. Нажимаем на кнопку «Добавить в FireFox».

Появится окошко с предупреждением, в котором вам предложат установить FireBug в FirFox. Воспользуемся этим предложением. Возможно вам понадобится после этого перезапустить браузер, чтобы дополнение установилось и включилось.

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

Включить панель FireBug можно нажатием кнопки F12. По умолчанию она появляется в нижней части экрана. Положение панели можно изменить. Для этого зайдите в опции (иконка жука в левом углу панели) и выберете пункт Положение окна.

Основной закладкой является «HTML». Именно в ней предстоит нам работать большую часть времени. Окно разбито на две части:

• Слева представлен исходный код страницы;
• Справа — стили css.

Если навести курсор мышки на какой-нибудь html тэг в левом поле, то он будет выделен цветом на странице. При этом:

• голубой цвет показывает ширину элемента;
• темно синий — поля (padding);
• светло желтый — отступы (margin).

Картинка ниже кликабельна.

При выборе тэга, нажатием левой клавиши мыши, в правом окне отобразятся его css стили. В самом верху будут указаны стили именно этого html тега, ниже пойдут унаследованные стили. Если какой-то атрибут зачеркнут, значит он не работает (переопределен). Кроме этого, указывается файл css и номер строки в нем, где тот или иной стиль определен.

Для удобства поиска предусмотрена опция анализа структуры страницы курсором мыши. Включается она кнопкой в левом верхнем углу, рядом с иконкой жука, выглядит как прямоугольник и курсор мыши. Фактически, мы идем от противного — если раньше выбирали html тег и видели его на странице, то теперь выбираем его курсором мыши прямо на странице и видим его характеристики в окне FireBug. Пользоваться этой опцией придется постоянно, ибо она значительно упрощает и ускоряет поиск того или иного элемента.

А теперь самая главная фишка FireBug, за которую его так любят: вы можете менять структуру страницу и ее стили на лету! Практически никаких ограничений — можете взять тэг и переименовать его, изменить содержание заголовка или абзаца, отредактировать, отключить или добавить атрибут стиля, а можете просто удалить пол страницы. Результат будет тут же отображаться на экране! Только помните: все изменения происходят в самом FireBug , так что после перезагрузки страницы, она вернется к первоначальному состоянию. Таким образом навредить никак нельзя.

FireBug — это большая песочница для экспериментов. Когда вы нашли правильный вариант, просто перенесите его в ручную в файлы html и css.

Что еще есть интересного:

• На закладке «Консоль» можно посмотреть ошибки JavaScript, HTML и CSS — полезная информация для отладки.
• На вкладке «Сеть» имеется информация по запросом: статус, размер, удаленный IP и время исполнения.
• Вкладка «Page Speed» позволяет протестировать скорость загрузки страницы. Оценка ставится по 100 бальной шкале. Кроме этого, даются полезные совету, которые позволят улучшить данную характеристику.

Пример практического использования FireBug

Теперь рассмотрим пример из практики. На моем блоге есть статья, посвященная плагину . В ней рассказывается, как вывести форум на отдельной странице. Ради удобства для нее создается отдельный шаблон, в котором удаляется сайдбар. Подразумевается, что форум займет всю ширину страницу.

Проблема заключается в том, что во многих ширина блока под контент фиксирована. Удаление сайдбара не приводит к тому, что форум расползается на всю страницу, на месте сайдбара остается просто пустое место. Чтобы исправить это, нужно найти и отредактировать стиль элемента, отвечающего за вывод содержания страницы.

Ко мне время от времени обращаются люди за помощью. Благодаря FireBug найти злосчастный элемент и его стили несложно.

Последний раз я интегрировал форум в тему Sento . Рассмотрим порядок действий.

1. По инструкции, описанной в той статье, создаем отдельный шаблон pageforum.php, в котором удаляем строчку кода, отвечающую за вывод сайдбара справа. Создав страницу с форумом, получаем следующий результат.

Как видите, сайдбар исчез, но осталось пустое место. Его то и следует убрать.

2. Включаем наш инструмент нажатием кнопки F12.

3. Первое, что следует сделать — узнать ширину вашего шаблона, конечно, если он не резиновый. Включаем функцию анализа страницы и мышкой ищем элементы, для которых задан параметр width (ширина) в правом столбце, отвечающем за стили css. Найти будет несложно, скорее всего ширина задана для шапки сайта, так что с нее и следует начать поиск.

4. Следующей нашей целью будет элемент, который отвечает за вывод содержания страницы. Главным критерием поиска является заданная в стилях ширина (width). Именно она не позволяет форуму расползтись. Не забывайте про возможность анализировать структуру страницы с помощью мыши. Данная функция значительно упростит поиск. Картинка кликабельна.

В данном случае я нашел тэг div с классом span-16. Заметьте, что стили прописаны не в стандартном файле style.css, который находится в корневом каталоге темы, а в файле screen.css, расположенном в папке css. Так что будьте внимательнее, чтобы не пришлось искать стили там, где их нет.

5. Открыть файл screen.css, найти класс span-16 и поменять параметр width легко, но это будет ошибкой. Другие страницы WP тоже используют div с классом span-16, так что они после таких изменений просто расползутся. Следует открыть шаблон pageforum.php и переименовать класс span-16. Дайте ему новое, нигде не задействованное имя. Для этого нового класса пропишите параметр width в файле со стилями. Таким образом, изменения будут внесены только в страницу для форума.

Вот так быстро и просто FireBug позволяет находить нужные html тэги и их стили.

Напоследок хочу сказать, что FireBug становится абсолютно бесполезным в том случае, если вы не знаете хотя бы основ html и css. Изучить их несложно, нужно только захотеть. Если вы ведете блог или сайт, то рано или поздно эти знания вам понадобятся. Лично я получил их из за авторством Влада Мержевича. Конечно, этот мануал не сделает из вас профессионального верстальщика, но базовые знания вы точно получите.

На этом на сегодня все. Спасибо а внимание и до новых встреч.

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

Однако разница есть. И в первую очередь она касается именно веб-мастеров. Потому что при создании и отладке и удобнее использовать тот браузер, который сам будет Вам помогать в этом.

А точнее не сам браузер, а дополнение к нему.

Итак, встречайте, сегодня я Вам расскажу о таком незаменимом плагине для Mozilla Firefox, как Firebug .

И первый вопрос: Что же такое Firebug?

Firebug — это расширение для браузера Mozilla Firefox, которое является консолью для отладки и выявления ошибок, возникающих при разработке сайта.

Оно предоставляет веб-мастеру множество инструментов для оценки работоспособности кода страницы, показывает привязанные к каждому элементу css-стили, позволяет в режиме реального времени изменять фрагменты кода и стили. И тут же, не выходя из браузера, увидеть результат этих изменений.

Как установить Firebug?

Установка Firebug довольно проста. Для начала запускаем Mozilla Firefox (Firebug устанавливается только на этот браузер) и переходим по ссылке: . Находим там кнопку «Установить Firebug». Нажимаем на нее и попадаем на станицу установки дополнений для Firefox.

Нажимаем на кнопку «Добавить в Firefox». Происходит загрузка плагина и появляется окно:

Нажимаем «Установить сейчас». Все. Установка завершена.

Для того, чтобы плагин заработал, нужно перезагрузить браузер Firefox. После перезагрузки в панели браузера появится кнопка включения расширения Firebug.

Как использовать Firebug?

Способов использования Firebug довольно много, так как он содержит множество инструментов. Все их описывать я не буду. Расскажу только про некоторые основные.

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

Во-вторых, Firebug дает возможность подбирать параметры атрибутов в режиме реального времени без перезагрузки страницы и необходимости править какие-либо файлы.

В-третьих, Firebug позволяет отследить иерархию контейнерной модели, подсвечивая в окне браузера параметры выбранного блока разными цветами (отступы margin, pading, границы). Также в Firebug есть удобный инструмент для анализа макета блока и изменения атрибутов «на лету».

В-четвертых, Firebug содержит удобные инструменты для анализа скорости загрузки страницы и много еще чего интересного.

Если Вы хотите более детально ознакомиться с принципами использования дополнения Firebug, можете почитать о них на официальном сайте.

А я приготовил Вам небольшое видео. Несколько примеров использования Firebug. Смотрите:

Firebug — отладчик web-приложений, используется как отдельное расширение для браузера Mozilla Firefox, являющееся консолью, отладчиком, и DOM-инспектором JavaScript, DHTML, CSS, XMLHttpRequest.

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

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

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

Вы сможете редактировать, отлаживать и исследовать CSS, HTML и Javascript вживую, на любой веб-странице.

Файрбаг

Речь идет о плагине Firebug, или как его еще называют по-русски «Файрбаг», «Фаербаг», что в переводе с английского означает «огненный жук».

Плагин Firebug – это встроенный в браузер программный продукт, который предназначен для просмотра и редактирования структуры страниц веб-сайта (html-кода, стилей CSS, скриптов и др.). Инструмент этот совершенно не интересен обычным пользователям всемирной паутины, но для тех, кто пробует себя в создании сайтов – вещь совершенно незаменимая.

Общепризнано, что самый удобный и как следствие, самый популярный Firebug — у браузера Mozilla Firefox. Вообще, строго говоря, само название Firebug — это бренд от Mozilla. Но так уж сложилось, что аналогичные продукты других производителей во всем мире тоже стали называть файрбагами.

Какие браузеры поддерживают Firebug

Кроме «Огненной лисы» Firebug есть и у браузера Google Chrome.

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

Есть Firebug и в браузере Opera, но им пользуются намного меньшее число людей.

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

Вызывается Firebug во всех браузерах стандартно – нажатием кнопки F12, либо правой кнопкой мыши, где из контекстного меню необходимо в зависимости от вашего браузера выбрать пункт «исследовать элемент» или «инспектировать элемент».

После этого на мониторе появится рабочее окно файрбага, в котором мы можем увидеть весь html-код открытой страницы, а также другие ее элементы, включая css-стили.

А теперь, собственно говоря, поговорим для чего все это нужно.

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

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

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

Итак, вот страница нашего сайта. Перед нами стоит задача изменить цвет области вот этого заголовка с синего на какой-либо другой. Эту задачу, конечно, можно выполнить, изменив код непосредственно в файле стилей на сервере. Но ведь после изменения нам захочется посмотреть результат и если он нас не устроит, придется снова лезть в файл и править код. И так несколько раз, пока мы не добьемся нужного результата. Согласитесь, что это неудобно. С Firebug задача существенно упрощается.

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

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

Для работы Firebug 1.4 требуется Firefox 3.0 или выше.