A3. Отладчики

582 Часть V Приложения

можете контролировать поток выполнения одного фрагмента запущенного кода, позволяя останавливать и запускать его вручную, а также изучая состояние программы в процессе выполнения.

А3.1 Для чего нужен отладчик

Спомощью отладчиков можно на практике разобраться, что делает программа. При работе над любым проектом с помощью отладчика можно проверить, правильно ли вы понимаете фрагмент кода, что особенно полезно при разработке Ajax-приложений.

При использовании термина '"отладчик" большинство разработчиков подразумевают отладчики исходного кода, и действительно, отладчики JavaScript-кода и серверных приложений весьма полезны при написании Ajax-проектов. Тем не менее отладке поддается и сетевой трафик, поскольку НТТР-код Ajax-приложений может быть на удивление сложным. В следующих разделах мы рассмотрим инструменты отладки и исходного кода, и HTTP-кода. Начнем с изучения отладчиков JavaScript.

А.3.2. Отладчики JavaScript

Возможность отладки JavaScript-кода особенно полезна из-за изменчивости данного языка. Программисты, использующие С# или Java, обычно узнают, какие свойства и методы доступны на данном объекте, изучая его определение класса, также они могут определить число и тип аргументов метода. При работе же с JavaScript-кодом не всегда можно выяснить, с каким числом аргументов должна вызываться функция и в какие переменные превратятся эти аргументы внутри функции. Последний момент представляет особые проблемы с точки зрения обработчиков обратных вызовов, в которых вызов функции может инициироваться неизвестным объектом или самим браузером.

В простейшем случае отладчик исходного кода позволяет пользователю устанавливать точки прерывания, останавливающие выполнение программы и передавая управление в руки пользователя при выполнении данной строки кода. Таким образом, пользователь может построчно проследить за выполнением кода, изучая значения переменных в их области видимости или возобновляя нормальное выполнение кода до следующей точки прерывания. В JavaScript точки прерывания могут устанавливаться самим отладчиком или программистом, добавляющим в код оператор debugger. Например, рассмотрим, как браузер выполняет следующий код:

var x=3; var y=x*7,- debugger; var z=x+y;

На третьей строке кода (рис. А.5) контроль над выполнением кода будет передан любому отладчику, зарегистрированному в браузере. В это время можно эудет увидеть значения переменных х и у. Поскольку переменная z к эточу моменту еще не объявлена, ее значение можно будет исследовать только тосле того, как пользователь "перешагнет" через четвертую строку кода.

Рис. А.5. Использование оператора d e b u g g e r (JavaScript) позволяет программно инициировать точку прерывания

В общем, так и выглядят основные возможности средства отладки исходного кода. Как показано ниже, более сложный отладчик может предлагать более богатый набор возможностей.

Навигация по стеку вызовов

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

function doASum(){ var a=3;

var b=4;

var c=multiply(a-2,b+6); return {a+b)/c; }

function multiply(varl,var2){ var nl=parseFloat(varl);

var n2=parseFloat(var2); debugger;

return nl*n2; }

В момент остановки отладчиком процесса выполнения мы видим переменные nl, n2, varl и var2. Изучая проблемы нашей программы, мы можем подумать, что они связаны с аргументами, переданными функции. Следовательно, нам нужно узнать, какие значения имеют переменные а и b во внешнем методе doASum(). Мы можем добавить новую точку прерывания в doASum() и снова запустить программу, но в сложном приложении возврат к данному состоянию может потребовать времени. Если отладчик поддерживает навигацию по стеку вызовов, мы можем просто подняться по этому стеку до функции doASumO и исследовать ее состояние точно так же, как если бы мы установили точку прерывания в третьей строке на вызове функции multiply () (рис. А.6). В сложной программе стек вызовов может быть довольно глубоким, поэтому здесь особенно полезна способность отладчика перемещаться вверх-вниз по всем уровням.

Наблюдающие выражения

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

Рис. А.6. Отладчик Mozilla Venkman позволяет исследовать локальные переменные в функциях, находящихся в стеке вызовов выше текущей точки выполнения

Приложение А. Инструменты для профессиональной работы с Ajax 585

гаем, что проблема связана с тем, что на каком-то шаге делитель становится равен нулю, однако не знаем, когда это происходит.

Мы можем установить точку прерывания внутри цикла.

for (var i=0;i<100;i++){ var divisor=i-57; debugger;

var val=42/divisor; plotOnGraphfi,val);

}

Однако в таком случае нам придется многократно щелкать на кнопке "Продолжить", пока отладчик не доберется до итерации, на которой появляется ошибка. Можно поступить умнее и проверить в коде наличие ошибки.

for (var i=0;i<100;i++){ var divisor=i-57;

if (divisor^=0){ debugger; } var val=42/divisor; plotOnGraph(i,val);

}

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

Условия подобного типа можно устанавливать, только модифицируя код. Тем не менее, если присваивать точки прерывания с помощью IDE отладчика, условия на эти точки можно задать независимо от реального кода (рис. А.7). Данная возможность поддерживается некоторыми отладчиками, которые позволяют пользователю привязывать к точке прерывания выражение и останавливать поток, только если значение этого выражения равно true.

Изменение значений переменных

При появлении ошибки выполнение программы прекращается. Предположим, что в ходе сеанса отладки мы поняли, как решить данную проблему, но хотим продолжить выполнение программы и проверить следующие фраг-

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

Существует множество отладчиков для JavaScript-кода. В число бесплатных продуктов входит модуль Venkman для Mozilla Firefox и Microsoft Script Debugger {подробнее о нем — ниже, в разделе "Ресурсы") для Internet Explorer. Модуль Venkman поддерживает все описанные выше дополнительные функции, в него также встроено средство профилирования, описанное в главе 7. Модуль Microsoft Script Debugger поддерживает навигацию по стеку вызовов

Рис. А.7. Задание условного прерывания в отладчике Mozilla Venkman

Рис. А.8. Изменение значения переменной в работающей программе с помощью отладчика Mozilla Venkman

и "окно немедленного действия" для выполнения JavaScript-выражений на лету (в частности, организацию запросов и присвоение значений локальным переменным).

Интегрированные среды разработки Visual Studio и Komodo также поддерживают отладчики JavaScript с богатым набором возможностей.

Отладка серверных приложений

Помимо отладки JavaScript-кода на стороне клиента, часто бывает прлезна отладка и серверной части кода. Интегрированные среды разработки приложений Java и .NET обычно имеют высококачественные отладчики. Инстру-

Рис. А.Э. Расширение Mozilla LiveHTTPHeaders может регистрировать HTTP-трафик и представлять подробную информацию о заголовках запросов и ответов

менты Eclipse и Visual Studio (как и большинство других IDE) предлагают прекрасные возможности отладки. Для отладки Web-приложений, основанных на Java, можно использовать сервер приложений JBoss и модули Eclipse, предлагающие простую систему развертывания и отладки Web-приложений. Версии Visual Studio, предназначенные для Web-разработки, имеют встроенный Web-сервер с поддержкой ASP.NET. По нашему мнению, Visual Studio — это единственная среда разработки, поддерживающая отладку клиентского и серверного кода с общим интерфейсом.

Отметим, что часто бывает полезна еще и отладка сетевого трафика. Как и предыдущих случаях, существует множество бесплатных и коммерческих продуктов, которые подходят для этой цели. Рассмотрим их.

А.3.3. Отладчики HTTP

Взаимодействие клиента Ajax и Web-сервера осуществляется с помощью HTTP. Сама по себе реализация этого взаимодействия может оказаться сложной и стать источником ошибок. Иногда стоит перестраховаться и изучить HTTP-трафик, проверив заголовки, строки запроса, содержимое запроса и ответа, а также ход обмена данными.

Расширение Live HTTP Header

Mozilla Firefox поддерживает расширение LiveHTTPHeaders, которое может регистрировать HTTP-трафик, проходящий через браузер (рис. А.9). Заголовки запросов и ответов записываются и отображаются, также их можно экспортировать в виде текстовых файлов, что позволяет хранить информацию о сеансе Ajax. Кроме названных данных, записываются строки запросов из методов GET и POST (однако содержимое ответа не сохраняется).

LiveHTTPHeaders поддерживает только чтение заголовков. Существуют и другие расширения Firefox (например, Modify Headers), позволяющие модифицировать заголовки проходящих пакетов.

588 Часть V. Приложения

Расширение Fiddler

Компания Microsoft Research недавно выпустила приложение Fiddler, основанное на .NET и предлагающее возможности, подобные аналогам LiveHTTPHeaders, но также допускающее запись заголовков в процессе передачи с помощью сценариев, написанных на JavaScript. Это похоже на возможность изменения некоторыми отладчиками значений в ходе сеанса, которую можно использовать для быстрого пропуска дефектов при отладке работающего приложения.

В отличие от расширения LiveHTTPHeaders, которое интегрируется в браузер, Fiddler — это независимый процесс, действующий как посредник между клиентом и сервером. В таком качестве данный продукт можно использовать при любой комбинации браузера и Web-сервера.

Приложение Charles

Charles — это условно-бесплатный инструмент, написанный на Java. Подобно Fiddler, он действует как посредник между браузером и сервером. Он может регистрировать данные запроса и ответа (не только заголовки, но и содержимое), экспортировать сеансы в виде файлов электронных таблиц. Кроме того, это приложение предлагает встроенный инструмент формирования полосы пропускания со множеством настроек, который позволяет легко сымитировать очень медленное соединение, когда клиент и сервер развернуты в очень быстрой локальной сети или даже на одном компьютере.

В данной категории существует множество других полезных инструментов, которые мы описывать не будем. Если Charles и Fiddler — это не то, что вам нужно, вы довольно быстро найдете в Интернете информацию о других полезных продуктах, например Ethereal или Apache TCPMon.

На этом мы завершаем обзор готовых инструментов отладки. Объединяя отладчик серверного кода, отладчик JavaScript-кода на стороне клиента

иотладчик HTTP между ними, можно перехватить выполнение приложения

влюбой точке его жизненного цикла и разобраться, что же оно на самом деле делает.

По своей природе отладчики назойливы. Хотя они представляют собой довольно мощные инструменты, иногда предпочтительнее регистрация действий системы в фоновом режиме. Существует множество хороших структур регистрации действий на сервере, например Iog4j для Java производства Apache, но, повторимся, набор инструментов JavaScript является назойливым. Далее мы рассмотрим простое средство регистрации, написанное на JavaScript, которое можно интегрировать в код браузера и использовать для записи невидимой деятельности.

А.3.4. Создание консоли вывода, встроенной в браузер

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

Web-браузер JavaScript не предлагает встроенное средство регистрации. (При первом взгляде на консоль JavaScript в браузере Mozilla может показаться, что это не так, но записывать данные в нее могут только браузер

ирасширения.)

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

Не будем все усложнять — передадим элемент DOM в качестве аргумента конструктору объекта. Благодаря этому расположение консоли можно будет определять в зависимости от страницы. Конструктор просто задает двустороннюю связь между элементом DOM и самим объектом консоли.

Console=ftmction(el){

this.el=document.getElementByld(el); this.el.className='console1 ; this.el.consoleModel=this;

this . clear();

I

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

Console.prototype.append=function(obj,style){ var domEl=styling.toDOMElement(obj);

if (style) { domEl.classKame=style;

}

this.el.appendChild(domEl);

}

Метод toDOMElement () вызывает общую функцию стилевого оформления, которая обеспечивает представление сообщения в виде элемента DOM. Если аргумент уже является элементом DOM, функция ничего не делает, если он является строкой, то последняя заключается в элемент div.

styling.toDOMElement=function(obj){ var result=null;

if (obj instanceof Element){ result=obj;

}else{

var txtNode=document.createTextNode(String(obj)); var wrapper=document.createElement('div') ; wrapper.appendChild(txtNode);

result=wrapper;

}

return result;

}

590 Часть V Приложения

Чтобы очистить консоль, мы последовательно удаляем все ее дочерние элементы.

Console.prototype.clear=function{)f while(this.el.firstChild){

this.el.removeChild{this.el.firstChild);

}

}

Таким образом мы получаем простую реализацию регистрирующей консоли, встроенной в браузер. Посмотрим, как она используется на примере проекта ObjectViewer (см. главы 4 и 5). Прежде всего определим на странице элемент DOM, который будет содержать регистрирующую консоль.

<div id=1 console'x/div>

Далее зададим класс CSS, отвечающий за расположение консоли на

Здесь мы использовали абсолютное позиционирование; в общем случае можно применять любую технологию пользовательского интерфейса Ajax. Затем необходимо создать регистрирующий объект. Для удобства в данном примере мы определим его в виде глобальной переменной.

var logger=null; window.onload=function(){

logger=new Console{"console"); logger.append{"starting planets app");

}

Мы инициализируем регистратор в событии window.onload, чтобы требуемый им элемент DOM гарантированно был создан. Предположим теперь, что мы хотим регистрировать сообщение при создании объектов планет в нашей модели предметной области. Для этого нам нужно вызвать logger .append()•

planets.Planet=function

(id,system,name,distance,diameter,image){ this.id=id;

logger.append("created planet object ' "+this.name+"'");

}

Подобным образом мы можем добавить в код ObjectViewer (объект СопtentLoader) команды регистрации, которые вызываются при изменении зна-

Рис. А.10. Консоль регистрации в действии — отслеживает создание объектов, сетевую активность, редактирование пользователем значений и тд. Чтобы продемонстрировать отображение сообщений, выделенных специальным стилем, мы добавили запрос

к несуществующему серверному ресурсу moons . x m l

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

net.ContentLoader.prototype.defaultError=function(){ logger.append("network error! "+this.url, "urgent");

}

На рис. АЛО показана регистрирующая консоль как часть модифицированного приложения Object Viewer.

На рисунке видно, насколько простым является введение регистрации в приложение Ajax. Описанная система существенно проще серверной структуры регистрации, подобной Iog4] (Apache). В качестве упражнения читателю предлагается реализовать различные категории растрируемой информации, которые можно включать и отключать независимо.

Рассмотрим теперь следующий тип инструментов — инспекторы DOM.

А4. Инспекторы РОМ

В приложении Ajax пользовательский интерфейс часто модифицируется путем программного изменения DOM. Используя отладчик JavaScript-кода, мы можем пошагово пройти все этапы работы с DOM. проверив, что они дают действительно то, что нам нужно.

Тем не менее DOM — это все же не то изображение, которое видит пользователь. Возможно, мы уверены, что код меняет DOM так, как мы того

Рис. А.11. DOM Inspector для браузеров Mozilla позволяет в режиме структуры исследовать DOM Web-страницы, в частности, отображаются узлы, объявленные в HTML-коде и сгенерированные программно

желаем, но это не оонзательни даст тот ииль,зиьа,телы;кии интерфейс, который мы ожидаем увидеть Чтобы помочь разработчику в изучении связей между деревом DOM, с которым работает наш код, и интерфейсом, который видит пользователь, был создан класс инструментов, названных инспекторами DOM.

Инспекторы DOM должны быть хорошо интегрированы в браузер, причем инспекторы конструируются только под конкретные браузеры. Наиболее популярными являются инструменты, созданные для браузера Mozilla Firefox, поэтому вначале мы рассмотрим их. а затем альтернативы, доступные для браузера Internet Explorer.

А.4.1. Использование DOM Inspector для браузеров Mozilla

Инструмент DOM Inspector поставляется вместе с Firefox, но активизируется только при выборе соответствующей опции в процессе установки браузера. Если вы его установили, в меню Tools (Инструменты) появится опция DOM Inspector. При первом запуске DOM Inspector состоит из двух расположенных рядом панелей (рис. А.11)- Левая представляет собой древовидный элемент управления, вначале показывающий только документ и единственный узел HTML. Узел можно раскрыть, чтобы выявить заголовок и тело документа, а затем открыть в теле набор узлов, представляющих HTML-разметку страницы, а также все элементы, созданные программными средствами. Если узлам был присвоен идентификатор или атрибут класса CSS, соответствующая информация появится в дополнительных столбцах древовидного элемента.

Данный древовидный элемент управления синхронизирован со страницей, отображаемой в основном окне браузера. Если выбрать узел дерева с помощью мыши, соответствующий элемент в разделе структуры страницы будет выделен красной рамкой (данная связь является двусторонней). Вызывая команду Search => Select Element из меню Click DOM Inspector, пользователь может щелкнуть в окне Web-браузера и выделить элемент дерева, соответствующий отмеченному элементу. (То же можно сделать с помощью кнопки панели инструментов.)

На правой панели информация о текущем узле указывается в одном из нескольких доступных форматов, включая формат отображения узлов DOM, стилевых правил CSS, а также объектов JavaScript (рис. А 12). В последнем

Приложение А Инструменты для профессиональной работы с Ajax 593

Рис. А.12. DOM Inspector (Mozilla) позволяет связывать с элементами DOM сценарии Переменная t a r g e t определяет узел DOM, выбранный в текущий момент; в данном случае это изображение планеты, границу которой мы хотим изменить

режиме с объектом можно связать программный сценарий, щелкнув правой кнопкой мыши на правой панели и выбрав кнопку Evaluate JavaScript. В качестве цели сценария (target) можно указать выбранный в текущий момент элемент DOM, поэтому, например, чтобы окружить этот элемент тонкой синей рамкой, можно ввести в поле команду target .style. border='4px solid blue'.

DOM Inspector также содержит третью панель, расположенную ниже двух описанных. В данной панели можно визуализировать видимое содержимое документа (рис. А. 13). Данная панель появится, если пользователь наберет в поле URL адрес страницы и щелкнет на кнопке inspect, после чего можно будет изучать расположенные рядом абстрактную DOM и видимый документ.

А.4.2. Инспекторы DOM для браузера Internet Explorer

Самой большой проблемой наборов инструментов для браузеров Mozilla является то, что инспекторы DOM не могут использоваться для выявления проблем в Internet Explorer. Впрочем, существует несколько продуктов, предлагающих подобные возможности и для этого браузера. Многие из них являются коммерческими или условно бесплатными, хотя имеется и несколько рабочих бесплатных утилит, например IEDocMon (подробнее о ней речь пойдет ниже — в разделе "Ресурсы1').

Подобно Mozilla DOM Inspector, панель инструментов IEDocMon предлагает простое двухпанельное представление DOM, с деревом слева и подробным представлением узлов справа (рис. А.13).

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