Урок 78. Firebug – инструмент вебмастера. Как пользоваться Firebug

Последнее изменение поста: Декабрь 16, 2016

Firebug - инструмент вебмастера. Как пользоваться Firebug. Краткая инструкция  и примеры.

Урок 78. Firebug - инструмент вебмастера. Как пользоваться Firebug. ИнструкцияКрепкого здоровья Вам, друзья! Давно хотел написать урок важном плагине Firebug для вебмастеров. Firebug – это дополнение (расширение) к браузеру Mozilla FireFox. Firebug - самый популярный и мощный инструмент для веб-разработки

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

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

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

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

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

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

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

 

Установка Firebug

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

Установка Firebug

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

Установка Firebug

Плагин Firebug еще можно установите, перейдя по этой ссылке.

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

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

Щелкните по жучку в правом верхнем углу экрана, чтобы запустить 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.

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

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

На этом все. Надеюсь, урок для Вас был полезен и даже чем-то понравился.
______________________________
К уроку 79. Раскрутка блога, трафик на блог… Сервис «Free Avalanche»

Получайте свежие статьи на свою почту

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


26 Comments

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Оставить комментарий

Яндекс.Метрика