Расширение firebug. Как пользоваться Firebug

Последнее изменение поста: Февраль 1, 2019

Давно хотел написать статью, как пользоваться Firebug плагином. Firebug – это расширение в браузер Mozilla FireFox. Название плагина можно перевести как жук пожарный или что-то в этом роде. Плагин этот достаточно популярный и мощный инструмент для веб-разработки. Читайте также, как скопировать дизайн с чужого сайта.

В другие браузерах тоже можно Firebug установить, но он обделен функционалом и называется Firebug Lite. Для браузера Опера есть аналог, и называется это дополнение Opera Dragonfly. В этой статье пойдет речь только о плагине Firebug для браузера Mozilla Firefox.

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

Возможности Firebug

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

В статье по корректировке дизайна сайта, я писал об одном хорошем инструменте для вебмастеров - Web Developer. Там было описано, как с помощью Web Developer можно подкорректировать шаблон сайта, а именно: шрифт, цвет, ссылки, да и вообще, все что угодно.

С Firebug можно делать все то же самое, но только проще и намного круче. Плагин Firebug - отличный инструмент для корректировки HTML-разметки, отладки CSS и JavaScript.

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

Перейдите в браузере Mozilla Firefox «Инструменты» —> «Дополнения» и в поисковом окошке введите Firebug, затем нажмите «Enter». Должен появиться список расширений, в которых присутствует слово Firebug. Найдите из этого списка плагин Firebug, а затем щелкните правее от него «Установить».

Установка Firebug

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

Установка Firebug

Редактирование стилей CSS

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

Щелкните по жучку в правом верхнем углу экрана, чтобы запустить Firebug. Если Вы нажмете «Ctrl» + «F12» - также запустится Firebug, а если нажать «F12», то Firebug откроется в новом окне браузера.

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

Редактирование стилей CSS с Firebug

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

Редактирование стилей CSS с Firebug

1. Кликните по кнопке «Анализировать». После этого подведите курсор к оранжевой полосе, как показано на скриншоте.

2. Теперь щелкните по оранжевой полосе левой клавишей мыши. Но перед этим убедитесь чтобы был выделен рамкой именно тот элемент в шаблоне, который Вы собираетесь редактировать.

3. В правом окошке отобразился стиль CSS, а в левом HTML разметка этого элемента. Найдите в правом окошке HTML-цвет, который отвечает за цвет этой полосы.

Смотрите на скриншот выше. Стрелка №3 указывает на этот код. Если подвести курсор мыши на этот код – появится образец этого цвета. Так Вы можете убедиться, что этот цвет идентичен полосе, которую мы собираемся изменить.

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

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

Сейчас Вы можете изменить цвет полосы меню прямо из браузера. Для этого в правом окошке Firebug надо щелкнуть по коду, на который указывает стрелка №3 и ввести новый цветовой код. Так как я хочу изменить цвет полосы на черный цвет, то мне нужно ввести код #0000000. С помощью программы HTML Colors 2000, Вы можете подобрать нужный Вам цвет. В уроке 74 я писал об этой программе. В этом же уроке Вы найдете ссылку для ее скачивания.

Изменения можно производить с помощью курсорных клавиш – стрелка вверх и вниз.

Изменив цвет, Вы сразу же увидите готовый результат в шаблоне. Заметьте, что даже не пришлось редактировать файл style.css. На самом деле плагин Firebug изменил полоску цвета только в памяти компьютера, но не в самом файле стилей. Если вы сейчас обновите страницу, то полоса меню примет свой первоначальный оранжевый цвет.

4. Зеленая стрелка №4 показывает, в каком файле нужно редактировать цвет и в какой строке. Теперь нам остается только открыть файл стилей style.css и отредактировать цвет в строке border-bottom: 4px solid #EE6007;

5. Эта стрелка показывает, какой HTML-блок отвечает за вывод этой полосы меню.

Давайте теперь рассмотрим, за что у нас отвечать строка ниже height: 60px;. Эта строка отвечает за ширину бордюра меню, где написаны рубрики блога. Чтобы в этом убедится, подведите курсор к началу этой строки и щелкните по красному значку в виде красного перечеркнутого кружка. Белая полоса меню с названием рубрик исчезнет.

Теперь, мы точно знаем, что эта строка отвечает за белую полосу меню с рубриками блога. Если в этой строке изменить значение 60px, например на 90, то полоса станет шире. Точно также Вы можете поэкспериментировать со строками, которые находятся ниже.

Изменение размеров шаблона с помощью плагина Firebug

Изменить размер шаблона довольно просто, но повозиться придется. Все не так просто, как может показаться

Щелкните по кнопке анализировать, а затем щелкните в шаблоне на блок, например на левый сайдбар. Если хотите изменить размер сайдбара, то щелкать надо не в середину сайдбара а по краю, чтобы выделить именно сайдбар, а не то что находится внутри. Потом в правом окошке Firebug кликните по вкладке «Макет», а затем нужно менять размер, куда указывает синяя стрелка. Вкладка «Макет» показывает размер блока и отступы.

Изменение размеров шаблона с помощью плагина Firebug

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

В левом HTML-окошке стрелка указывает на блок <div>, который отвечает за выделенный сайдбар.

Как изменить размер и цвет текста заголовков <h1>, <h2>…..<h6>

Тренироваться можете прямо на моем блога, на главной странице. Почему именно на главной? Потому что я менял размер шрифта заголовка и его цвет на главной странице.

Нажмите анализировать, а потом щелкните по любому заголовку в статье. В правом окошке стилей CSS Вы увидите приблизительно следующие коды CSS.

title {
color: #353434;
font-family: Arial,Helvetica,Sans-serif;
font-size: 24px;
font-weight: bold;
line-height: 24px;
margin: 0 0 10px;
padding: 0;

В строке color: #353434; щелкните по коду и впишите другой HTML-цвет. Кликать нужно в зону, которая отмечена желтым цветом. После щелчка по коду, можете менять цвет заголовка курсорными клавишами – стрелка вверх и вниз.

Теперь мы изменим шрифт заголовков. Щелкните в строке font-family: Arial,Helvetica,Sans-serif; в зоне желтого цвета. Теперь курсорными клавишами вверх или вниз подберите шрифт, который Вам нравится больше.

В строке font-size: 24px; можете изменить в заголовке размер шрифта.

В строке font-weight: bold; можно изменить толщину шрифта.

Изменяя значение в этой строке line-height: 24px;, меняется расстояние заголовка между строками.

Изменяя три значения в этой строке margin: 0 0 10px;, текст заголовка можно отодвинуть от левого края, поднять выше или опустить.

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

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

Поделиться статьей с друзьями


26 Comments

  1. Такой плагин есть и для Хрома

    Ильдар
  2. Спасибо Юрий!
    Отличный мануал пользования жуком! У меня все никак руки не доходили найти информацию, а тут она сама пришла!

    Сергей Медведев
  3. Сергей, это я написал всего несколько примеров, как пользоваться жуком, но на самом деле возможностей у этого жука много. Мне этот плагин вообще очень нравится

  4. Да, есть и для Chrome. Называется этот плагин Firebug Lite. Об этом я писал в статье.

  5. А где ссылки по которым можно скачать? В самом начале статьи упоминается “для Опера возможность скачать”, а ссылки нет. И ещё как от специалиста хотелось бы услышать отзыв о моём сайте http://rem-dom-teh.at.ua/ . В сутки от 60 до 110 уникальных посетителей, но очень хочется больше. Платные методы и уникальность статей не нужно – платить нечем, а уникальные статьи есть. Сам понимаю, что чего то не хватает, самую малость, а что – разобраться не могу. На других сайтах, с подобной тематикой, такому количеству были бы безумно рады, хотя по выдаче они далеко впереди меня. Но я не люблю останавливаться на пол дороги, если делать, то чтобы не стыдно было. Удачи!

  6. Юрий, а вы в коде хорошо разбираетесь?

    Сергей Медведев
  7. Нет, Сергей, плохо разбираюсь я в коде.

  8. Александр, ссылки были на скачивание, только их не было видно. Сейчас я все исправил и ссылки видны. Сайт Ваш потом чуть позже посмотрЮ, как только будет время.

  9. У меня у самого ошибок хватает на блоге, а времени нет с ошибками разбираться. 🙂

  10. Жаль, а то я запарился с ошибками в коде блога! 🙂

    Сергей Медведев
  11. Суперский плагин, в работе с кодом здорово выручает, для вебмастера именно то что надо.

    happyweblife
  12. Доброго времени суток. У меня следующий вопрос: как установить данный плагин при отключенном интернете? – Слышал что это возможно с помощью добавления в директорию с Firefox специального файла. Буду благодарен, если дадите ответ.

    Alex
  13. Здравствуйте. Даже не знаю, как это можно осуществить без Интернета. Наверное на этот вопрос быстрее даст Google ответ.

  14. И как в нём найти, какой именно файл редактировать ? То, что он показывает всё – это понятно, можно в любом браузере то же самое сделать. А как найти конечный файл для редактирования ?

    Алекс
  15. Вы вообще урок читали? В уроке все написано. Читайте в уроке “Редактирование стилей CSS”.

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

    Alex
  17. Спасибо за совет. А вот на мой вопрос так и не ответили в итоге )

    Алекс
  18. Если вы про блоки div или другие HTML-коды, то нахожу я их своим способом, который нигде не описан. Не думаю, что он всем подойдет. Я об этом не писал в уроке, потому что не назвал бы такой способ хорошим. Я часть HTML кода копирую, а потом ищу его через файловый менеджер Total Comander. Обычно это помогает, но не всегда. Лучше конечно инструкцию почитать по firebug. В основном мне приходилось редактировать CSS коды.

  19. Я инструкцию не копировал, а написал только то, что знаю. Вы наверное понимаете, что для описания этого плагина создан целый сайт. Как же я могу в один урок все написать? Вот, пожалуйста, вам ССЫЛКА на сайт по плагину и изучайте.

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

    В какой файл и где это место, хочется так вставить, чтобы ничего не запороть.
    Спасибо заранее за ответ

    Сергей
  21. Сергей, этого не пишут потому, что в правом окошке показано в каком файле менять и в какой строке. Специально для вас сделал скриншот. Посмотреите его по этой ссылке: s020.radikal.ru/i708/1306/d0/392d3257bf91.png

  22. Спасибо большее! Я чего то сразу не вкурил.. вообще 4 день сижу за созданием магазина. Ранее с этим не работал. Еще раз спасибо

    Сергей
  23. Хотел убрать у себя внизу надпись “старые записи”, заменив ее после на нумерацию, но Firebug мне выдал файл deafault.css. В админке я его не нашел, на ftp так же. Как решить данную проблему?

    Андрей
  24. Файл deafault.css – это файл стилей. В этом файле вы не удалите старые записи. Вы смотрели в правую колонку, где Firebug отображает стили. Чтобы удалить старые записи и установить навигацию, надо искать файл, который отвечает за главную страницу. В моем шаблоне – это файл post-page.php В другом шаблоне может быть файл page.php или index.php

  25. Как настроить значок печати на странице ??? 😐

    Помогите пожалуйста с настройками firebug
  26. О какой печати идет речь?

Бесплатный практикум по заработку на партнерских программах

 

Путешествие к стабильному заработку в интернете всего за 7 дней. Курс адаптирован для понимания и моментального внедрения даже полным новичком

на Вашу почту было отправлено письмо для подтверждения подписки

Подписаться на новости сайта

Получайте новые статьи на свой Email

На Вашу почту было отправлено письмо для подтверждения подписки.