Марафон v2.0

Урок 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”, нажимаете на нее (во время написание поста, кнопка выглядела так):
    FireBug — дополнение для Firefox
  4. Вас должно “перебросить” на mozilla.org и уже там Вы должны нажать на кнопку “Добавить в Firefox”:
    FireBug — дополнение для Firefox
  5. В открывшемся окне выбираете “Установить
  6. Далее Firefox потребует перезагрузки, сделайте это (нажмите “Перезапустить Firefox” или закройте браузер и заново откройте его)
  7. Вот и все! Дополнение установлено!

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

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

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

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

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

______________________________________

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

Новый марафон 2.0 от WPnew
С уважением, Пётр Александров.
Подпишитесь на бесплатные уроки

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

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

24 комментария

по хронологии
по рейтингу сначала новые по хронологии
Островитянин http://isleman.ru

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

com http://www.nalbatron.com/

Мне тоже нравится FireBug и при этом редактировать код и также в онлайн режиме видеть , что при этом происходит.

Voronkoff http://voronkoff.ru

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

Островитянин http://isleman.ru

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

Voronkoff http://Voronkoff.ru

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

com http://www.nalbatron.com/

Я часто играюсь ведь можно редактировать код и смотреть при этом что произойдет. Очень полезный плагин, который поможет разработкам сайтов.

IvYur http://kuponam.ru

Не просто удобная, а полезная. Я тоже с ним помучился, даже пару раз хотел убрать. Но теперь без него как то не так работается.

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

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

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

Автор
Пётр Александров

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

Наталья http://croatianlife.ru

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

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

Никита

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

Автор
Пётр Александров

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

Валерий http://1000kak.ru

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

Валерий http://1000kak.ru

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

Алексей

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

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

и плагины не нужны 🙂

Сергей http://www.4esnok.com/

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

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

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

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

Сергей

в опере можно вызвать меню OPERA DragonFly.

Мария http://vihra.ru

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

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

Автор
Пётр Александров

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

Мах http://bezobmana.in.ua

с файлом style.css понятно, как найти, а вот если мне РНР код поправить надо, как узнать в каком он файле находится? рассматривал со всех сторон фаер-баг, но так и не нашел путь или название файла для поправки кода! кто подскажет?

Автор
Пётр Александров http://wpnew.ru

Если главная страница - то index.php, если сайдбар, то sidebar.php и т.п. Если тема посложнее, я обычно скачиваю тему себе на компьютером и пользуюсь поиском Total Commander (аналогично этому http://wpnew.ru/udobnaya-rabota/total-commander-pochemu-on-nuzhen-bloggeru.html )

Ребят, такой вопрос. Нашла ошибку на странице с комментариями, там одна строчка некорректно отображается. Через FireBug (вкладка html) легко исправила его, результат сразу стал виден, но вот как теперь это исправить в самом шаблоне в реале?

Если в FireBug навести курсор на блок, где нужно исправить код, то там выдает строку типа: ...html/body/div/div...бла бла бла..../ (http://www.w3.org/1999/xhtml/). Что это значит? где править?В файле comment.php ничего непонятно. Признаться, если в CSS и HTML я хоть как то разбираюсь, то в PHP полный ноль. Помогите плиз,или укажите дорогу в нужном направлении)) спасибо

Доброго времени суток всем! Есть кто живой? Поменяла цвет панели меню с помощью Firebug, но ни крестом, ни пестом изменения не могу сохаранить - после обновления страницы цвет опять черный. Что я делаю не так или чего не делаю на финальном этапе?

Сергей Бондаренко http://it-uroki.ru/

Вера, ключевая фраза "помогает посмотреть на то, как будет выглядеть страница, не изменяя код в шаблоне".

Т.е. вы изменяете код с помощью Firebug, смотрите результат, если он устраивает, то уже меняете в коде шаблона (либо через админ-панель, либо непосредственно в файлах шаблона с помощью, например, Notepad++).

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