Удобно, когда изменять оформление сайта и находить ошибки в его работе можно прямо в браузере в процессе работы с сайтом. Для этого у различных браузеров предусмотрен свой функционал. Например, Средства разработчика в Internet Explorer или Dragonfly в Opera. У браузера Mozilla Firefox для этих целей есть целое меню «Веб-разработка» и замечательное расширение Firebug , которое сделает жизнь любого вебмастера чуть-чуть легче. О возможностях Firebug мы и расскажем в сегодняшней статье, узнаем как пользоваться этим полезнейшим расширением.
Firebug устанавливается как стандартное расширение для Mozilla Firefox и совместимо с последней 8-ой версией этого замечательного браузера. Чтобы добавить Firebug в Firefox достаточно зайти на страничку расширения https://addons.mozilla.org/ru/firefox/addon/firebug/ или официальный сайт Firebug http://getfirebug.com и запустить его установку.
После перезапуска браузера в правом нижнем углу Firefox появится иконка симпатичного жучка. Кликните по ней, чтобы открыть окно Firebug.
Firebug, прежде всего, используется для редактирования CSS и HTML в режиме реального времени, отладки JavaScript и оптимизации загрузки страниц. Для этих целей в Firebug имеется 6 режимов отладки веб-страниц. Каждый режим представлен отдельной панелью в окне Firebug. Рассмотрим их подробнее.
Консоль. Данная панель позволяет просматривать ошибки на сайте и выполнять различные команды. Типы ошибок, которые будет отлавливать Firebug, можно выбрать из списка, кликнув по значку со стрелкой. Как видите, перечень ошибок и предупреждений довольно внушителен.
Как правило, здесь выбирают только те ошибки, которые требуется выявить в данный момент. Затем, после их обнаружения и исправления, можно выбрать все пункты и еще раз «прогнать» сайт, произведя финальное тестирование.
Если ошибка связана со сценарием JavaScript, то одним кликом по ней можно перейти в режим отладки сценариев.
Отладка JavaScript производится на панели Сценарии. Здесь можно добавлять точки останова, запускать скрипты, отслеживать стек вызовов. Данный функционал незаменим при создании сайтов на Ajax.
Если ошибка на сайте связана с разметкой страницы, то кликнув по ней в консоли, вы попадете на панель HTML. Здесь отображается код страницы, загруженной в данный момент в браузер. Панель позволяет не только просматривать, но и редактировать HTML-код страницы. Для этого дважды кликните по нужному параметру либо кликните правой кнопкой мыши по выделенному коду и в контекстном меню выберите команду «Редактировать HTML».
Для обнаружения ошибок в HTML-коде сайта удобно использовать инструмент «Инспектировать». Нажмите кнопку со стрелкой и подведите курсор мыши к проблемному месту страницы.
Вы увидите код подсвеченного на странице элемента, а чуть правее – стили CSS, применяемые к данному элементу.
Как и код, стили можно править в реальном времени, кликая по атрибутам и их свойствам. Изменения тотчас будут отображаться на веб-странице и действовать до ее обновления в браузере.
Полная информация о стилях на веб-странице представлена на панели CSS. Здесь перечислены все файлы стилей, загружаемые вместе со страницей. Вы можете выбрать из списка требуемый файл стилей для редактирования.
Экспериментировать со стилями можно в реальном времени, меняя атрибуты CSS и их значения. Для этого достаточно кликнуть по нужному атрибуту или его параметру.
Редактирование CSS происходит в двух режимах:
-
Правка кода – правка исходного кода CSS в том виде, в котором он загружен браузером;
-
Живая правка - правка исходного кода CSS в том виде, в котором он извлечен из браузера.
Второй режим целесообразно использовать, если CSS формируется «на лету», например в результате выполнения сценариев.
DOM – Document Object Model или Объектная Модель Документа. Данная панель содержит иерархию объектов на открытой в браузере веб-странице. Как вы, вероятно, знаете самый главный объект в этой системе – объект window (окно). Далее объекты располагаются по мере вложенности - иерархии. При необходимости можно просматривать свойства того или иного объекта, и даже изменять их по клику мыши, тотчас видя результаты внесенных изменений на экране.
И, наконец, панель Сеть. Она показывает загрузку всех файлов на веб-странице, будь то каскадные таблицы стилей, запросы, сценарии JavaScript или обычный HTML. Здесь же можно оценить время загрузки тех или иных файлов, которое отображается в виде индикатора и измеряется в миллисекундах и секундах.
При наведении мыши на индикатор вы увидите точную раскладку по количеству потраченного на загрузку времени.
Панель Сеть особенно полезна при решении проблем медленной загрузки веб-страниц. В большинстве случаев достаточно сжать изображения и оптимизировать загрузку сценариев, чтобы порадовать пользователя скоростью работы вашего сайта.
Как видите, расширение Firebug для браузера Mozilla Firefox предоставляет вебмастеру удобные и функциональные инструменты не только для решения проблем, но и проведения экспериментов с веб-страницами в реальном времени. Например, изменению стилей CSS и HTML-кода сайта. Мы узнали как пользоваться Firebug для Moziila Firefox. Ждем вопросы на форуме.
Дополнительную информацию о Firebug вы можете почерпнуть на сайтах http://www.firebug.ru и http://getfirebug.com. Документация к расширению находится на FirebugWiki http://getfirebug.com/wiki/index.php/Main_Page. Также с удовольствием выслушаем ваши вопросы на форуме.
Специально для Сайтогон, Елена Карлтон
