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

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

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

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

Firebug

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

Поиск дополнения Firebug в поисковой системе
Поиск Firebug в Google

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

Добавление дополнения Firebug в Mozilla Firefox
Добавление в Firefox

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

Кнопка установки дополнения Firebug во всплывающем окне
Кнопка «Установить сейчас»

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

Окно с информацией об успешной установке Firebug
Успешная установка

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

Кнопка управления расширением Firebug на панели веб-браузера
Кнопка расширения на панели

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

Наведение курсора мыши на элемент сайта и отображение панели
Определение элемента наведением курсора мыши

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

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

Редактирование и внесение изменений в стили сайта
Внесение изменений в стиль

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

Определение элемента сайта и выключение Firebug
Определение элемента

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

Обновление страницы после эксперимента со стилями
Возврат к исходному коду

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

  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. полностью поддерживаю, такие же мысли были.

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