FireBug — инструмент для веб-разработчиков
+1

Плагин для mozilla FirebugЗдравствуйте, дорогие читатели блога Популярно.com.

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

Firebug — это продукт с открытым исходным кодом. Он представляет возможность в режиме реального времени при просмотре страниц в браузере анализировать, редактировать, отлаживать HTML, CSS, JavaScript. Кстати, если вы заметили, по названию плагина можно догадаться к какому браузеру данный плагин. Огненный жук для огненной лисы, так сказать.

Чтобы установить данный плагин в браузер нужно перейти по адресу http://addons.mozilla.org/ru/firefox/addon/firebug/ и нажать на кнопку «Добавить в Firefox»

Добавить в Firefox

данный плагин очень и очень популярный

Самые популярные плагины для firefox

И это лишь подтверждает то, что перед нами хороший продукт.

Но думаю, хватит уже расхваливать его, и пора переходить к непосредственному знакомству.

После установки firebug в панели инструментов браузера появится значок с изображением жука

Запуск Firebug

Это и есть кнопка вызова плагина. Открыть плагин можно в отдельном окне либо в нижней части браузера. По-умолчанию firebug открывается в нижней части браузера

Окно браузера с firebug

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

  • Консоль
  • HTML
  • CSS
  • Сценарий
  • DOM
  • Сеть

Вкладки firebug

Разберем их по порядку.

Во вкладке «Консоль» можно просмотреть информацию об ошибках в JavaScript, CSS и XML если они есть. Firebug покажет только ошибки, доступные на странице, которую вы непосредственно просматриваете. В режиме просмотра будет доступна ссылка на отладчик.

Если активировать вкладку «HTML», то окно firebug разделится на две панели. В левой мы увидим структуру HTML, а в правой — таблицы стилей CSS

Отдельное окно Firebug

При работе в левой панели, в окне браузера автоматически подсвечиваются границы выбранного элемента. Причем сам элемент показывается голубым, поля padding — фиолетовым, а margin — желтым

Подсветка элементов

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

CSS в firebug

Если какое-либо правило, относящееся к выбранному элементу дублируется, то правило с меньшим приоритетом будет показано перечеркнутым.

Открыть свойства элемента можно возпользовавшись кнопкой «Анализировать элемент»

Анализировать элемент

либо указав на него непосредственно в коде.

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

Работа со свойствами CSS

Активировав вкладку «CSS» у нас откроется возможность вживую поработать со всеми таблицами стилей, доступными на сайте

Вкладка CSS

На вкладке «Сценарий» будут доступны теже действия, только уже для скриптов. Возможно понадобится предварительно включить данную панель

Вкладка Сценарий

После включения панели потребуется обновление страницы.

Переключившись на вкладку «DOM» вы узнаете все об объектных моделях документа.

И последняя вкладка — «Сеть». Она представляет возможность проанализировать запросы к серверам, время загрузки страницы и многое другое.

На этом я заканчиваю данный обзор, в котором я описал основные возможности плагина firebug для mozilla firefox.

До скорых встреч!

+1
Понравилась запись? Подпишитесь по RSS или E-mail!
Категории: Разное теги: . Прямая ссылка на запись.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *