Что такое Firebug и почему его обязательно надо установить

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

Скажем, делая шаблон для InstantCMS все так или иначе сталкиваются с вопросом - как узнать где какой CSS стиль назначен?

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

Почему? Потому что сегодня веб-разработчику доступны инструменты позволяющие получать данные о странице еще быстрее и проще.

Мы, например, используем браузеры Mozilla Firefox с установленным плагином Firebug. И если у вас еще нет этого набора, рекомендуем срочно им обзавестись. Firebug - это инструмент который сэкономит вам массу времени.

Пример использования Firebug на скриншоте:

На скриншоте показана последовательность действий:

  • Я нажал F12
  • потом навел мышку на "Добро пожаловать"
  • в нижней части окна увидел HTML и CSS код выбранного элемента страницы и его положение в виде глубиномера.

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

Помимо аудита кода, Firebug позволяет отслеживать все запросы, посыламые страницой через ajax и производить удобную отладку javascript.

Установите Firebug прямо сейчас и почувствуйте себя хозяином ситуации :)

Скачать Mozilla Firefox: http://www.mozilla-europe.org/ru/

Установить Firebug (открывать в мозилле): https://addons.mozilla.org/ru/firefox/addon/1843 *

* Для установки, на странице Firebug'а нажмите "Добавить в Firefox". В верхней части окна может появится предупреждение о том что загрузка заблокирована - нажмите "Настроить" и разрешите загрузку с этого сайта.

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

Спасибо за внимание, надеемся что этот материал окажется полезен :)

P.S. Это не реклама, мы никак не заинтересованы в продвижении именно этих продуктов. Просто рекомендация ;)

Комментарии (7)
0 29 мая 2008 в 10:45 0
no avatar
А мне понДравилась ета штука. Вот еслиб она еще и редактировала(сохраняла) на лету на сайт - ВАЩЕ! ;)
InstantCMS 29 мая 2008 в 14:46 +4
small user social cms
я когда установил, уже через неделю думал как же раньше то без нее обходился ))
Anonimus 31 августа 2008 в 19:00 0
small user social cms
Если учесть что я новичёк в сайто строительстве, то я бы без этого очень долго корпел бы над шаблоном
установил с перспективой и не зря, пригодилось)))
Andrei 22 августа 2010 в 01:32 0
small user social cms
Не могу разобраться. Помогите. Как вносить исправления в html??? Например я переменил стиль, мне понравилось как выглядит, а как теперь найти html файл в который вносить исправления????
Nivil 29 июня 2011 в 09:27 0
small user social cms
не в html, а в temlate.php
mihalich 29 июня 2011 в 10:08 0
no profile
Например я переменил стиль.....
Тогда смотри тут /templates/твой шаблон/css/ файлик style.css
Модератор Реальности 24 ноября 2014 в 06:11 0
no profile
у меня в Хроме от гугла работает подобная штука очень помогает popcorn