Средства отладки для Веб-проектирования. Отладчик FireBug

Категория:

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

Существуют следующие основные отладчики для Веб-разработки:

  • Dragonfly (драгенфлай) – это отладчик, который встроен в браузер Opera, начиная с версии 9.5. Данный отладчик вызывается нажатием клавиш Ctrl+Shift+I. В dragonfly имеется DOM-инспектор, CSS-инспектор, мощный отладчик JavaScript;
  • IE Developer Toolbar – до версии 8.0 идет как отдельный компонент, который необходимо устанавливать отдельно. Этот отладчик вызывается клавишей F12;
  • FireBug – плагин для отладки в браузере FireFox, который перед использованием необходимо установить. Вызывается функциональной клавишей Ctrl+F12 (Более подробно рассматривается в данной статье).
Работая с FireBug, при первом запуске по умолчанию открывается вкладка HTML. Эта вкладка отображает больше информации об элементе, чем, если бы просто использовался просмотр кода через браузер, с помощью него можно редактировать или удалять элементы и атрибуты «на лету», при этом страница браузера немедленно обновляется, отображая изменения. В левой части отладчика отображается дерево HTML, а в правой соответствующие CSS свойства выделенного элемента. Окно отладчика представлено на рисунке ниже.
FireBug
Если необходимо проинспектировать какой-то элемент, то есть, чтобы быстро найти на странице и выделить в дереве HTML, то для этого используется кнопка, показанная и выделенная красным кружком на рисунке ниже. Инспектирование объекта
К примеру, в данный момент название сайта, которое отображается в шапке, выведено слишком большими буквами и последнее слово из названия помещается на вторую строку. Результат анализа названия сайта в шапке показан на рисунке ниже. Отладчик FireBug
Как видно из рисунка выше, название сайта в виде ссылки помещено в тег H1, у которого используется идентификатор site-name. Для выделенного блока, в правой части, представлены селекторы «#site-name a», и «#site-name a:hover» в которых нужно уменьшить свойство font-size на более маленькое значение, это можно проделать прямо в том окне и подобрать сразу подходящий размер. Также в окне стилей отображается, в каком файле и на какой строке описывается селектор, в данном случае это файл style-zero.css на строке 443. В результате font-size был изменен на значение 33px вместо прежнего размера 36px. После этих изменений необходимо очистить кеш данных, пройдя в административный раздел, потом выбрать пункт «Настройка сайта» и нажать на «Производительность». На этой странице нажать кнопку «Очистить кеш данных» и в результате, после всех этих действий, измененная шапка показана на рисунке ниже. Шапка сайта
Помимо описанных возможностей можно отлаживать JS скрипты на лету, анализировать асинхронные AJAX запросы, просматривать ответы сервера, анализировать загрузку файлов, вводить в консоль команды и моментально их выполнять на странице. FireBug позволяет отключать и включать специфические правила CSS, влияющие на отображение элемента. Например, мы хотим посмотреть на сколько сдвинется блок, если убрать отступ, это легче всего сделать, отключив стиль. Позволяет ещё делать логирование событий, фиксируя фокус на элементе, смещение фокуса, движение мыши над элементом, движение мыши от элемента, движение мыши к элементу, выделение элемента, печать текста (для форм). Чтобы включить логирование событий достаточно нажать на нем правой кнопкой мыши и выбрать «Записывать события». Дополнительно с этим плагином можно использовать Web Developer, и FireDiff. Дополнение Web Developer добавляет в Firefox удобную и настраиваемую панельку с множеством различных функций. В функционал входит следующее: отключение и просмотр Java-скриптов, отключение и просмотр cookie, отключение CSS таблиц, просмотр стилей, просмотр детальной информации для форм, отключение вывода изображений, поиск неработающих изображений, редактирование HTML-кода, просмотр спрятанных элементов, проверка кода на валидность и многое многое другое. Firediff – это расширение для Firebug, предназначенное для отслеживания изменений в DOM и CSS, то есть он осуществляет контроль изменений, который предоставляет возможность понять функциональность приложения, а также ведет запись произведенных изменений и подстраивает отображение страницы.
Материалы по теме: 

Средства отладки для Веб-проектирования. Отладчик IE Developer Toolbar

Категория:

IE Developer Toolbar – до версии 8.0 идет как отдельный компонент, который необходимо устанавливать отдельно. Этот отладчик вызывается клавишей F12.

Средства отладки для Веб-проектирования. Отладчик Dragonfly

Категория:

Dragonfly (драгенфлай) – это отладчик, который встроен в браузер Opera, начиная с версии 9.5. Данный отладчик вызывается нажатием клавиш Ctrl+Shift+I. В dragonfly имеется DOM-инспектор, CSS-инспектор, мощный отладчик JavaScript. Отладчик Dragofly по сути - онлайн-приложение, что позволяет разработчикам использовать самую свежую версию.

Сравнительные характеристики браузерных отладчиков. Dragonfly, IE Developer Toolbar и FireBug

Категория:

В данной статье приводятся сравнительные характеристики браузерных отладчиков FireBug, Dragonfly и IE Developer Toolbar. Все описанные отладчики практически не отличаются друг от друга, за исключением отдельных моментов. Поддерживают фолдинг (сворачивание кода), цветовое выделение, различные переключатели.