Я постараюсь максимально кратко и понятно рассказать как пользоваться фаербагом (инспектором) и зачем он нужен. Это невероятно удобный инструмент, который я использую при создании/редактировании сайтов ежедневно. Изначально Firebug был создан в качестве плагина для Firefox для того, чтобы находить ошибки в html коде, в скриптах и оперативно их устранять. Затем плагин прижился и теперь многие вебмастера используют его для правки html кода, css, скриптов и не только. Впринципе, если захотеть, то можно сверстать целую страницу в firebug, но все же стоит использовать его только для правки=). Вы можете вызвать его в любом из последних версий браузеров chrome, opera и firefox при нажатии кнопки F12 или правой кнопкой мыши на любой элемент страницы -> просмотр кода элемента (проинспектировать элемент). Хочу отметить, что я показываю все на примере браузера chrome.

Вы увидите нечто подобное (скриншот ниже). На скриншоте: наверху — страница сайта, снизу — Firebug.

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

В данном случае я нажал на просмотр кода элемента заголовка

. В левом окне вы видите весь html код страницы и мой подсвеченный заголовок

.В правом окне firebug находятся стили css, которые привязаны к данному тегу. Т.е. если вы выбираете какой-либо элемент будь то div, p, table или любой другой, то в правом окне фаербага вам будут показываться те стили css, которые каким-либо образом касаются выбранного элемента. Удобно, не правда ли?:) Но это не все, что вы можете делать при помощи плагина.

Редактирование страницы при помощи Firebug

Да-да, вы можете прямо в режиме онлайн редактировать свой сайт при помощи firebug . HTML код редактируется следующим образом — вы нажимаете на необходимый тег правой кнопкой мыши и затем выбираете «edit as html» (хочу напомнить, что я показываю пример используя бразуер chrome, в других браузерах названия могут немного отличаться).
Для того, чтобы редактировать css достаточно кликнуть в правом окне рядом с остальными стилями. Так вы сможете добавить неограниченное количество стилей для выбранного объекта, посмотреть как это выглядит в живую на сайте и затем скопировать в сам css-файл.
Многие вебмастера (особенно которые работают с CMS, например Joomla и WordPress) не могут найти css файл куда нужно добавить отредактированные стили. Что же, все достаточно просто, для того, чтобы узнать где находится css-файл, вам достаточно навести мышку на название стиля (в моем случае) style.css:1112. Путь вы увидели. style.css — это название файла. 1112 — это номер строки, где находятся нужные вам стили.

На скриншоте выше вы видите результат добавления/изменения трех свойств стиля #singlecont h1. Я сделал черным бекграунд, текст белым и добавил отступ, и в итоге получил

#singlecont h1 { color: #FFF; font-size: 40px; font-weight: 400; padding: 0px 0 0px; line-height: 100%; margin-bottom: 20px; background: black; padding: 20px; }

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

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

Здравствуйте, уважаемые читатели! Сегодня речь пойдет об очень важном инструменте верстальщика — бесплатном дополнении . Лозунг на сайте разработчиков гласит — «Эволюция 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. Изучить их несложно, нужно только захотеть. Если вы ведете блог или сайт, то рано или поздно эти знания вам понадобятся. Лично я получил их из за авторством Влада Мержевича. Конечно, этот мануал не сделает из вас профессионального верстальщика, но базовые знания вы точно получите.

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

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

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

Сегодня я проведу экскурс по одному из практических методов изучения html-разметки и css-стилей. А объектом нашего внимания в данном разрезе станет расширение FireBug. Изначально оно было создано для браузера Mozilla Firefox. На сегодняшний день Фаербаг также можно использовать в Opera, Google Chrome. Мы разберем его основные функции на конкретных примерах.

На моем блоге большой популярностью пользуются статьи, в которых я учу читателей стилизовать элементы блога с помощью css:

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

Как установить Фаербаг для Мазилы и других браузеров?

Для начала нужно установить дополнение Фаербаг в ваш браузер.

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

В сегодняшней статье я расскажу именно о плагине Фаербаг для Мазилы, потому как это его базовая версия. Для остальных браузеров созданы версии FireBug Lite. Их функционал несколько сокращен.

Можно скачать Фаербаг для Хрома и Opera на официальных сайтах этих браузеров.

Замечу, что в Google Chrome есть собственный встроенный аналог FireBug.

Работать с ним можно, кликнув по странице правой клавишей и выбрать «Просмотр кода элемента», либо нажав F12. Сама я часто пользуюсь этим . Однако, по моему мнению, для новичков Фаербаг более понятен и удобен. Кроме того, он переведен на русский язык в отличии от инструмента для просмотра кода в Хроме.

Для чего нужен FireBug?

В первую очередь ФайерБаг – это инструмент для просмотра исходного кода страницы или ее элемента. Этот код будет отличаться от кода в ваших файлах php шаблона WordPress. Однако изучение исходного кода дает понимание того, какие его части отвечают за те или иные элементы страницы.

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

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

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

Чтобы его активировать вы можете кликнуть правой кнопкой мыши и выбрать «Инспектировать элемент с помощью FireBug». Либо выбрать в раскрывающемся списке под жучком опцию «Включить на всех страницах». Внизу экрана появится такое окно:

Это и есть рабочая область для просмотра и редактирования элементов страницы.

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

Работа с HTML

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

Вот, к примеру, я выделяю картинку с ноутбуком и внизу вижу ее соответствие в коде.

Работает и обратная последовательность: просматривая код в окне Фаербага, на странице будут автоматически выделяться соответствующие ему элементы.

Теперь, если вы хотите поменять, к примеру, размер картинки и посмотреть, как это будет выглядеть, нажмите кнопку «Редактировать».

Здесь вы можете менять любые параметры и сразу же видеть результаты этих изменений.

Например, уменьшим размер картинки вдвое:

Но помните, что стоит обновить страницу и все вернется к исходному виду. Как же сохранить изменения из FireBug? Для этого нужно найти файл шаблона, который отвечает за данный элемент. В моем случае, картинка просто находится в тексте статьи. Но вы, возможно, захотите изменить элемент из шапки или сайдбара, тогда и искать его нужно будет в файлах header.php и sidebar.php соответственно. Затем скопировать измененный в Файрбаге код и заменить соответствующие строки файла.

Работа с CSS

Теперь перейдем к стилям. Возьмем для примера социальные кнопки под статьей.

В поле справа мы видим вкладку «Стиль», которая отвечает за вид данного блока. Можно вносить изменения прямо в этом поле, либо перейти в закладку CSS, кликнув по ссылке, которая указывает на номер строки в файле style.css.

Нужный нам блок будет подсвечен голубой заливкой:

Здесь мы можем поменять толщину, цвет и стиль верхней и нижней границы элемента (border-bottom, border-top), его высоту (height), величину отступа от нижнего края (margin-bottom),ширину полей (padding), позицию элемента относительно окна браузера (position). Кроме того, сюда можно добавлять дополнительные параметры стиля. Значения перечисленных показателей можно увидеть наглядно, если перейти на вкладку «Макет».

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

Теперь в коде, который отвечает за элемент, измененный вами в FireBug, найдите по возможности редко встречающуюся часть. Это может быть участок кода, помещенный в теги div или id.

Например, мне нужно найти такой участок: