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

FirebugСоздавая свой веб-сайт на одной из популярных 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 в браузере и сайт примет первоначальный дизайн и структуру.

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



Оцените инструкцию:
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...


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

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

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

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

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