Firebug для Firefox! Как пользоваться расширением Firebug? Как использовать Фаербаг для изучения HTML. Как использовать Firebug для работы с CSS

Я постараюсь максимально кратко и понятно рассказать как пользоваться фаербагом (инспектором) и зачем он нужен. Это невероятно удобный инструмент, который я использую при создании/редактировании сайтов ежедневно. Изначально 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 и как его использовать. В дальнейшем я планирую выпустить еще несколько статей на эту тему. Спасибо за внимание.

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

Расширение 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 для Firefox позволяет прямо в браузере мы изменять (html, CSS и т.д.), и сразу смотреть результат наших действий, хотя реально сам код на сервере и не изменялся. Ещё проще: например, нужно изменить размер шрифта в заголовке поста. Используя Firebug, просто выделяем мышкой нужный нам текст, высвечивается соответствующий элемент и можно сразу вносить изменения в размер шрифта и сразу смотреть результат. Посмотрели, как выглядит веб-страница и потом уже вносим изменения в соответствующий код. Удобно? Не то слово!

Этот плагин, как дополнение есть в разных вариантах. Так его можно установить в браузер Chrome (как установить Хром, написано в статье , настроить и работать. Как установить этот плагин для chrome -читайте ), а можно и в рассмотрим этот вариант.

Как установить плагин firebug для firefox

Открываем Mozilla Firefox (он естественно уже установлен на нашем компьютере), скачать firebug для firefox можно по

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

Обратите внимание, что кнопка Установить не активна. Чтобы она стала активной — кликните мышкой по записи (указано стрелкой) и затем кликаем Установить.

Всё. приложение установлено. В правом верхнем углу видим серенького жучка.

А серенький потому, что он неактивный, т.е. не включён. Если расширение установили, то следующий раздел не читаем — смотрите как пользоваться.

________________________________________________________________________

Вариант, если браузер Firefox ещё НЕ УСТАНОВЛЕН на компьютере . Сначала закачиваем расширение Firebug с браузера Chrome, а затем устанавливаем сам Firefox.

Для начала заходим на сайт дополнений . Открывается страница загрузки.

Нажимаем кнопку Загрузить сейчас . Открывается окно.

Хотите узнать больше про Фаефокс? нажмите соответствующую кнопку. Но мы нажмём ссылку всё равно загрузить . Производится загрузка дополнения.

В левом нижнем углу браузера Firefox видим скачанный файл. Этот файл (цифры в названии могут отличаться, т.к. эта актуальная версия на момент написания статьи). Устанавливаем браузер Firefox и затем добавляем в него скачанное расширение Firebug.

——————————————————————————

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

Сначала его нужно активировать. Делается это так:

— кликнуть левой кнопкой мыши по иконке жучка в правом верхнем углу браузера: либо

— использовать горячие клавиши вызова F12 .

Открывается рабочая область (обведена красным).

Начинаем анализ сайта (пример сайт). Сначала нажимаем на значок в рабочей области (находится справа от жучка).

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

Пример использования плагина Firebug

Разберём конкретный пример -посмотрим код заголовка статьи и изменим его цвет в реальном времени. Открываем веб-страницу и видим статью названную Программа для чтения PDF- файлов - Stduviewer. Запустили программу (нажали F12) и подвели мышку к этому заголовку

В рабочей области внизу видим, что за вывод этого элемента отвечает код:

Программа для чтения PDF- файлов — Stduviewer

И в этой же рабочей области справа видим СSS:

A, a:link, a:visited, #sidebar a, #sidebar ul, .post-title, .page-title, .post-title a:link, .post-title a:visited, #slideshow .post-title a {

Видно, что заголовок статьи выводится с цветом #265076. Попробуем, а как будет смотреться заголовок с таким цветом #00FFFF? Для этого в рабочей области выделяем #265076 и вместо этого цвета прописываем #00FFFF и видим результат.

Цвет заголовка изменился. Но дело в том, что на сервере сам код не изменился и необходимо вручную ввести правку в код CSS.

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

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

Сегодня я проведу экскурс по одному из практических методов изучения 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.

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