Сегодня речь пойдёт о мощном и удобном дополнении к FireFox под названием Firebug.
Функционал Firebug позволяет «на живую» изменять HTML и CSS-код и сразу видеть последствия этих изменений в браузере.
Также это мощное дополнение поможет верстальщику разобраться в запутанной HTML-структуре загруженной в браузере страницы.
Возможности Firebug не ограничиваются лишь работой с HTML и CSS. При помощи данного дополнения, значительно упрощается процесс отладки JavaScript, есть возможность просматривать данные, отправляемые серверу… Но это всё уже из другой оперы. Пока рассмотрим Firebug в качестве инструмента для верстальщика сайта.
Небольшая видеоинструкция по использованию Firebug верстальщиками сайтов.
Вот сайт Firebug (описание и загрузка расширения): с 2017 года Firebug встроен в браузер «Мозилла Файерфокс» в виде «Инструментов для вебразработчика» (или как-то примерно похоже).
В качестве развлечения и чтобы проиллюстрировать дополнительные возможности этого мощного дополнения, вот такое видео:
Дополнительные знания по использованию FireBug можно получить из статьи про CSS-framework, где я его применяю в качестве основного инструмента для анализа кода.
Автор: Андрей Морковин.
Ещё материалы по этой теме:
- CSS-framework, или Как упростить процесс вёрстки
- «Резиновый» блок с закруглёнными углами на Div
- Вертикальное выравнивание блока: CSS, HTML, Div
- Работа с тегом <div> — основным инструментом блочной вёрстки
- Условные комментарии
Комментарии:
Дмитрий
Абсолютно с вами согласен. Файрбаг незаменим, даже при моем скромном его использовании. С удовольствием ознакомлюсь с вашей инструкцией, наверняка открою для себя что-нибудь новое. Спасибо.
Андрей Морковин
Многие устанавливают Firebug, потому что чувствуют, что штука интересная. И потом он стоит себе незадействованный. Статья имеет целью подтолкнуть таких товарищей к изучению этого расширения и использованию его в работе.
Очень хороший плагин.
motor2hg
Подгонка цифровых величин происходит нажатием клавиш стрелка вверх, стрелка вниз. Так для представленного в фильме примера надо ввести курсор в поле с 44px и удерживать клавишу со стрелкой вверх или низ меню будет перемещаться.
Андрей Морковин
Большое спасибо, так на много удобнее!
Never Lex
Подробное прочтение сайта фаербаг (не видел раньше его) прояснило многие неизвестные
Раньше использовал только для вёрстки и для того чтобы посмотреть ошибки в жаваскрипте, а ведь можно жаваскрипт дебажить о_0 и смотреть этапы загрузки страницы.
MrArthur
Фраза «Но это все уже из другой оперы», воспринимается как то не однозначно =) Первая мысль: «но это все уже есть в Опере, а тут мы расскажем о приимуществах фаирбага в фф»)) Спасибо за статью. Отличный блог!
Пётр
А в фаербаге для хрома есть инспектор блоков?