Firebug для Firefox! Как пользоваться расширением Firebug?

Всем привет!

Сегодня я расскажу вам об одном очень полезном расширении для браузеров 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 для Firefox

Скачать firebug для firefox можно на этой странице. На данный момент последней версией плагина является 1.12.6. Как вы уже, наверное, догадались, установка должна производиться из браузера Mozilla Firefox. Для скачивания плагина достаточно нажать на кнопку «+ Добавить в Firefox» и в появившемся окне «Установить сейчас»:

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

Если вдруг он по каким-то причинам у вас не появился, то запустить расширение можно с помощью «горячей клавиши» (F12).

Firebug для Chrome

Если вы пользуетесь браузером Google Chrome, то в этом варианте установки, открыт, должен быть именно он. Скачать firebug для chrome можно перейдя по этой ссылке. Далее, кликаем по кнопке «+ Бесплатно» и в появившемся меню жмем «Добавить»:

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

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

А теперь, как и обещал, покажу на конкретном примере, как пользоваться этим инструментом. Для запуска firebug достаточно кликнуть по значку жука или, как я уже упомянул выше, воспользоваться «горячей клавишей» F12. После запуска в нижней части страницы появится окно со следующим содержимым:

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

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

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

Как видно из скриншота ниже, я навел курсор мышки на участок кода <div class="menu"> и в верхней части страницы тут же подсветилось основное меню, за которое и отвечает это участок HTML — кода.

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

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

Что еще хочется сказать? Вы должны знать, что любая современная верстка сайта осуществляется при помощи блоков, заключенных в так называемые контейнеры div (блочная верстка). Вы их можете наблюдать на скриншоте выше.

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

Как редактировать HTML — код с помощью плагина Firebug

Для редактирования участка кода, выделите его кликом мышки и нажмите вкладку «Редактировать». Я покажу вам на примере все того же меню. В нем я с помощью плагина изменю название страницы с «Все статьи блога» на «Содержимое ресурса»:

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

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

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

После того, как нужный файл будет найден, вам потребуется зацепиться за один из классов или id (идентификаторов). Если брать все тот же пример с меню, я бы рассуждал так:

• За верхнюю часть ресурса (шапка блога) отвечает файл шаблона header.php. А далее смотрю на код в панели плагина Firebug и вижу, что все меню заключено в контейнер с классом Menu (class="Menu"). И теперь, чтобы отыскать нужный класс, для удобства воспользуюсь бесплатным текстовым редактором Notepad ++. Как пользоваться поиском редактора, я уже писал в статье про уникализацию шаблона. Там все подробно расписано.

Как редактировать CSS — код с помощью плагина Firebug

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

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

Как видно из примера ниже, я отключил позиционирование основного меню блога (выключил position: absolute;) и меню уехало в верхнюю часть страницы:

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

Давайте приведу в пример изменение цвета ссылки, т.к. данное действие с одной стороны является очень легким, но в тоже время вызывает вопрос у начинающих веб мастеров. Допустим, я хочу изменить цвет ссылки после каждого поста «Читать запись полностью >>» с синего на зеленый. Как я поступлю в этом случае?

Я запущу Firebug в Firefox и найду нужный мне участок кода, вы уже знаете, как это сделать. За синий цвет ссылки на моем блоге отвечает строчка color: #1821B5 (#1821B5 — это код цвета). Мне нужно изменить 1821B5 (синий цвет) на 2d8324 (зеленый цвет). В итоге я увижу нужные мне изменения:

Если цвет меня полностью устраивает, то я перехожу в файл шаблона style.css и меняю значение старого цвета, на новое. Но как отыскать нужный участок кода в файле style.css, отвечающий именно за цвет строчки «Читать запись полностью >>»?

Все очень просто! Если вы внимательно посмотрите на приведенный выше скриншот, то увидите что плагин firebug дает нам подсказку, которую я выделил красным контуром. В данном примере он нам говорит, что нужный участок кода находится в файле style.css (строка 18).

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

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

-->Подписаться на обновления блога<--

Как вам статья? А вы используете расширение firebug? Жду ваши комментарии!

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