Плагин FireBug – экономия времени веб-разработчика

Плагин FireBug – это отличный инструмент, который интегрируется в браузер Firefox и значительно обогащает инструментарий веб-разработчика.
Для его установки Вам понадобится нескольких минут, однако в дальнейшем, Вы сэкономите просто колоссальное количество времени, а значит и денег :)

FireBug имеет массу возможностей и функций, о которых можно подробно почитать на сайте русской поддержки продукта.  Однако я бы хотел перечислить только те из них, которыми я наиболее часто пользуюсь:

1. Нахождение элементов мышью

Данная функция позволяет легко и быстро получить html и css код любого элемента на странице. Это очень полезно, т.к. не нужно рыться в css файлах и смотреть исходный html код. Стоит просто навести на элемент, и Вы сразу получите его свойства.

2. Мгновенное редактирование HTML и CSS кода.

Плагин FireBug позволяет делать экспериментальные изменения в HTML и CSS и сразу наблюдать их на странице. Причем вносить изменения очень просто. FireBug знает все теги, и предлагает Вам их выбор, т.е. не нужно знать их наизусть. Очень удобно организовано регулирование точных значений – Вам просто нужно нажать клавишу вверх или вниз, и значения сами будут изменяться.  Это очень удобно при верстке сайтов.

3.  Возможность определения всего каскада стилей, от родительского элемента до конечного.

Firebug показывает не только стиль конкретного элемента, а и стили всех элементов, от которых он что-то унаследовал. Причем наглядно видно, какой стиль переопределился а какой унаследовался. Это помогает решить много спорных ситуаций. Также, есть интересная функция отключения конкретного стилевого правила.

Для более наглядного понимания, можете посмотреть видеоролик, который я записал для Вас. В нем я демонстрирую некоторые возможности плагина. Для просмотра, кликните по миниатюре ниже:

Скачать видеоролик "Плагин FireBug – экономия времени веб-разработчика"

Так что применяйте на практике и экономьте свое время!

 Создан: 2009-10-11      Просмотров: 66246      Автор:Андрей Галямов

Комментарии:

Автор: Константин
Дата : 2009-10-13

И правда очень удобная штука! Жалко не для Оперы!

Автор: Александр
Дата : 2009-10-13

Супер! Как вспомню муки при поисках причин "разлесшегося" форматирования - вздрагиваю. Урок - самое ОНО. Спасибо!

Автор: Nataliya
Дата : 2009-10-13

Спасибо за неоценимую помощь для начинающих в области сайтостроения!

Автор: Виталий
Дата : 2009-10-16

Спасибо, Андрей! Очень ценный урок.

Автор: Иванов Андрей
Дата : 2009-10-17

спасибо за этот урок.

Автор: Александр Сахарчук
Дата : 2009-11-03

Благодарь за уроки!Век живи ,век учись!

Автор: йй
Дата : 2009-11-13

оказывается в опере тоже есть такая штука. "инструменты-дополнительно-средства разработчика" почти один в один как огнежук.

Автор: lORA
Дата : 2009-11-19

Привет) у меня почему-то нет панели редактирования(((( в чем проблема может быть, может в настройках дело?

Автор: Андрей
Дата : 2009-11-22

Спасибо, оч интересно

Автор: gerMAN
Дата : 2009-11-24

Спасибо автору сайта за полезную информацию!

Автор: dante
Дата : 2009-12-03

Для оперы есть аналог, называется Dragonfly. Но все же на мой взгляд, он не такой удобный как Firebug.

Автор: Алексей
Дата : 2009-12-04

Большое спасибо Андрей!!!Урок очень помог с настройкой стилей.И за все уроки огромное спасибо!!!Был бы рад знакомству.С пол года назад начал изучать HTML с Вашего сайта с нуля.Сегодня подготавливаю свой сайт.Вомногом благодаря Вашей помощи.Про Joomla уроки отдельное спасибо.Всё очень клёво и достойно!!!

Автор: Whiskas
Дата : 2009-12-31

Расказал то в чем разобраться ничего не стоит. А вот я не могу понять, допустим редактирую html, и мне потом нужно найти где он лежит. Вот как это сделать?

Автор: LynxBIT
Дата : 2010-01-26

Андрей огромное спасибо за твой ресурс! 2Whiskas Если вы редактируете html, значит как то нашли его))))

Автор: Михаил
Дата : 2010-02-21

оЧЕНЬ ХОРОШАЯ ПРОГРАММА СПАСИБО!

Автор: Александр
Дата : 2010-04-01

Огромное спасибо за сайт. Очень помог!!!

Автор: Андрей (12лет)
Дата : 2010-04-03

А нашел что то похожее к FireBug в Опере.Чтобы открыть нажмите Ctrl+Shift+i

Автор: Дмитрий
Дата : 2010-04-06

Урок не открывается даже после установки последней версии Flash.((( Черный фон и предложение скачать последнюю версию. Скачал раз десять и переустановил. Результата нет.

Автор: Aivar
Дата : 2010-05-12

Thanks

Автор: Сергей
Дата : 2010-05-23

Хорошая штука

Автор: peppi
Дата : 2010-05-27

огромное спасибо за ваши уроки!

Автор: Евгений
Дата : 2010-06-26

Спасибо !

Автор: Seoman
Дата : 2010-07-05

Уроки супер! Спасибо Андрюха =)

Автор: Ник_из_Сибири
Дата : 2010-07-10

в OPERA иметься инструмент "Проинспектировать элемент" вызывается: клик правой кнопкой по содержимому страницы - в выпавшем меню выбираем элемент {Проинспектировать элемент}

Автор: Евгений
Дата : 2010-07-15

А для explorer есть что-нибудь такое же?

Автор: Юра
Дата : 2010-09-02

МежГалактическая благодарность

Автор: Лёшик
Дата : 2010-09-23

Отличные уроки, всё просто и понятно, успехов в развитии!

Автор: Татьяна
Дата : 2010-09-29

Спасибо, и мне очень помогли!

Автор: Илья
Дата : 2010-10-13

Спасибо за полезный урок. Очень нужгая вещь. Но у меня возникла проблема. Андрей, подскажи, пожалуйста, я изменяю в коде название раздела (на сайте у меня также происходят изменения), закрываю "жука", обновляю страницу, а изменения в силу не вступают. Таже самая ситуация и с изменением любого другого элемента. Сайт на джумле. В чем могут быть причины? Может я что-то неправильно делаю? Очень буду рад ответу. Заранее спасибо.