Использование Firebug

Опубликовано: 2019-07-21
Редактировалось: 6 раз — последний 7 мая 2012
Просмотров: 416
0
: 0
Firebug - на сегодняшний день, я считаю, один из самых нужных инструментов, дизайнера шаблонов, без его использования в разы усложняется процесс верстки, нахождения ошибок, сокращается время изготовления шаблона. При том, что устройство инструмента, простое и легко доступное без специфических знаний.

Так, что же это такое Firebug? Это бесплатное приложение к браузеру Mozilla Firefox и Google Chrome, для Opera есть аналогичное дополнение Opera Dragonfly. Где найти? Можно через поиск дополнений к Вашему браузеру, или просто через поиск Яндекса или Гугла. Устанавливается автоматически. После установки у Вас на панели инструментов браузера появляется такой значок:



При нажатии на который открывается панель Firebug. Что это даёт? И как этим пользоваться практически? Например, Вы решили в ручную внести какие-то изменения по положению блока, текста или картинки в шаблоне. В левой колонке панели ищем класс который отвечает за это, при наведении курсора мышки на нужный класс в окне браузера он выделится синим полупрозрачным цветом, щелкаете на найденный класс и в правом окне появятся стили отвечающие за вывод этого класса с указанием номера строки и названием файла стилей (удобно когда файлов несколько).


Дальше есть два способа редактирования:
1. Способ. Открываем Ваш файл стилей редактором Notepad++ (или подобным с подсветкой кода и указанием строк), ищем нужную Вам строку (которую указал Firebug) и редактируем параметры класса. Затем закрываем файл стилей с сохранением изменений и смотрим в браузере, что получилось.
2. Способ. В найденном классе, в правой колонке со стилями, кликаем два раза на нужный параметр и делаем нужные изменения:


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

Еще способ использования и просмотра кода, Нажимаем кнопку (пункт 2. на рисунке) и наводим на нужный нам элемент на странице стрелкой мышки, в результате справа видим все стили элемента.




Еще один полезный инструмент это проверка скорости загрузки страницы:
На рисунке все понятно, как включить. Для чего это надо? Многие начинающие мастера делают ошибку не проверяя скорость загрузки страницы, размещают большое количество изображений, добавляют множество скриптов и т.д. В результате страница очень долго грузится, а это значит, что при переходе посетитель может не дождаться загрузки и уйти. А так Вы можете реально просмотреть, что именно долго грузится и или отказаться от этого элемента или как то соответственно отредактировать.

Я привел далеко не все функции Firebug, остальные Вы можете испробовать экспериментально, но те что я описал считаю наиболее нужные и просто уверен -обязательные для дизайнера.
Комментарии (0)

Нет комментариев. Ваш будет первым!

Случайное из блогов

skaz
Как подключить к Joomla не стандартный слайдер новостей, слайд шоу картинок. В интернете очень много...
9 - +6
samson
Доля покупок и оказания услуг в интернете все увеличивается. Нам все больше приходится платить он лайн....
3 - +8
samson
Темы для WP от Artisteer в админке имеют довольно много настроек, но в связи с тем, что у них не переведены...
8 - +6
artnikov
Доброго здоровья. В интернете МИЛЛИОН статей на тему, как вывести сайт за кратчайший срок в ТОП 3 или ТОП...
11 - +7
artnikov
Доброго всем здоровья! что единственное самое главное, а остальное, как нибудь получится. После...
13 - +6