Firebug для браузера Firefox — где скачать, как установить и как пользоваться

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

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

Должен признаться, что как инструмент для вебмастера мне больше по душе Google Chrome (бесплатно скачать последнюю версию, установить и настроить), который мне кажется более быстрым и функциональным, да и при серфинге по сети я пользуюсь им. Хотя, возможно, немаловажное значение при выборе браузера для работы с сайтом имеет сила привычки.

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

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

И несмотря на то, что подобные этому плагину для Мазила Фаерфокс инструменты есть сейчас и в других популярных браузерах (например, в Internet Explorer или в Opera), Firebug остается для меня приоритетным, поскольку в некоторых аспектах более удобен и функционален. Чем же хорош данный плагин?

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

Теперь рассмотрим вопрос установки Firebug. Скачать плагин можно с официальной страницы, где вы сможете найти самую последнюю версию. Причем гораздо проще установить это расширение можно, пользуясь непосредственно Мазилой. В этом случае, если вы подведете курсор к ссылке на последнюю версию (именно ее и следует загружать), то справа от нее появится зеленая кнопка «+Добавить в Firefox». При нажатии на эту кнопку напрямую начнется установка. После этого необходимо перезагрузить браузер, чтобы активировать расширение.

Если вы используете любой другой веб-обозреватель, то справа появится кнопка «Загрузить сейчас» мышиного цвета, которую и следует нажать. После этого возникнет табличка с линками «Узнать больше о Firefox» и «все равно загрузить». Идя по первой ссылке, получите дополнительную информацию о браузере, если нажмете на вторую,  появится стандартное окно загрузки, где получите предложение сохранить файл на компьютере. Выбираете место, куда поместить файл и нажимаете «Сохранить». Затем начнется стандартный процесс загрузки.

После его окончания загрузки открываете Фаерфокс, жмете в левом верхнем углу «Файл»-«Открыть файл». Находите место на жестком диске компьютера, куда определили скачанный файл и активируете его. Начнется установка, после окончания которой необходимо перезагрузить браузер. После перезагрузки в правом верхнем углу браузера Файрфокс увидите изображение жука, который является символом Firebug. Это значит, что плагин установлен и готов к работе.

Вот и весь процесс скачивания и установки. Как видите, ничего сложного нет. Теперь я поведаю, как пользоваться плагином Файрбаг. Конечно, главный упор сделаю на те функции, которые больше всего нужны вебмастеру и которыми пользуюсь я сам. Читайте далее внимательно и постарайтесь понять; поверьте, такие инструменты значительно облегчают жизнь вебмастеру.

Как пользоваться плагином Файрбаг для редактирования HTML кода

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

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

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

С левой стороны располагается структура HTML, справа — элементы каскадных таблиц стилей CSS. Теперь небольшой экскурс в основы языка гипертекстовой разметки. Дело в том, что опытные профессионалы своего дела верстают сайты с помощью так называемых блоков (блочная верстка), используя контейнеры (с помощью тега div), задавая нужное содержание той или иной области вебстраницы. А вот внешний вид элемента верстки призваны определять таблицы стилей.

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

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

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

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

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

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

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

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

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

<div id="access" role="navigation">

и кликаю по нему мышкой, чтобы выделить (можно саму строчку не выделять, просто так легче редактировать). Он окрасится в синий цвет. Затем нажимаю левой кнопкой мышки на «access», в результате само слово окрасится синим и будет доступно для редактирования.

Теперь, если просто удалить атрибут «id access», то увидите, что верхняя навигационная панель приобретет непрезентабельный вид. Давайте используем другое значение «id» и вместо «acsess» используем «acsess1». Сразу увидите, что принципиально изменился вид верхнего меню моего блога:

Можете сразу попробовать именно с этим примером, чтобы почувствовать, как работает расширение Firebug (если кто еще не понял или невнимательно читал статью, можно проделывать такие штуки с любой вебстраницей любого сайта в интернете!). При этом, как я уже сказал, реальных изменений в файлах CMS (движка сайта) не случится, поэтому редактируйте смело. И уже только после того, как результат в виде вновь смоделированного HTML кода вас удовлетворит, можно переходить к действительному изменению.

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

Здесь необходима какая-то зацепка, которая помогла бы в этом деле. Можно посмотреть, какой CSS класс или ID прописан в том или ином контейнере (он заключается в тег DIV). Кстати, в предыдущем примере я уже на это указал (будем искать файлы в документах PHP с id=»access»).

Теперь, когда зацепка есть, нужно как-то найти тот необходимый файл темы Вордпресс, при изменении которого добьемся необходимого нам результата. Рассуждаем следующим образом. За образование всех элементов темы в шапке блога обычно отвечает файл HEADER.PHP, поэтому ищем в его составе id=»access».

Если файл небольшой, как в моем случае, то не составит отыскать нужное место вручную. Если тема у вас сложная, то на помощь приходит опция «Поиск» бесплатного HTML и PHP редактора notepad ++, который способен отыскать нужный файл.

Для этого соединяемся по протоколу FTP с сервером с помощью вышеупомянутого редактора Нотпад и загружаем документ HEADER.PHP на компьютер. После этого выбираем из верхнего меню «Поиск»-«Найти» и в поле «Найти» вносим слово или словосочетание, по которому будем осуществлять поиск (напомню, для данного примера это id=»access»):

И через некоторое время поиск успешно заканчивается, NotePad plus plus выдает все строчки кода с искомым словом, выделив особым образом:

Теперь спокойно можно тут же должным образом изменить значение id (в нашем случае меняем «access» на «access1»). Сохраняем файл, после этого реальные изменения вступят в силу. Конечно, это простенький пример, гораздо чаще бывает так, что файлов с искомым словом наберется не один и не два, придется вносить несколько изменений.

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

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

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

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

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

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

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