• Главная
  • История
  • Плагины
  • Новости
  • Обратная связь
 
27.11.2014

Firebug для Мазилы - Анализ программного кода сайта в два клика

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

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

Чтобы уменьшить временные затраты на редактирование программного кода сайта, многие вебмастера используют плагин под названием Firebug для Мазилы. Данный плагин полностью бесплатный, но при этом очень полезный и функциональный. Найти его можно на странице установки новых дополнений (просто введите слово «Firebug» в поиск).

Что же именно может данный плагин? Основная задача, которую решает Firebug - анализ программного кода просматриваемой страницы с возможностью редактирования этого кода и мониторингом результатов редактирования в реальном времени.

Сразу после установки дополнения в верхней части окна браузера появится новый элемент управления - кнопка с изображением жука. При нажатии на нее откроется рабочая панель Firebug (также данную панель можно открыть при помощи клавиши F12). Основная вкладка, с которой вам чаще всего придется иметь дело - HTML.

firebag_1

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

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

Это очень удобно в том случае, когда нужно узнать, как именно формируется тот или иной элемент (и затем подкорректировать его). К примеру, нам нужно изменить отступы области основного контента. Мы жмем на кнопку со стрелочкой и прямоугольником, выделяем на странице область основного контента и смотрим на правую область окна Firebug (именно там отображаются CSS-правила).

Ищем строчку, начинающуюся с «margin» и редактируем значение отступов по своему усмотрению. Кстати, редактирование кода в окне Firebug не изменяет самих файлов сайта. Можно лишь наблюдать, как те или иные изменения отразятся на внешнем виде страниц. После обновления страницы все вернется к прежнему виду. Если вам нужно, чтобы внесенные изменения вступили в силу, то придется открывать и редактировать сам файл – CSS или HTML.

Таким образом, даже если вы что-то напутаете в окне Firebug (к примеру, введете некорректные данные), то изменения все равно не сохранятся.

Помимо вкладки HTML тут также есть вкладка CSS (автоматическое отображение стилей CSS), вкладка консоли (информация об ошибках в коде, ошибках JavaScript и т.д.), вкладка сети (различная информация, связанная с параметрами интернета, IP-адрес) и другие вкладки.


Рекомендуем прочесть - Онлайн радио для Мазилы