Всем привет!

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

Возможно, для рядовых пользователей всемирной паутины плагин не принесет никакой пользы. Но, если вы являетесь веб мастером, и имеете в наличии свой собственный ресурс, firebug вам придется по вкусу! А если вы еще и начинающий верстальщик, то он для вас окажется просто незаменимым помощником. Итак, чем же так хорош этот огненный жук?

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

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

А бывают моменты еще интереснее. На одном из ресурсов в сети вам понравился один из элементов, который автор реализовал на своем сайте, и вам очень захотелось нечто подобное сделать у себя на блоге. Но, как подсмотреть, с помощью какого кода у него реализован этот элемент? Ответ прост — плагин Firebug вам поможет! Да-да, вы не ослышались, с помощью расширения Firebug вы можете посмотреть HTML — коды не только страниц своего ресурса, но и любых других.

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

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

Но в этом случае перед вами предстанет HTML — код всего содержимого открытой страницы, а вам нужен только участок, отвечающий за вывод времени и даты. Так как же тогда поступить? Придется внимательно просматривать весь код в поисках нужного. А если вы вообще не разбираетесь в HTML, то поиск будет бесполезен. Что же в этом случае предлагает нам огненный жук?

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

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

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

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

Каждый пользователь сети интернет отдает предпочтение одному из понравившихся браузеров. Браузер — это программное обеспечение для запроса и просмотра веб-страниц. В наше время наиболее распространенными из них являются Mozilla Firefox и Google Chrome.

Лично я являюсь давним поклонником браузера Mozilla Firefox, хотя Google Chrome мне кажется довольно шустрее и функциональнее. Наверное, это дело привычки.

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

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

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. Таким образом, я решил написать данное руководство. Я как смог постарался рассказать обо всех тонкостях работы с Firebug и отобразить их, приведя примеры исходно кода и скриншотов работы.

Почему Firebug?

Firebug – одно из самых популярных расширений Mozilla Firefox. Кроме того, это инструмент, который помогает упростить работу веб-разработчика. Он включает в себя много замечательных инструментов, помогающих в отладке, проверке HTML, профилировании и т.д., которые будут полезны программистам.

Инструменты

• Отладка Javascript
• Командная строка Javascript
• Проверка Javascript Performance и XmlHttpRequest
• Вход через логин
• Трассировка
• Проверка HTML и редактирование HTML
• Редактирование CSS

Где достать Firebug?

1. Посетить официальный сайт getfirebug.com
2. Там, в правой части сайта, вы увидите кнопку. Нажмите на неё, чтобы начать установку.
3. После нажатия на изображение, возникнет следующее диалоговое окно. Нажмите на кнопку “Установить сейчас”.

Меню “Firebug” и Консоль ошибок будет открываться в Firefox в меню «Инструменты». Если вы нажмете нам консоль ошибок, откроется окно со списком ошибок, предупреждений и сообщений системы. На самом деле, эта консоль ошибок – то же самое, что и раздел Firebug.

Меню Firebug

После нажатия на “Firebug” в меню «Инструменты», откроется следующее подменю.

Проверка содержимого страницы

Это единственное меню, которое называется “Инспектировать элемент” – просто нажмите правую кнопку мыши в любой области страницы. Это очень полезное меню.

Консоль Firebug

На изображении ниже представлена консоль Firebug.

Она состоит из шести вкладок: вкладка Console, HTML, CSS, Script, DOM и Net.

• Вкладка Console: Для создания логина, настройки профиля, трассировки и выполнения команд командной строки.
• Вкладка HTML: Для проверки элементов HTML, добавления HTML и изменения стилей в момент запуска. Кроме того, здесь расположены подразделы CSS, Layout и консоль DOM.
• Вкладка CSS: Здесь можно запросто проверить, сколько файлов css включено в страницу сайта. Вы можете выделить любой css-файл и внести в него изменения. (Я не особо использую этот раздел, так как то же самое есть в разделе HTML).
• Вкладка Сценарий: Служит для отладки кода Javascript. Здесь также включены функции просмотра и остановки выполнения сценария.
• Вкладка DOM: Служит для просмотра DOM. (Я особо не использую эту функцию. Однако, пользуюсь ей из консоли HTML и Script).
• Вкладка Сеть: Служит для мониторинга работы сети. Она даст вам знать, почему ваша страница (или весь сайт) слишком долго загружается в браузере.

Горячие клавиши и кнопки мышки

F12. Используется для открытия/закрытия консоли Firebug.
Обо всех горячих клавишах можно прочитать .

Вот два видеоурока по использованию FireBag

Возникли проблемы?

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

Итог

Вот и все! Думаю, теперь у вас есть представление о том, что такое firebug, как он выглядит, и как его установить. Если вы уже знакомы с firebug, этот раздел также будет вам полезен, чтобы закрепить знания. В следующих разделах я расскажу более подробно о каждой функции. Не стесняйтесь, оставляйте комментарии к статье и высказывайте свои идеи по этому поводу. Ваши комментарии сделают эту статью только лучше. А я буду им очень признателен.

Здравствуйте, уважаемые читатели.

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

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

htmlbook.ru - это замечательный ресурс о HTML и CSS. На нем Вы найдете исчерпывающую информацию, самоучители и, что очень важно, примеры использования всех тегов и стилей. Рекомендую добавить в закладки и регулярно им пользоваться.

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

Шаг 1

Устанавливаем последнюю версию браузера Firefox, скачать

Шаг 2

Скачиваем Firebug, скачать можно

Шаг 3

Нажмите на зеленую кнопку «Добавить в Firefox».

Шаг 4

После перезагрузки в нижнем правом или верхнем правом углу окна браузера появится значок в виде жука.

Теперь давайте посмотрим как им пользоваться.

Шаг 5

Жмем на значок с жуком. Внизу окна браузера появилось окно плагина. Нажмите на стрелку, затем наведите курсором на нужный элемент страницы и Firebug покажет массу информации о выбранном объекте. Вы увидите, как располагается выбранный элемент в HTML коде, отображая все вложенные слои. Также узнаете, какие CSS стили относятся к данному элементу. Выбранный элемент будет в синей рамочке, на примере это один из пунктов меню «Главная», Рис. 1

На рис.2 показаны CSS стили относящиеся к пункту меню «Главная», так же мы можем видеть, что в файле стилей style.css в строке 73 прописан рассматриваемый нами код.

Можете менять значения HTML и CSS, результат изменений увидите сразу же на открытой странице браузера. Если полученный результат не устраивает, вносите изменения дальше или перезагружаете страницу и находите нужный объект снова по той же схеме. Помните, после перезагрузки страницы, страница загрузится в ее естественном виде, ведь изменения вносились лишь визуально, мы ведь не сохраняли их в файле стилей style.css. Если внешний вид изменений устраивает, тогда в файле стилей находите нужную строку (на примере это строка 73) и, внеся изменения, сохраняете их. Теперь окончательный вариант правок сохранен, и Вы можете любоваться им при каждой загрузке страницы.

Шаг 6

Плагин так же позволяет посмотреть скорость загрузки объектов страницы в миллисекундах. Нажмите «Сеть» и обновите страницу. Результат показан на рисунке ниже в столбце «Временная линия».

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

Пишите Ваши комментарии.