Урок 38 FireBug: необходимое дополнение Firefox для каждого вебмастера

firebug

Приветствую Вас! Сегодня мы поговорим о необходимом расширении для вебмастера FireBug. Это дополнение предназначено для браузера Mozilla Firefox , который является необходимым браузером для веб-разработчика.

Хоть я и любитель Opera, но без Firefox мне сложно обходиться. Одной из причин этого, как раз является дополнение под названием FireBug.

FireBug для Firefox:

  • абсолютно бесплатна
  • помогает посмотреть на то, как будет выглядеть страница, не изменяя код в шаблоне. Видоизмененный дизайн будет видеть только пользователь FireBug в режиме онлайн, то есть, Вы захотели посмотреть, как будет выглядеть страница после изменения размера шрифта, изменения фона и т. д., Вы моментально будете это видеть в Firefox
  • FireBug помогает отслеживает ошибки на сайте
  • есть возможность посмотреть скорость загрузки элементов страницы сайта и многие другие полезные  функции для web-разработчика

Установка FireBug на Mozilla Firefox

  1. Устанавливаете свежую версию Mozilla Firefox (на момент написания урока это версия 3.6.3)
  2. Используя Mozilla Firefox, переходите на официальный сайт дополнения FireBug (кстати, Вы можете на этом сайте узнать по подробнее об этом расширении)
  3. В правой части Вы увидите кнопку “Установить FireBug”, нажимаете на нее (во время написание поста, кнопка выглядела так):
    firebugforfirefox thumb Урок 38 FireBug: необходимое дополнение Firefox для каждого вебмастера
  4. Вас должно “перебросить” на mozilla.org и уже там Вы должны нажать на кнопку “Добавить в Firefox”:
    firebugforfirefox1 thumb Урок 38 FireBug: необходимое дополнение Firefox для каждого вебмастера
  5. В открывшемся окне выбираете “Установить
  6. Далее Firefox потребует перезагрузки, сделайте это (нажмите “Перезапустить Firefox” или закройте браузер и заново откройте его)
  7. Вот и все! Дополнение установлено!

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

  1. Чтобы задействовать FireBug для Firefox, нужно в правом нижнем углу браузера нажать на жучка:
    firebugforfirefox2 thumb Урок 38 FireBug: необходимое дополнение Firefox для каждого вебмастера
  2. В результате снизу “выедет” окошко данного расширения
  3. Теперь на странице можно выбрать любой объект, для этого нужно нажать на стрелку и потом щелкнуть на любом участке сайт/блога:
    firebugforfirefox3 thumb Урок 38 FireBug: необходимое дополнение Firefox для каждого вебмастера
  4. Справа можно видеть стиль данного объекта:
    firebugforfirefox4 thumb Урок 38 FireBug: необходимое дополнение Firefox для каждого вебмастера Например, мы хотим изменить цвет шрифта: для этого меняем значение (на рисунке показано цифрой 1) на значение, которое нам необходимо. Поставив другой цвет мы мгновенно видим, как изменился наш текст. И если это нас удовлетворяет мы находим в файле style.css строку, которая нам нужна (на картинке показано цифрой 2 строка в файле style.css (она тоже указана там же), которую нужно искать).
  5. Вот результат: я поставил цвет зеленым:
    firebugforfirefox5 thumb Урок 38 FireBug: необходимое дополнение Firefox для каждого вебмастера
  6. И если меня это устраивает, я в правой части FireBug ищу место, в каком файле нужно изменить свойство и в какой строке, что очень удобно.
  7. Также можно посмотреть скорость загрузки объектов страницы. Для этого нажимаете на стрелочку во вкладке “Сеть” и выбираете пункт “Панель включена”:
    firebugforfirefox6 thumb Урок 38 FireBug: необходимое дополнение Firefox для каждого вебмастера
  8. И просто обновляете страницу (в Mozilla Firefox можно путем нажатия Ctrl+R)
  9. Вот и результат:
    firebugforfirefox7 thumb Урок 38 FireBug: необходимое дополнение Firefox для каждого вебмастера Напротив каждого объекта показано время в миллисекундах, которое потребовалось на загрузку
  10. Также существует немало возможностей данного дополнения для Firefox, Вы можете изучить их на сайте разработчика, который я дал выше. Чтобы закрыть FireBug, достаточно нажать на кнопку:
    firebugforfirefox8 thumb Урок 38 FireBug: необходимое дополнение Firefox для каждого вебмастера

FireBug ставьте обязательно, он Вам пригодится не раз. Расширение очень полезное и мое любимое среди всех дополнений для данного браузера.

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

До скорой встречи на следующих уроках! Удачи Вам!

______________________________________

Следующий урок: Урок 39 Вкратце про язык CSS.

_________________
Сейчас все больше и больше требуются знания 1c бухгалтерии. Поэтому я вам рекомендую пройти курсы 1с бухгалтерия киев.
Постовой. Системы видеонаблюдения, по-моему, сейчас стоят практически везде, поэтому, возможно, Вам пригодится установка систем видеонаблюдения.

Подпишитесь на бесплатные уроки

Понравился урок? Вы не хотите пропускать новые бесплатные уроки по созданию, раскрутке и монетизации блога? Тогда подпишитесь на RSS или на электронный ящик и получайте новые уроки мгновенно! Также можете следить за мной в Twitter. Что такое RSS?

Похожие уроки

Ваш комментарий

  1. Островитянин09/06/2010 в 16:23

    Если кто то серьезно собирается разрабатывать собственные плагины или темы под WordPress, очень полезно будет установить следующие расширения FirePHP, FireCookie, FireQuery. Они встраиваются в FireBug и очень облегчают жизнь при поиске багов.

  2. Voronkoff15/06/2010 в 08:46

    Я вообще люблю ставить новые дополнения к Firefox, очень много всяких штук еще неизведанных, жаль только, что чем больше всяких плагинов, тем больше все тормозить начинает.

  3. Островитянин15/06/2010 в 19:10

    Здесь разумны баланс нужен. Под разные задачи я включаю определенный набор плагинов, а остальные выключаю. Хорошо бы было существуй плагин позволяющий переключаться между профилями(комбинациями включенных плагинов) и без перезагрузки.

  4. Voronkoff18/06/2010 в 20:59

    Наконец то разобрался с этим firebug-ом, отличная вещь оказывается. Сегодня дизайн форума одного настраивал с помощью него — понравилось, удобно :-)

  5. Тая09/01/2011 в 19:39

    Откликнитесь, пожалуйста, я вроде бы все правильно делаю в данной программе, а когда меняю значения цвета или шрифта в файле style.css ничего не меняется((( В чем дело?

    Может эта программа действует только на реальных блогах, ну которые уже в нете, а то я свой еще не переносила.

    Помогите разобраться!!!

    • Петр Александров13/02/2011 в 21:53

      Может Вы редактируете не тот файл style.css или не сохраняете?

  6. Наталья12/02/2011 в 15:09

    Все сделала, все получилось, сижу играюсь со стилями уже 4й день, отлипнуть не могу :)

    Почти все поменяла :)

  7. Никита14/06/2011 в 21:58

    Здрасте. Вот у меня есть сайт вот я сделал изменения — ну и как мне сохранить работу которую я сделал. Какой файл надо править на сервере или в шаблоне. Ну как сохранить или экспортировать stylesheet.css и html. ну подскажите пожалуйста люди

    • Петр Александров14/06/2011 в 21:36

      в файербаге, прям внизу показан какой файл нужно редактировать и вплоть то, какую строку. Смотрите внимательнее (там обычно, если стили то style.css)

  8. Валерий04/12/2011 в 22:26

    Жучок не появился, но можно запустить нажав F12/

  9. Валерий04/12/2011 в 22:10

    Нашёл жука, справа вверху.

  10. Алексей06/12/2011 в 21:05

    В опере тоже почти все эти возможности есть!

    ПКМ > Проинспектировать элемент...

    и плагины не нужны :)

    • Сергей26/01/2012 в 16:03

      Вот и я читаю, и думаю, чем же фраза

      любитель Opera, но без Firefox мне сложно обходиться. Одной из причин этого, как раз является дополнение под названием FireBug.

      всё-таки относится к Опере.

      В инструменте «Проинспектировать элемент» Оперы результат виден сразу наглядно и ничего сохранять/обновлять не нужно. Так что, Петр, Опера зря на задний план отправлена :)

  11. [...] Даю две ссылки, чтобы ознакомиться с описанием и установкой Firebug, понятыми новичкам.  Это ресурс sitogon  и  блог  wpnew. [...]

  12. Мария17/03/2012 в 19:06

    «6.И если меня это устраивает, я в правой части FireBug ищу место, в каком файле нужно изменить свойство и в какой строке, что очень удобно.»

    НЕ очень понятно как определить файл в котором надо проводить изменения и путь к нему. Ответьте по подробнее.

    • Петр Александров18/03/2012 в 13:43

      Просто наводите мышку к моем случае к слову style.css, там все показано (см. 4-ый пункт).

Наверх
Рейтинг@Mail.ru