Использование Firebug для решения проблем с CSS

Опубликовано: 24.08.2018

видео Использование Firebug для решения проблем с CSS

WordPress CSS Fix for IE6

Firebug - это дополнение для Mozilla Firefox, упрощающий поиск и изменение css-элементов в вашем дизайне. Он отображает исходный код вашего сайта на разделенном экране вашего браузера, что позволяет просматривать и изменять HTML/CSS с возможностью просмотра сделанных изменений.



Установка Firebug

В браузере Mozilla Firefox зайдите в меню Инструменты - Дополнения, в секции Получить дополнения в строке поиска наберите Firebug. Нажмите кнопку Установить. После установки вам нужно будет перезапустить ваш браузер.

Запуск Firebug

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


Полностью скачиваем чужой сайт и его шаблон на примере Landing Page. Скачать целиком чужой сайт

В левой части Firebug выводится HTML-код страницы, в правой - CSS, полученный из одной или нескольких используемых таблиц стилей, в зависимости от выбранного элемента.

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

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

Как альтернатива - клик правой кнопкой мыши определенной части веб-страницы и выбор "Инспектировать элемент с помощью Firebug" приведет к подсветке этой части в нижней панели Firebug .

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

Практическое использование

Давайте, к примеру, изменим цвет фона страницы. Выделим тег body в левой части окна Firebug , а в правой части изменим свойство элемента body - background-color - на другое значение (допустим #cccccc). И мы сразу же увидим в верхней части окна браузера, что изменится цвет фона страницы. Как только мы обновим страницу, все проделанные изменения пропадут и все вернется к первоначальному состоянию. Так что вы можете смело экспериментировать.

Поскольку изменения в CSS не сохраняются в файлах темы оформления, то нужно скопировать измененный код из Firebug и вставить в соответствующее место в css-файле. Firebug также подскажет номер строки, в которой должен находиться данный элемент.

В заключении можно сказать, что Firebug является незаменимым инструментом для визуального редактирования кода вашего сайта и устранения проблем с CSS. Ну и конечно же, он станет незаменимым помощником в изучении HTML и CSS для начинающего вебмастера.

IRC (Internet Relay Chat)
rss