Firebug

Firebug, как незаменимый помощник исследования и редактирования кода CSS

Создавая свой веб-сайт на одной из популярных CMS: Joomla, WordPress, Drupal, многие пользователи не имеют дизайнерских навыков, навыков программирования, поэтому зачастую используют уже готовые, скачанные из сети шаблоны сайтов, благо их в Интернете тысячи.

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

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

FIREBUG

Первое, что нам нужно для установки расширения в браузере Mozilla Firefox, это открыть любой поисковик и в строке поиска напечатать “firebug firefox”, кликаем на ссылку первого сайта в поисковой выдаче (как видно на скриншоте).

Поиск Firebug

После перехода на сайт дополнения, нужно нажать на кнопку “Добавить в Firefox”.

Добавить Firebug

Ждём несколько секунд и нажимаем кнопку “Установить сейчас”.

Установить дополнение Firebug

Получаем уведомление, что “Firebug был успешно установлен”.

Firebug успешно установлен

В правом верхнем углу панели браузера появилась кнопка расширения, которая отвечает за включение и выключение интерфейса управления (горячая клавиша на клавиатуре F12).

Управление Firebug

В открывшемся окне панели управления, слева размещена кнопка, после нажатия которой нам нужно навести курсор на элемент сайта, который мы хотим изменить и кликнуть по нему.

Панель управления Firebug

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

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

Внесенные изменения Firebug

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

Выключение Firebug

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

Обновление страницы

комментарии: 12

  1. У меня тоже не давно какая-то фигня нчалась. Перехожу на любой сайт, firebug открывается секунд на 5, потом закрывается.

  2. Суперский пост! Блог уже в ридере )

  3. Im thankful for the article post.Really looking forward to read more.

    • Thank you! I will delight you with new articles.

  4. Thank you for your blog article.Really thank you! Great.

    • Always happy to help, thanks for the comment.

  5. Thanks again for the blog article.Really thank you!

    • Please. All for you!

  6. И в Chrome отлично работает. Спасибо!

    • Всегда рад помочь. Обычно все популярные расширения имеют свои версии для основных интернет-браузеров. Считаю Firebug лучшим на сегодняшний день. Отлично работает в Google Chrome, Firefox, Opera.

  7. Очень практично и удобно пользоваться описанным дополнением. Нашёл как изменить стиль на сайте, который не получалось найти самому. Спасибо автору за наводку!

  8. полностью поддерживаю, такие же мысли были.

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