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

Автор: Teachvideo.ru
Продолжительность: 4 минута 23 секунд
Разрешение: 800х600
Размер видео файлы: 3,93 Мб
Профессиональная озвучка урока.

Описание плагина Firebug

Firebug предназначен для инспекции ошибок веб-страниц: разметки HTML, стилей CSS, сценариев JavaScript. Можно оценить проблемные места при загрузке страницы в браузер. Шесть основных режимов отладки: HTML, CSS, JavaScript, консоль, сеть и DOM. Для каждого из режимов предусмотрена в главном меню веб-отладчика своя собственная вкладка. Firebug устанавливается как расширение (plugin) для Mozilla Firefox®.

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

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

Стоит обратить и на подсветку изменений. В любом сайте, основанном на javascript, HTML-элементы все время создаются, удаляются и изменяются. Плагин Firebug подсвечивает изменения HTML желтым цветом, как только они происходят. А если Вы хотите посмотреть еще ближе, есть опция "scroll change into view", автоматически скроллировать страницу к месту изменения, так что Вы не упустите ошибку.

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

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

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

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

Вкладка Layout визуально разбивает каждый контейнер в контейнерной модели и дает ширину каждого ребра. Дополнительно, она показывает ширину и высоту внутреннего контейнера, и сдвиги по осям x и y относительно родителя.

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

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

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

Не забывайте, редактор DOM – это командная строка javascript в миниатюре (firebug javascript console). Это означает, что можно написать любое javascript-выражение. Когда Вы нажмете Enter, оно будет вычислено, и результат будет присвоен переменной.

Настроек и функций у данного расширения очень много и в этой краткой инструкции мы рассказали лишь о самых основных. У плагина Firebug (addon) также есть русскоязычный сайт, который именно ему и посвящен firebug.ru