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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.