Приветствую Вас! Сегодня мы поговорим о необходимом расширении для вебмастера FireBug. Это дополнение предназначено для браузера Mozilla Firefox , который является необходимым браузером для веб-разработчика.
Хоть я и любитель Opera, но без Firefox мне сложно обходиться. Одной из причин этого, как раз является дополнение под названием FireBug.
FireBug для Firefox:
- абсолютно бесплатна
- помогает посмотреть на то, как будет выглядеть страница, не изменяя код в шаблоне. Видоизмененный дизайн будет видеть только пользователь FireBug в режиме онлайн, то есть, Вы захотели посмотреть, как будет выглядеть страница после изменения размера шрифта, изменения фона и т. д., Вы моментально будете это видеть в Firefox
- FireBug помогает отслеживает ошибки на сайте
- есть возможность посмотреть скорость загрузки элементов страницы сайта и многие другие полезные функции для web-разработчика
Установка FireBug на Mozilla Firefox
- Устанавливаете свежую версию Mozilla Firefox (на момент написания урока это версия 3.6.3)
- Используя Mozilla Firefox, переходите на официальный сайт дополнения FireBug (кстати, Вы можете на этом сайте узнать по подробнее об этом расширении)
- В правой части Вы увидите кнопку “Установить FireBug”, нажимаете на нее (во время написание поста, кнопка выглядела так):

- Вас должно “перебросить” на mozilla.org и уже там Вы должны нажать на кнопку “Добавить в Firefox”:

- В открывшемся окне выбираете “Установить”
- Далее Firefox потребует перезагрузки, сделайте это (нажмите “Перезапустить Firefox” или закройте браузер и заново откройте его)
- Вот и все! Дополнение установлено!
Использование FireBug
- Чтобы задействовать FireBug для Firefox, нужно в правом нижнем углу браузера нажать на жучка:

- В результате снизу “выедет” окошко данного расширения
- Теперь на странице можно выбрать любой объект, для этого нужно нажать на стрелку и потом щелкнуть на любом участке сайт/блога:

- Справа можно видеть стиль данного объекта:
Например, мы хотим изменить цвет шрифта: для этого меняем значение (на рисунке показано цифрой 1) на значение, которое нам необходимо. Поставив другой цвет мы мгновенно видим, как изменился наш текст. И если это нас удовлетворяет мы находим в файле style.css строку, которая нам нужна (на картинке показано цифрой 2 строка в файле style.css (она тоже указана там же), которую нужно искать). - Вот результат: я поставил цвет зеленым:

- И если меня это устраивает, я в правой части FireBug ищу место, в каком файле нужно изменить свойство и в какой строке, что очень удобно.
- Также можно посмотреть скорость загрузки объектов страницы. Для этого нажимаете на стрелочку во вкладке “Сеть” и выбираете пункт “Панель включена”:

- И просто обновляете страницу (в Mozilla Firefox можно путем нажатия Ctrl+R)
- Вот и результат:
Напротив каждого объекта показано время в миллисекундах, которое потребовалось на загрузку - Также существует немало возможностей данного дополнения для Firefox, Вы можете изучить их на сайте разработчика, который я дал выше. Чтобы закрыть FireBug, достаточно нажать на кнопку:

FireBug ставьте обязательно, он Вам пригодится не раз. Расширение очень полезное и мое любимое среди всех дополнений для данного браузера.
Внимание новичкам! Сегодня мы немного затронули стили блога, коснулись файла style.css. В одном из следующих уроках я Вам расскажу о основах языка CSS, который помогает нам изменить цвет, шрифт, размер и т.п. Урок будет только один, дам только фундаментальные знания, которые необходимы для работы. Если Вас заинтересует данный язык, Вы сможете немало информации найти о данном языке в просторах интернета.
Скажу честно, я сам в CSS знаю немногое, но этого мне достаточно для выполнения поставленных мною задач. А без основы знания, Вам будет очень сложно, так что обязательно подписывайтесь на RSS-ленту. Не пропускайте необходимые самые полезные уроки WordPress.
До скорой встречи на следующих уроках! Удачи Вам!
______________________________________
Следующий урок: Урок 39 Вкратце про язык CSS.
_________________
Сейчас все больше и больше требуются знания 1c бухгалтерии. Поэтому я вам рекомендую пройти курсы 1с бухгалтерия киев.
Постовой. Системы видеонаблюдения, по-моему, сейчас стоят практически везде, поэтому, возможно, Вам пригодится установка систем видеонаблюдения.


Если кто то серьезно собирается разрабатывать собственные плагины или темы под WordPress, очень полезно будет установить следующие расширения FirePHP, FireCookie, FireQuery. Они встраиваются в FireBug и очень облегчают жизнь при поиске багов.
Я вообще люблю ставить новые дополнения к Firefox, очень много всяких штук еще неизведанных, жаль только, что чем больше всяких плагинов, тем больше все тормозить начинает.
Здесь разумны баланс нужен. Под разные задачи я включаю определенный набор плагинов, а остальные выключаю. Хорошо бы было существуй плагин позволяющий переключаться между профилями(комбинациями включенных плагинов) и без перезагрузки.
Наконец то разобрался с этим firebug-ом, отличная вещь оказывается. Сегодня дизайн форума одного настраивал с помощью него — понравилось, удобно
Откликнитесь, пожалуйста, я вроде бы все правильно делаю в данной программе, а когда меняю значения цвета или шрифта в файле style.css ничего не меняется((( В чем дело?
Может эта программа действует только на реальных блогах, ну которые уже в нете, а то я свой еще не переносила.
Помогите разобраться!!!
Может Вы редактируете не тот файл style.css или не сохраняете?
Все сделала, все получилось, сижу играюсь со стилями уже 4й день, отлипнуть не могу
Почти все поменяла
Здрасте. Вот у меня есть сайт вот я сделал изменения — ну и как мне сохранить работу которую я сделал. Какой файл надо править на сервере или в шаблоне. Ну как сохранить или экспортировать stylesheet.css и html. ну подскажите пожалуйста люди
в файербаге, прям внизу показан какой файл нужно редактировать и вплоть то, какую строку. Смотрите внимательнее (там обычно, если стили то style.css)
Жучок не появился, но можно запустить нажав F12/
Нашёл жука, справа вверху.
В опере тоже почти все эти возможности есть!
ПКМ > Проинспектировать элемент...
и плагины не нужны
Вот и я читаю, и думаю, чем же фраза
всё-таки относится к Опере.
В инструменте «Проинспектировать элемент» Оперы результат виден сразу наглядно и ничего сохранять/обновлять не нужно. Так что, Петр, Опера зря на задний план отправлена
[...] Даю две ссылки, чтобы ознакомиться с описанием и установкой Firebug, понятыми новичкам. Это ресурс sitogon и блог wpnew. [...]
НЕ очень понятно как определить файл в котором надо проводить изменения и путь к нему. Ответьте по подробнее.
Просто наводите мышку к моем случае к слову style.css, там все показано (см. 4-ый пункт).