Приветствую, всех читателей — сайт!

Сегодня, я покажу, как пользоваться Firebug .

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

Если Вы, как и я ведёте свой блог то думаю, давно столкнулись со словом – «Вёрстка ». И всегда, делая эту злополучную вёрстку, сталкиваетесь с кучей проблем.

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

Как установить программу для вёрстки сайта – Firebug (Фаербаг).

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

Вас, тут же перебрасывают в новое окно, где нужно нажать на большую зелёную кнопку с надписью – «+ Add too Firefox »:

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

Теперь в одном из углов Вашего браузера должен появиться маленький значок с изображением жука:

Вёрстка сайта — как пользоваться Firebug (Фаербаг).

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

После этих действий, внизу браузера появится рабочее окно данного дополнения:

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

Теперь, в окне Firebug, в правой его части, будут отображаться – CSS свойства выделенного объекта, а в левой, можно посмотреть HTML-код и его местонахождение:

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

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

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, как любое расширение служит для увеличения возможностей браузера. В данной статье я расскажу: где скачать Firebug для популярных браузеров Mozilla Firefox, Google Chrome и Opera, как его установить, а также постараюсь подробно описать, как пользоваться Firebug.

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

Для остальных популярных интернет браузеров, таких как: Google Chrome, Opera и Internet Explorer, была разработана упрощенная версия — Firebug Lite, которая существенно уступает оригиналу, но тем не менее является вполне работоспособной.

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

С использованием дополнения, отпадает необходимость копаться в файлах шаблона, пытаясь определить какой class или id задан для определенного участка страницы.

В общем, работа с внешним видом сайта становится гораздо легче, быстрее и приятней. Поехали!

Где скачать и как установить расширение Firebug

Чтобы скачать расширение Firebug для Mozilla Firefox, необходимо открыть данный браузер и перейти по этой ссылке . Попадаем мы на страничку, где надо нажать на кнопку — «Добавить в Firefox»:

Затем откроется такое окошко:

Нажимаем на кнопку — «Установить сейчас» и начнется недолгий процесс установки. Если после перезагрузки браузера в верхнем правом углу появится значок с изображением жука, то значит Firebug успешно установился.

Установка на Chrome и Opera очень схожа и я думаю Вы разберетесь. Вот ссылочки на страницы для скачивания

Скачать Firebug для Chrome

Скачать Firebug для Opera

Выше я уже писал, что в браузерах Google Chrome и Opera, расширение представлено в сокращенном виде и чтобы более полно описать функционал Firebug, я запущу его в браузере Mozilla Firefox.

Работа со стилями. Как пользоваться Firebug

Начнем с самого простого примера. Допустим, нам надо поправить форму подписки от feedburner. У новичков очень часто с этим бывают большие сложности.

Недавно мне пришло письмо от одного моего постоянного читателя, в котором он попросил меня помочь справится с «непослушной» формой подписки. Ну вот у меня теперь есть прекрасная возможность продемонстрировать работу Firebug и заодно помочь человеку.

Вот как на данный момент выглядит форма на блоге автора письма:

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

В браузере я нажимаю на значок жука и внизу страницы откроется «рабочая зона» расширения:

Далее, на панели управления выбираю иконку с изображением стрелочки (на скриншоте я ее обвел красным). C помощью этой функции можно выделить любой объект на странице и его код отобразится во вкладке — «HTML».

После нажатия на иконку, отвечающую за выделения, передвигаю курсор на край формы подписки и границы зоны очерчивается рамкой:

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

Теперь я буду править форму подписки, так сказать, в реальном времени.

Итак, в любом шаблоне есть файл style.css и как правило все стили прописываются именно в этом файле, но бывают и исключения. В форме подписки от feedburner стили заложены в сам код и мне надо найти слово style (с англ — стиль), после которого прописаны селекторы и их значения, отвечающие за различные параметры:

Давайте разберем, что за селекторы заданы для данной формы.

Border: 2px solid #00B344;

Селектор border (с англ. — граница) выводит рамку вокруг формы, толщиной в 2px (два пикселя).

Значение solid (можно перевести, как сплошная линия) задает вид рамки, т.е. если задать другое значение, например: dashed (пунктирная линия), то рамка станет пунктирной.

И последнее значение #00B344 — это цвет рамки.

Padding: 3px;

Селектор padding (с англ. — набивка) отвечает за внутренние отступы, т.е. в данном случаи селектор задает расстояния в пикселях от самой формы до рамки.

Text-align: center;

Селектор text-align (с англ. — выравнивание текста) выравнивает текст, относительно страницы. Значение center (с англ. — центр) дает команду браузеру выравнивать данные элемент по центру страницы.

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

Итак, с заданными стилями мы разобрались, теперь я буду приводить форму подписки в надлежащий вид.

Для этого я применю еще один селектор margin (с англ. — край), который отвечает за внешние отступы, т.е. расстояния от рамки до краев расположенных рядом элементов.

Видно, что форма растянута и с помощью внешних отступов можно сделать ее немного компактней.

Делаю двойной клик левой копкой мыши по нужному участку кода и теперь, прямо в рабочей зоне расширения Firebug, можно вносить изменения в уже существующие параметры или задавать новые:

В самый конец кода формы подписки я добавляю селектор margin изадам для него следующие значения:

Margin: 0 180px 0 180px;

Немного поясню, что за цифры я тут написал. Цифры — это расстояния внешних отступов в пикселях, начиная с верхнего и далее по часовой стрелки. Т.е. для верхнего и нижнего отступов — значение ноль, а для левого и правого, задано расстояние в 180 пикселей.

Если есть одинаковые значения, то их можно «склеить», тем самым немного сократив код:

Margin: 0 180px;

Вот что в итоге должно получится:

И вот оно чудо! Форма подписки моментально приняла другой вид.

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

Если навести курсор на синий фон кода, то на странице подсветятся: внешние отступы — желтым цветом, внутренние — фиолетовым.

Другое дело! Только вот кнопочка «Подпишитесь» уж как-то сильно прижалась к полю ввода e-mail, надо ее немного опустить. Выделяю кнопку с помощью вышеописанных действий и вот ее код:

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

Margin: 7px 0 3px 0;

У меня получились одинаковые значения для правого и левого отступа и надо «склеить» нули:

Margin: 7px 0 3px;

Смотрим на результат:

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

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

Но что же делать, если стили прописаны в отдельном файле? Давайте разберем и эту ситуацию.

Теперь для примера я выбрал блок с хлебными крошками со своего блога. Выделяю его, и в правом окне рабочей зоны отобразятся стили, которые прописаны в файле style.css :

Итак, что мы видим. Мне открылись все стили, прописанные в файле style.css, для идентификатора breadcrumbs.

Допустим, я хочу изменить цвет текста, и размер шрифта. Для этого мне понадобиться внести изменения в значения для селекторов: color (с англ. — цвет) и font-size (с англ. — размер шрифта).

Делаю двойной клик по значению селектора и появляется поле для правки:

Теперь мне не нравиться тени шрифта, надо их убрать. За тени отвечает селектор text-shadow (с англ. — тень текста). Навожу курсор на селектор и слева от него появляется красный значок:

Если кликнуть на этот значок, то селектор исчезнет и отменяться все его значения. Смотрим:

Тени, как не бывало! Следуя своим внезапным капризам, я решил сделать текст немного жирнее. Ага, а такого селектора здесь нет. Ну что же, придется его добавить.

За «жирность» текста в CSS отвечает селектор font-weight (с англ. — начертание шрифта).

Делаю двойной по символу «;» (можно кликать по любой строчке), который находится в конце каждой строки или по символу «}» и появится поле для ввода нового селектора и его значений:

Сначала, в появившемся поле, я прописываю сам селектор, потом нажимаю клавишу Tab и вписываю значение bold (с англ. — отчетливый):

Наверное Вы заметили, что Firebug показывает порядковый номер строки, начиная с которой в файле style.css прописаны стили для выделенного идентификатора или класса:

И если кликнуть по номеру, то в правом окне рабочей зоны, откроется файл style.css и стили для идентификатора, с которыми я работал, подсветятся голубоватым фоном.

Также для правки стилей можно пользоваться вкладкой CSS, где будет отображаться файл style.css целиком:

Если выделить объект и воспользоваться вкладкой «Маркет», расположенной в правом окне рабочей зоны, то мы увидим следующую картину:

Как Вы уже догадались, в этой вкладке наглядно демонстрируется размеры самого выделенного элемента (690х41 пикселей), а также: внутренние отступы (padding) , рамка (border) и внешние отступы (margin).

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

P.S. Как видите, если немного знать английский язык, то изменение стилей окажется не таким уж и сложным занятием.

На сегодня у меня все! Как вам статья?

С уважением, Виталий Кириллов

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 или выше.

В этой статье вы узнаете все об использовании 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-код элемента чтобы удалить его и многие другие бытовые задачи, стоящие перед вебмастерами и блоггерами.