Инструменты для отладки клиентской части веб-приложения

Современное программное обеспечение часто использует браузер пользователя в качестве платформы, на которой выполняется клиентская часть приложения. Например, ВКонтакте, почта Google и Mail.ru - это веб-приложения, часть которых работает на сервере, а часть - на стороне клиента, то есть, в вашем браузере.

Браузер хорош тем, что умеет выполнять программы на языке JavaScript (скрипты). И, разумеется, браузер отлично умеет отображать графические интерфейсы приложений, описанные языком HTML. HTML в связке с JavaScript позволяет реализовать весьма богатый пользовательский интерфейс (пример - Google Maps).

Разумеется, если программа выполняется в браузере, то нужен инструмент, которым эту программу можно было бы отлаживать. Такие инструменты в современных браузерах есть.

Во всех популярных браузерах: Firefox, Chrome, Opera и IE8+, панель инструментов разработчика вызывается нажатием клавиши F12. В Firefox, правда, предварительно надо установить плагин Firebug, который и добавляет инструменты разработчика.

В Firefox, Chrome и Opera возможности отладки примерно аналогичны, так что будем рассматривать только инструмент Firebug для Firefox.

Возможности Firebug

Firebug, как, впрочем, и аналогичные инструменты в других браузерах, предоставляет полный набор возможностей для отладки JavaScript, анализа документа HTML и стилей CSS. Кроме этого, Firebug позволяет анализировать сетевой обмен между браузером и сервером, в том числе, и анализировать скорость загрузки страниц.

Интерфейс Firebug представляет собой панель с закладками. Закладок несколько:

  • Console - здесь отображаются сообщения об ошибках и прочие информационные сообщения. Здесь же есть командная строка, куда можно вводить команды на языке JavaScript.
  • HTML - отображает дерево элементов текущего HTML-документа, а также CSS-стили выделенного элемента. Всё это можно не только просматривать, но и изменять. Изменения незамедлительно отображаются на странице. На этой закладке веб-дизайнер, занимающийся оформлением сайта, проводит большую часть своей жизни.
  • Script - служит для отладки JavaScript. Здесь можно расставлять точки останова в нужных местах скрипта и смотреть значения переменных.
  • DOM - выводит всё дерево объектов, доступных программе на JavaScript. Здесь можно не только просматривать, но и искать объекты, а также изменять их.
  • Net - отображает информацию обо всех HTTP-запросах, сделанных браузером для загрузки страницы, картинок, а также об остальных запросах на сервер. Здесь же видно, сколько времени ушло на загрузку каждой картинки и всей страницы в целом.

Работа с Firebug

Чаще всего работа с Firebug - это исследование и настройка HTML и CSS, а также отладка JavaScript.

Заглянуть в HTML и CSS любого элемента открытой веб-страницы очень просто: достаточно кликнуть правой кнопкой в понравившийся элемент страницы и выбрать в меню Inspect element. Тотчас же откроется панель HTML Firebug, где будет выделен тот элемент, по которому кликнули.

Для отладки JavaScript-программ полезна закладка Console, ибо туда выводятся сообщения об ошибках, возникших в результате работы JavaScript. В случае ошибок в JavaScript, следует первым делом заглядывать в консоль. Если же надо более детально изучить происходящие в программе явления, следует поставить точку останова в нужном месте скрипта и довести программу до этого места. Теперь можно по шагам проходить проблемный фрагмент программы, глядя на значения переменных и состояния объектов.

Раздел:

Темы: