Расширение firebug. Как пользоваться Firebug

(Кликайте на вкладки выше, чтобы посмотреть скриншот каждой.)

Firebug интегрируется с браузером Firefox, чтобы замечательно обогатить инструментарий разработчика. Вы сможете редактировать, отлаживать и исследовать CSS, HTML и Javascript вживую, на любой веб-странице.

Просто и доступно

Firebug — всего в одном клике от Вас, но он никогда не помешает. Вы можете открыть Firebug в отдельном окне, или сделать его полосой внизу браузера. Firebug также дает Вам контроль над выбором сайтов, для которых Вы его используете.

Узнать больше…

Инспектируй и редактируй HTML

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

Узнать больше…

Построй супер-совершенный CSS

Вкладка CSS в Firebug расскажет Вам все, что нужно знать о стилях на странице, и если Вам что-то не очень нравится, можно сделать изменения, которые отобразятся сразу же.

Узнать больше…

Смотри на CSS метрики

Когда CSS-контейнеры не выстраиваются нужным образом — иногда сложно понять, почему. Позвольте Firebug быть Вашими глазами, и он измерит и покажет все сдвиги, margin, padding, рамки и размеры для Вас.

Узнать больше…

Мониторинг сетевых запросов

Иногда страницы загружаются очень долго, но почему? Может, Вы написали чересчур много javascript? Забыли сжать изображения? Или серверы рекламодателей отдыхают в сторонке? Firebug покажет все с точностью до файла.

Узнать больше…

Отлаживай и профилируй JavaScript

Firebug включает в себя мощный javascript отладчик, который позволяет приостанавливать выполнение в любой момент и анализировать все, что угодно. Если Ваш код подтормаживает, используйте javascript профилировщик, чтобы измерить производительность и быстро найти узкие места.

Узнать больше…

Быстро находи ошибки

Когда что-то идет не так, Firebug мгновенно информирует Вас и дает детализированную полезную информацию об ошибках в Javascript, CSS и XML.

Узнать больше…

Исследуй DOM

Document Object Model — громадная иерархия объектов и функций. Firebug позволит Вам быстро находить нужные DOM-объекты и на лету редактировать их.

Узнать больше…

Выполняй JavaScript на лету

Командная строка — один из древнейших инструментов программиста. Firebug дает Вам старую добрую командную строку для javascript, дополненную некоторыми современными удобствами.

Узнать больше…

Логирование для JavaScript

Иметь хороший javascript отладчик — это, конечно, здорово, но иногда самый быстрый способ найти ошибку — это просто вывести максимальное количество информации. Firebug дает Вам набор мощных функций логирования, которые позволяют быстро получить нужные ответы.

Узнать больше…

документацияблог (англ.)обсуждения (англ.)открытый кодписьмо автору Firebug

Хотите использовать Firebug в IE, Opera или Safari?

Прочитайте это

Большое спасибо Jamey Boje за дизайн логотипа Firebug.

Firebug — зарегистрированная торговая марка Parakey, Inc. Оригинальный сайт http://getfirebug.com, перевод Ильи Кантора.

Для вопросов — forum.javascript.ru

Давно хотел написать статью, как пользоваться Firebug плагином. Firebug – это расширение в браузер Mozilla FireFox. Название плагина можно перевести как жук пожарный или что-то в этом роде. Плагин этот достаточно популярный и мощный инструмент для веб-разработки. Читайте также, как скопировать дизайн с чужого сайта.

В другие браузерах тоже можно Firebug установить, но он обделен функционалом и называется Firebug Lite. Для браузера Опера есть аналог, и называется это дополнение Opera Dragonfly. В этой статье пойдет речь только о плагине Firebug для браузера Mozilla Firefox.

Я Вам покажу только некоторые примеры, как пользоваться этим плагином, а более подробную инструкцию, можно почитать на сайте firebug.ru.

Возможности Firebug

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

В статье по корректировке дизайна сайта, я писал об одном хорошем инструменте для вебмастеров — Web Developer. Там было описано, как с помощью Web Developer можно подкорректировать шаблон сайта, а именно: шрифт, цвет, ссылки, да и вообще, все что угодно.

С Firebug можно делать все то же самое, но только проще и намного круче. Плагин Firebug — отличный инструмент для корректировки HTML-разметки, отладки CSS и JavaScript.

Как пользоваться Firebug

Перейдите в браузере Mozilla Firefox «Инструменты» —> «Дополнения» и в поисковом окошке введите Firebug, затем нажмите «Enter». Должен появиться список расширений, в которых присутствует слово Firebug. Найдите из этого списка плагин Firebug, а затем щелкните правее от него «Установить».

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

Редактирование стилей CSS

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

Щелкните по жучку в правом верхнем углу экрана, чтобы запустить Firebug. Если Вы нажмете «Ctrl» + «F12» — также запустится Firebug, а если нажать «F12», то Firebug откроется в новом окне браузера.

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

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

1. Кликните по кнопке «Анализировать». После этого подведите курсор к оранжевой полосе, как показано на скриншоте.

2. Теперь щелкните по оранжевой полосе левой клавишей мыши. Но перед этим убедитесь чтобы был выделен рамкой именно тот элемент в шаблоне, который Вы собираетесь редактировать.

3. В правом окошке отобразился стиль CSS, а в левом HTML разметка этого элемента. Найдите в правом окошке HTML-цвет, который отвечает за цвет этой полосы.

Смотрите на скриншот выше. Стрелка №3 указывает на этот код. Если подвести курсор мыши на этот код – появится образец этого цвета. Так Вы можете убедиться, что этот цвет идентичен полосе, которую мы собираемся изменить.

Установите курсор мыши перед началом строки, в которой мы только что изменяли цвет. Вы увидите красный запрещающий значок в виде перечеркнутого кружка (смотрите скриншот выше). Если щелкнуть по этому кружку, то Вы отключите этот стиль CSS и полоса в шаблоне исчезнет.

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

Сейчас Вы можете изменить цвет полосы меню прямо из браузера. Для этого в правом окошке Firebug надо щелкнуть по коду, на который указывает стрелка №3 и ввести новый цветовой код. Так как я хочу изменить цвет полосы на черный цвет, то мне нужно ввести код #0000000. С помощью программы HTML Colors 2000, Вы можете подобрать нужный Вам цвет. В уроке 74 я писал об этой программе. В этом же уроке Вы найдете ссылку для ее скачивания.

Изменения можно производить с помощью курсорных клавиш – стрелка вверх и вниз.

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

4. Зеленая стрелка №4 показывает, в каком файле нужно редактировать цвет и в какой строке. Теперь нам остается только открыть файл стилей style.css и отредактировать цвет в строке border-bottom: 4px solid #EE6007;

5. Эта стрелка показывает, какой HTML-блок отвечает за вывод этой полосы меню.

Давайте теперь рассмотрим, за что у нас отвечать строка ниже height: 60px;. Эта строка отвечает за ширину бордюра меню, где написаны рубрики блога. Чтобы в этом убедится, подведите курсор к началу этой строки и щелкните по красному значку в виде красного перечеркнутого кружка. Белая полоса меню с названием рубрик исчезнет.

Теперь, мы точно знаем, что эта строка отвечает за белую полосу меню с рубриками блога. Если в этой строке изменить значение 60px, например на 90, то полоса станет шире. Точно также Вы можете поэкспериментировать со строками, которые находятся ниже.

Изменение размеров шаблона с помощью плагина Firebug

Изменить размер шаблона довольно просто, но повозиться придется. Все не так просто, как может показаться

Щелкните по кнопке анализировать, а затем щелкните в шаблоне на блок, например на левый сайдбар. Если хотите изменить размер сайдбара, то щелкать надо не в середину сайдбара а по краю, чтобы выделить именно сайдбар, а не то что находится внутри. Потом в правом окошке Firebug кликните по вкладке «Макет», а затем нужно менять размер, куда указывает синяя стрелка. Вкладка «Макет» показывает размер блока и отступы.

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

В левом HTML-окошке стрелка указывает на блок

, который отвечает за выделенный сайдбар.

к изменить размер и цвет текста заголовков

07.11.2012 11:21:59 Этот метод позволяет запустить FireBug почти в любом браузере!

Многие вэб разработчики пользуются дополнением к FireFox – FireBug, но что делать если нужно отладить страницу в другом браузере? Наверняка у большинства браузеров есть альтернативные плагины, но их нужно искать, устанавливать, привыкать … Есть способ лучше:FireBug Lite Есть несколько способов его применения

1. Нужно открыть нужную страницу, когда она загрузится выставить в адресную строку код:

   javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[]||F[e]('body')[]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');

   И нажать enter

2. Можно создать закладку в браузере, в строке адреса нужно задать код приведенный выше.

    Далее все тоже самое, что в первом пункте, но только нудно не курировать код в строку адреса, а нажимать на заготовленную закладку. Или можете просто перетащить ссылку на панель закладок.

• https://firebug.ru/
• https://dvpress.ru/urok-78-firebug-for-vebmastera.html
• https://oddler.ru/blog/i196