Firebug - наш лучший друг

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

Для начала нам необходимо скачать Firebug и установить его в браузер Firefox.

Консоль

Консоль – это место где Вы непосредственно можете запустить JavaScript на любой существующей странице сайта. Попробуйте написать простенький JavaScript код, в текстовом файле, и нажать кнопку запуска. Попробуйте сделать следующее:

Этот маленький JavaScript код получает предупреждение всех атрибутов HREF на текущей странице. Любой JavaScript код может быть помещен в этом поле. При создании сайта, иногда необходимо посмотреть, как будет работать JavaScript код. В Консоли приложения Firebug Вы не только сможете посмотреть, как он работает, но и сделать различные изменения и увидеть, что будет происходить.

HTML

Можно, наверное, догадаться, что делает эта вкладка. Она отображает HTML страницу. Эта вкладка позволяет форматировать, изменять, удалять ненужные элементы на странице.

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

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

CSS

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

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

Script

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

DOM

Вы когда-то хотели использовать графический интерфейс для DOM навигации? Firebug дает Вам эту возможность. Он показывает используемые DOM элементы такие, как якори тегов, значения элементов формы, и т.д. Это очень полезная функция. Так же в этой вкладке показывается текущее значение JavaScript переменных. Если у Вас не установлен Firebug, за этим всем необходимо следить в голове.

Net

Наконец, мы дошли до вкладки Net. Вкладка Net проводит анализ HTTP запроса и выводит код статуса: размер страницы, как долго она будет загружаться. Я не знаю, как для Вас, но для меня это очень ценная информация.

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

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

YSlow

FirePHP

FireSpider

FireCookie

SenSEO

Rainbow for Firebug

Pixel Perfect