Полезное        19 января 2014        268         26

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

Всем привет!

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

firebug для chrome

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

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

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

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

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

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

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

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

расширение firebug

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

плагин firebug-2

Но и это еще не все. Вы тут же можете внести необходимые изменения в код, не боясь напортачить! Дело в том, что плагин позволяет редактировать 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» и в появившемся окне «Установить сейчас»:

как пользоваться firebug-3

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

плагин firebug-4

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

Firebug для Chrome

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

firebug для chrome

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

firebug для opera

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

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

firebug для opera-8

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

файрбаг-10

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

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

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

плагин firebug-8

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

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

расширени firebug-9

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

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

расширени firebug-11

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

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

файрбаг-12

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

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

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

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

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

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

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

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

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

расширени firebug-13

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

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

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

расширени firebug-14

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

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

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

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

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

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

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

Обсуждение: 26 комментариев
  1. Привет…С прошедшим Крещением…

    Скажи, а для Оперы 18 он есть? Удобная штука…

    Из плагинов я очень жду пока RDS bsr для Оперы 18 сделают…Писал им, сказали, занимаются…

    [Ответить]

    Николай Коротков

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

    [Ответить]

    Александр

    С этим разберусь, сисадмин как-никак…Просто для 18 версии ничего нет…А переходить на 12 — это шаг назад, сам понимаешь =)Спасибо!

    [Ответить]

    Oleg

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

    [Ответить]

    Ответить
  2. Привет, Николай!
    Отличная информация! Установил расширение firebug сразу на 3 браузера. И знаешь, стрелочка возле жука есть только в Мазиле.. Похоже, как возможность пробовать редактировать на месте.
    Меня давно интересует вопрос, как менять любой элемент на сайте. Его конечно можно посмотреть, если выбрать «Просмотр кода элемента»,но вот потом найти в каком файле он находиться в теме для меня проблема. Была 🙂
    Спасибо, Николай!

    [Ответить]

    Александр

    Чтобы найти нужный код, наверно нужно знать к какому классу он относится, а от этого уже плясать в каком файле искать…Иль я ошибаюсь?

    [Ответить]

    Николай Коротков

    Александр
    Совершенно верно и я об этом упомянул в статье.

    [Ответить]

    Александр

    Кстати, у тебя кто-то интересовался как изменить цвет заголовка, вроде Евгений…Вот ответ на его вопрос…

    [Ответить]

    Николай Коротков

    Да, я ему уже ответил по этому поводу.

    [Ответить]

    Александр

    Так ты ему про файл style.css написал…Там сложно искать…А тут вот…Не отходя от кассы…))))Ну зайдет, увидит…Он так и не поменял у себя ничего…

    Николай Коротков

    Александр
    Я ему дал уже готовый ответ на его вопрос. Видимо он его еще не читал.

    Ответить
  3. Спасибо автору за информацию!!! Благодарен 😉

    [Ответить]

    Ответить
  4. Николай!
    Разобрался с расширением для браузеров Firebug! Действительно плагин Firebug очень полезен и заслуживает особого внимания! Но по мере установки будут возникать вопросы

    [Ответить]

    Николай Коротков

    Александр Иванович
    Будут вопросы, задавайте! По возможности, постараюсь на них ответить.

    [Ответить]

    Ответить
  5. Лично для меня браузер Google Chrome стоит на первом месте. И то, что я к нему привык — не главное. Действительно он шустрее и функциональнее. Mozilla Firefox у меня на втором месте хотя пользуюсь я ним только при необходимости. Оперой и I. E. пользуюсь только когда нужно быстро зайти на почтовые ящики Яндекса. В один захожу с Оперы, а на другой с I.E.

    [Ответить]

    Александр

    Здравствуйте…Что-то у вас жестокое определение…IE и быстро зайти….Меня терзают смутные сомнения…Вы с нашей планеты? 😀 😀

    [Ответить]

    Александр Иванович

    Александр здравствуйте!
    Чур меня! Что Вы. Я с нашей планеты! И зовётся она Донбасс (Украина) 👿
    Я Вас понял.
    Как говорят в Одессе — Таки Вы подумали, что я считаю I.E. самым быстрым в нашей Солнечной системе? Таки нет! Просто я не люблю лишний раз возиться с логинами и паролями. А ящиков на Яндексе у меня целых три. Так вот, я настроил так, что при нажатии иконки Оперы я сразу попадаю в первый почтовый ящик, а нажав на иконку I.E. в другой ящик.

    [Ответить]

    Александр

    Ну да…Юзабилити рабочей области самое главное…Я в Опере 18 работаю, для меня выход просто…Ctrl+Enter и выбрать нужный логин =)

    [Ответить]

    Александр Иванович

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

    [Ответить]

    Ответить
  6. P.S.
    Что то я разговорился и забыл о главном.
    Хоть Вы и говорите, что установить расширение для Google Chrome немного сложновато, но установил я его в Chrome, можно сказать, без сучка и задоринки. Всё работает чётко. А вот с установкой на Mozilla Firefox появились затруднения. 😐

    [Ответить]

    Александр Иванович

    Николай!
    Скажите пожалуйста. Какая версия Mozilla Firefox у Вас стоит?

    [Ответить]

    Николай Коротков

    Александр Иванович
    У меня стоит последняя на сегодняшний день версия 26.0. Я по возможности слежу за обновлением версий браузеров и стараюсь своевременно их обновлять.

    [Ответить]

    Ответить
  7. Николай!

    Большое спасибо за ответ.
    Я начал догадываться, что все мои затруднения с установкой плагина на Mozilla Firefox связаны с версией Мозилы. Не дожидаясь ответа обновил версию до 26.0. и все проблемы сразу сами собой решились. Всё работает так же чётко, как в Google Chrome
    Спасибо огромное.

    [Ответить]

    Ответить
  8. Юлия:

    Николай, спасибо огромное! Какая классная вещь!!! Я как раз нашла на одном сайте интересное оформление, и теперь могу посмотреть, как это кодируется в css. А то бы сутки сидела разбиралась по самоучителю html. Сейчас себе такое же оформление сделаю.
    firebug — прямо вот то, что нужно было! Пока только разбираюсь, но какие перспективы открываются.
    🙂

    [Ответить]

    Ответить
  9. imxo:

    давно искал подробную статейку, инструкцию как и что означают кнопки, и отыскал! Все подробно, осталось только «проглотить». Автору респект! 😎

    [Ответить]

    Ответить
  10. Максим:

    Николай
    Благодарю за прекрасную статью!
    Вопросов по устаноке плагина Firebug не должно возникать, а если и возникнут, то достаточно внимательно прочесть комментарии

    [Ответить]

    Ответить

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Поиск по блогу
Подписка на обновления

Введите Ваш e-mail:

rss

twitter

 google

Интересная информация
Хостинг от Макхост

ВОСПОЛЬЗУЙТЕСЬ ПРИ РЕГИСТРАЦИИ КУПОНОМ "blogiseo" И ПОЛУЧИТЕ 3 МЕС. БЕСПЛАТНОГО ИСПОЛЬЗОВАНИЯ ХОСТИНГА ПО ТАРИФУ МАК-10.