Приветствую Вас! Сегодня мы поговорим о необходимом расширении для вебмастера 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с бухгалтерия киев.
Постовой. Системы видеонаблюдения, по-моему, сейчас стоят практически везде, поэтому, возможно, Вам пригодится установка систем видеонаблюдения.