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

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

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

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

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

Поиск Firebug

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

Добавить Firebug

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

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

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

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

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

Управление Firebug

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

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

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

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

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

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

8. Для выключения Firebug нажимаем кнопку выключения справа или еще раз клавишу F12.

Выключение Firebug

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

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

Комментарии:

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

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

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

Leave a Reply

Ваш e-mail не будет опубликован.