Общие сведения о возможностях отладки ASP.NET AJAX

Скотт Кейт

Возможность отладки кода — это навык, который каждый разработчик должен иметь в своем арсенале независимо от используемой технологии. Хотя многие разработчики привыкли использовать Visual Studio .NET или Web Developer Express для отладки ASP.NET приложений, использующих код VB.NET или C#, некоторые не знают, что это также очень полезно для отладки клиентского кода, например JavaScript. Те же методы, используемые для отладки приложений .NET, также можно применять к приложениям с поддержкой AJAX и, в частности, ASP.NET приложениям AJAX.

Отладка приложений ASP.NET AJAX

Дэн Валин (Dan Wahlin)

Возможность отладки кода — это навык, который каждый разработчик должен иметь в своем арсенале независимо от используемой технологии. Само собой разумеется, что понимание различных доступных вариантов отладки может сэкономить огромное количество времени на проекте и, возможно, даже несколько головных болей. Хотя многие разработчики привыкли использовать Visual Studio .NET или Web Developer Express для отладки ASP.NET приложений, использующих код VB.NET или C#, некоторые не знают, что это также очень полезно для отладки клиентского кода, например JavaScript. Те же методы, используемые для отладки приложений .NET, также можно применять к приложениям с поддержкой AJAX и, в частности, ASP.NET приложениям AJAX.

В этой статье вы узнаете, как можно использовать Visual Studio 2008 и некоторые другие средства для отладки ASP.NET приложений AJAX, чтобы быстро находить ошибки и другие проблемы. В этом обсуждении содержатся сведения о включении отладки в Интернете Обозреватель 6 или более поздних версий, использовании Visual Studio 2008 и Обозреватель скрипта для пошагового выполнения кода, а также о других бесплатных средствах, таких как вспомогательная веб-разработка. Вы также узнаете, как выполнять отладку ASP.NET приложений AJAX в Firefox с помощью расширения с именем Firebug, которое позволяет выполнять пошаговое выполнение кода JavaScript непосредственно в браузере без каких-либо других средств. Наконец, вы познакомитесь с классами в библиотеке ASP.NET AJAX, которые могут помочь с различными задачами отладки, такими как трассировка и операторы утверждения кода.

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

Настройка интернет-Обозреватель для отладки

Большинство пользователей не заинтересованы в том, чтобы увидеть проблемы с JavaScript на веб-сайте, просматриваемом с помощью интернет-Обозреватель. В самом деле, обычный пользователь даже не знает, что делать, если он увидел сообщение об ошибке. В результате параметры отладки отключены по умолчанию в браузере. Однако очень просто включить отладку и использовать ее при разработке новых приложений AJAX.

Чтобы включить функции отладки, перейдите в меню Internet Обозреватель в разделе Сервис Свойства браузера и выберите вкладку Дополнительно. Убедитесь, что в разделе Просмотр сняты следующие флажки:

• Отключение отладки скриптов (интернет-Обозреватель)
• Отключение отладки скриптов (другое)

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

На рисунке 1 показано, что должно выглядеть диалоговое окно Internet Обозреватель advanced после правильной настройки для отладки.

Рис. 1. Настройка интернет-Обозреватель для отладки. (Щелкните для просмотра полноразмерного изображения)

После включения отладки в меню Вид появится новый пункт меню с именем Отладчик скриптов. Доступно два варианта, включая Оператор "Открыть" и "Прервать при следующем". Если выбран параметр Открыть, вам будет предложено выполнить отладку страницы в Visual Studio 2008 (обратите внимание, что Visual Web Developer Express также можно использовать для отладки). Если Visual Studio .NET в настоящее время работает, вы можете использовать этот экземпляр или создать новый экземпляр. При выборе параметра Break at Next Statement вам будет предложено выполнить отладку страницы при выполнении кода JavaScript. Если код JavaScript выполняется в событии onLoad страницы, можно обновить страницу, чтобы запустить сеанс отладки. Если код JavaScript выполняется после нажатия кнопки, отладчик запустится сразу после нажатия кнопки.

Примечание

Если вы работаете в Windows Vista с включенным пользовательским контроль доступа (UAC) и у вас есть Среда Visual Studio 2008, настроенная на запуск от имени администратора, Visual Studio не сможет подключиться к процессу при появлении запроса на присоединение. Чтобы обойти эту проблему, сначала запустите Visual Studio и используйте этот экземпляр для отладки.

Хотя в следующем разделе показано, как отладить страницу ASP.NET AJAX непосредственно из Visual Studio 2008, использовать параметр Отладчик скриптов internet Обозреватель полезно, если страница уже открыта и вы хотите более полно проверить ее.

Отладка с помощью Visual Studio 2008

Visual Studio 2008 предоставляет функции отладки, которые разработчики по всему миру используют каждый день при отладке приложений .NET. Встроенный отладчик позволяет выполнять пошаговое выполнение кода, просматривать данные объектов, watch для определенных переменных, отслеживать стек вызовов и многое другое. Помимо отладки кода VB.NET или C#, отладчик также полезен для отладки ASP.NET приложений AJAX и позволяет пошагово выполнять код JavaScript построчно. Ниже приведены сведения о методах отладки файлов скриптов на стороне клиента, а не об общем процессе отладки приложений с помощью Visual Studio 2008.

Процесс отладки страницы в Visual Studio 2008 можно запустить несколькими разными способами. Во-первых, можно использовать параметр Отладчик скриптов в Интернете Обозреватель, упомянутый в предыдущем разделе. Это хорошо работает, если страница уже загружена в браузере и вы хотите начать ее отладку. Кроме того, вы можете щелкнуть правой кнопкой мыши aspx-страницу в Обозреватель решений и выбрать в меню пункт Задать как начальную страницу. Если вы привыкли к отладке ASP.NET страниц, скорее всего, это было сделано раньше. После нажатия клавиши F5 можно отлаживать страницу. Однако, хотя вы обычно можете задать точку останова в любом месте в коде VB.NET или C#, это не всегда относится к JavaScript, как вы увидите далее.

Встроенные и внешние скрипты

Отладчик Visual Studio 2008 обрабатывает Внедренный код JavaScript на странице, отличный от внешних файлов JavaScript. С помощью внешних файлов скриптов можно открыть файл и установить точку останова в любой строке. Точки останова можно задать, щелкнув серую область области области в области слева от окна редактора кода. Если JavaScript внедряется непосредственно в страницу с помощью <script> тега, установка точки останова путем щелчка в области серого лотка не является вариантом. Попытка установить точку останова в строке внедренного скрипта приведет к выводу предупреждения о том, что "Это недопустимое расположение для точки останова".

Эту проблему можно обойти, переместив код во внешний файл .js и указав на него ссылку с помощью атрибута src тега <скрипта> :

<script type="text/javascript" src="Scripts/YourScript.js"></script>

Что делать, если перемещение кода во внешний файл не является вариантом или требует больше работы, чем стоит? Хотя вы не можете задать точку останова с помощью редактора, вы можете добавить инструкцию отладчика непосредственно в код, в котором вы хотите начать отладку. Вы также можете использовать класс Sys.Debug, доступный в библиотеке ASP.NET AJAX, для принудительного запуска отладки. Дополнительные сведения о классе Sys.Debug см. далее в этой статье.

Пример использования debugger ключевое слово приведен в листинге 1. В этом примере отладчик прерывается прямо перед вызовом функции обновления.

Листинг 1. Использование отладчика ключевое слово для принудительного прерывания работы отладчика Visual Studio .NET.

function BuildPerson()
{
 var person =
 {
 FirstName: $get("txtFirstName").value,
 LastName: $get("txtLastName").value,
 Address:
 {
 Street: $get("txtStreet").value,
 City: $get("txtCity").value,
 State: $get("txtState").value
 }
 };
 debugger;
 UpdatePerson(person);
}

После нажатия инструкции отладчика вам будет предложено выполнить отладку страницы с помощью Visual Studio .NET и начать пошаговое выполнение кода. При этом может возникнуть проблема с доступом к файлам скриптов библиотеки AJAX ASP.NET, используемым на странице, поэтому давайте рассмотрим использование Visual Studio . Обозреватель скрипта NET.

Использование Visual Studio .NET Windows для отладки

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

Рис. 2. Диалоговое окно ошибки, показано, когда исходный код недоступен для отладки. (Щелкните для просмотра полноразмерного изображения)

Это диалоговое окно отображается, так как Visual Studio .NET не уверен, как получить исходный код некоторых скриптов, на которые ссылается страница. Хотя это может быть довольно разочарование на первый взгляд, есть простое исправление. После запуска сеанса отладки и перехода к точке останова перейдите в окно Отладка скрипта Windows Обозреватель меню Visual Studio 2008 или нажмите клавиши CTRL+ALT+N.

Примечание

Если меню Скрипт Обозреватель не отображается в списке, перейдите к разделу Сервис>Настройка>команд в меню Visual Studio .NET. Найдите запись Отладка в разделе Категории и щелкните ее, чтобы отобразить все доступные элементы меню. В списке Команды прокрутите вниз до пункта Скрипт Обозреватель а затем перетащите его вверх в меню Отладка Windows, упомянутое выше. При этом запись меню Обозреватель скрипта будет доступна при каждом запуске Visual Studio .NET.

Обозреватель скрипта можно использовать для просмотра всех скриптов, используемых на странице, и их открытия в редакторе кода. После открытия Обозреватель скрипта дважды щелкните страницу ASPX, в которой выполняется отладка, чтобы открыть ее в окне редактора кода. Выполните то же действие для всех других скриптов, показанных в Обозреватель скриптов. После открытия всех скриптов в окне кода можно нажать клавишу F11 (и использовать другие клавиши отладки) для пошагового выполнения кода. На рисунке 3 показан пример Обозреватель скрипта. В нем перечислены текущий отлаживаемый файл (Demo.aspx), а также два пользовательских скрипта и два скрипта, динамически внедренные на страницу ASP.NET AJAX ScriptManager.

Рис. 3. Обозреватель скриптов обеспечивает простой доступ к скриптам, используемым на странице. (Щелкните для просмотра полноразмерного изображения)

Некоторые другие окна также можно использовать для предоставления полезных сведений при пошаговом просмотре кода на странице. Например, можно использовать окно Локальные для просмотра значений различных переменных, используемых на странице, а окно Интерпретация — для оценки конкретных переменных или условий и просмотра выходных данных. Вы также можете использовать окно Вывод для просмотра инструкций трассировки, записанных с помощью функции Sys.Debug.trace (которая будет описана далее в этой статье) или функции Debug.writeln internet Обозреватель.

При пошаговом выполнении кода с помощью отладчика можно навести указатель мыши на переменные в коде, чтобы просмотреть присвоенное им значение. Однако отладчик скриптов иногда ничего не отображает при наведении указателя мыши на заданную переменную JavaScript. Чтобы увидеть значение, выделите инструкцию или переменную, которую вы пытаетесь увидеть, в окне редактора кода и наведите на нее указатель мыши. Хотя этот метод работает не в любой ситуации, часто вы сможете увидеть значение без необходимости поиска в другом окне отладки, например в окне Локальные.

Видеоруководение, демонстрирующее некоторые функции, рассмотренные здесь, можно просмотреть по адресу http://www.xmlforasp.net.

Отладка с помощью вспомогательного средства веб-разработки

Хотя Visual Studio 2008 (и Visual Web Developer Express 2008) являются средствами отладки с большими возможностями, существуют дополнительные параметры, которые также можно использовать, более легкие. Одним из последних выпущенных средств является вспомогатель веб-разработки. Никхил Котари (Nikhil Kothari) (ASP.NET Nikhil Kothari) (

Вспомогатель веб-разработки можно использовать непосредственно внутри интернет-Обозреватель что делает его удобным в использовании. Для запуска выберите Сервис Вспомогатель веб-разработки в меню Интернет-Обозреватель. Откроется средство в нижней части браузера, что хорошо, так как вам не нужно покидать браузер для выполнения нескольких задач, таких как ведение журнала HTTP-запросов и ответных сообщений. На рисунке 4 показано, как выглядит в действии вспомогатель веб-разработки.

Рис. 4. Вспомогатель веб-разработки (щелкните для просмотра полноразмерного изображения)

Вспомогательная веб-разработка не является инструментом, который будет использоваться для пошагового выполнения кода построчно, как в Visual Studio 2008. Однако его можно использовать для просмотра выходных данных трассировки, простой оценки переменных в скрипте или просмотра данных внутри объекта JSON. Он также очень полезен для просмотра данных, передаваемых в ASP.NET страницы AJAX и сервера.

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

Просмотр сообщений трассировки и данных объектов JSON

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

Листинг 2. Запись сообщения трассировки на стороне клиента с помощью класса Debug.

function BuildPerson()
{
 var person =
 {
 FirstName: $get("txtFirstName").value,
 LastName: $get("txtLastName").value,
 Address:
 {
 Street: $get("txtStreet").value,
 City: $get("txtCity").value,
 State: $get("txtState").value
 }
 };
 Debug.writeln("Person name: " + person.LastName);
 UpdatePerson(person);
}

Если свойство LastName содержит значение Doe, вспомогательное средство веб-разработки отобразит сообщение "Имя пользователя: Doe" в командном окне консоли сценариев (при условии, что отладка включена). Вспомогающая веб-разработка также добавляет объект debugService верхнего уровня в страницы, которые можно использовать для записи сведений трассировки или просмотра содержимого объектов JSON. В листинге 3 показан пример использования функции трассировки класса debugService.

Листинг 3. Использование класса debugService вспомогательного средства веб-разработки для записи сообщения трассировки.

function BuildPerson()
{
 var person =
 {
 FirstName: $get("txtFirstName").value,
 LastName: $get("txtLastName").value,
 Address:
 {
 Street: $get("txtStreet").value,
 City: $get("txtCity").value,
 State: $get("txtState").value
 }
 };
 if (window.debugService)
 {
 window.debugService.trace("Person name: " + person.LastName);
 }
 UpdatePerson(person);
}

Хорошая особенность класса debugService заключается в том, что он будет работать, даже если отладка не включена в Интернет Обозреватель что упрощает постоянный доступ к данным трассировки при запуске вспомогательного средства веб-разработки. Если средство не используется для отладки страницы, инструкции трассировки будут игнорироваться, так как вызов window.debugService вернет значение false.

Класс debugService также позволяет просматривать данные объектов JSON с помощью окна инспектора вспомогательного средства веб-разработки. В листинге 4 создается простой объект JSON, содержащий данные пользователя. После создания объекта выполняется вызов функции проверки класса debugService, чтобы разрешить визуальную проверку объекта JSON.

Листинг 4. Использование функции debugService.inspect для просмотра данных объекта JSON.

function BuildPerson()
{
 var person =
 {
 FirstName: $get("txtFirstName").value,
 LastName: $get("txtLastName").value,
 Address:
 {
 Street: $get("txtStreet").value,
 City: $get("txtCity").value,
 State: $get("txtState").value
 }
 };
 if (window.debugService)
 {
 window.debugService.inspect("Person Object",person);
 }
 UpdatePerson(person);
}

Вызов функции GetPerson() на странице или в окне интерпретации приведет к отображению диалогового окна Инспектор объектов, как показано на рисунке 5. Свойства в объекте можно изменять динамически, выделив их, изменив значение, указанное в текстовом поле Значение, а затем щелкнув ссылку Обновить. Использование инспектора объектов упрощает просмотр данных объекта JSON и экспериментирование с применением различных значений к свойствам.

Ошибки отладки

В дополнение к отображению данных трассировки и объектов JSON вспомогатель веб-разработки также может помочь в отладке ошибок на странице. При обнаружении ошибки вам будет предложено перейти к следующей строке кода или выполнить отладку скрипта (см. рис. 6). В диалоговом окне Ошибка скрипта отображается полный стек вызовов, а также номера строк, что позволяет легко определить, где возникают проблемы в сценарии.

Рис. 5. Использование окна "Инспектор объектов" для просмотра объекта JSON. (Щелкните для просмотра полноразмерного изображения)

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

Рис. 6. Диалоговое окно ошибки скрипта вспомогательной веб-разработки (щелкните для просмотра полноразмерного изображения)

Проверка сообщений запросов и ответов

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

Чтобы просмотреть ASP.NET сообщения о запросах и ответах AJAX, необходимо включить средство ведения журнала HTTP, выбрав http Enable HTTP Logging (Включить ведение журнала HTTP) в меню Вспомогательное средство веб-разработки. После включения все сообщения, отправленные с текущей страницы, можно просмотреть в средстве просмотра журналов HTTP, к которому можно получить доступ, выбрав HTTP Show HTTP Logs (Показать журналы HTTP).

Хотя просмотр необработанного текста, отправляемого в каждом сообщении запроса или ответа, безусловно, полезен (и является параметром вспомогательной службы веб-разработки), зачастую проще просматривать данные сообщений в более графическом формате. После включения ведения журнала HTTP и записи в журнал сообщений данные сообщений можно просмотреть, дважды щелкнув сообщение в средстве просмотра журнала HTTP. Это позволяет просматривать все заголовки, связанные с сообщением, а также фактическое содержимое сообщения. На рисунке 7 показан пример сообщения запроса и ответа, просматриваемого в окне средства просмотра журнала HTTP.

Рис. 7. Использование средства просмотра журнала HTTP для просмотра данных запросов и ответных сообщений. (Щелкните для просмотра полноразмерного изображения)

Средство просмотра журналов HTTP автоматически анализирует объекты JSON и отображает их с помощью представления в виде дерева, что позволяет быстро и легко просматривать данные свойств объекта. Если updatePanel используется на странице ASP.NET AJAX, средство просмотра разбивает каждую часть сообщения на отдельные части, как показано на рис. 8. Это отличная функция, которая значительно упрощает просмотр и понимание содержимого сообщения по сравнению с просмотром необработанных данных сообщения.

Рис. 8. Ответное сообщение UpdatePanel, просмотреное с помощью средства просмотра журнала HTTP. (Щелкните для просмотра полноразмерного изображения)

Существует несколько других средств, которые можно использовать для просмотра сообщений запросов и ответов в дополнение к вспомогательному средству веб-разработки. Еще один хороший вариант Fiddler, который доступен бесплатно в http://www.fiddlertool.com. Хотя Fiddler здесь не рассматривается, он также является хорошим вариантом, когда необходимо тщательно проверить заголовки и данные сообщений.

Отладка с помощью Firefox и Firebug

Хотя интернет-Обозреватель по-прежнему является наиболее широко используемым браузером, другие браузеры, такие как Firefox стали довольно популярными и используются все больше и больше. В результате вам потребуется просматривать и отлаживать страницы ASP.NET AJAX в Firefox, а также интернет-Обозреватель, чтобы обеспечить правильную работу приложений. Хотя Firefox не может напрямую связаться с Visual Studio 2008 для отладки, он имеет расширение Под названием Firebug, которое можно использовать для отладки страниц. Firebug можно скачать бесплатно, перейдя по ссылке http://www.getfirebug.com.

Firebug предоставляет полнофункциональный режим отладки, который можно использовать для пошагового выполнения кода построчно, доступа ко всем скриптам, используемым на странице, просмотра структур DOM, отображения стилей CSS и даже отслеживания событий, происходящих на странице. После установки firebug можно получить доступ, выбрав Инструменты Firebug Открыть Firebug в меню Firefox. Как и вспомогатель веб-разработки, Firebug используется непосредственно в браузере, хотя его также можно использовать в качестве автономного приложения.

После запуска Firebug точки останова можно задать в любой строке файла JavaScript независимо от того, внедрен ли скрипт в страницу или нет. Чтобы задать точку останова, сначала загрузите соответствующую страницу, которую вы хотите отладить в Firefox. После загрузки страницы выберите скрипт для отладки из раскрывающегося списка Скрипты Firebug. Будут показаны все скрипты, используемые страницей. Чтобы установить точку останова, щелкните в серой области лотка Firebug в строке, где должна идти точка останова, как в Visual Studio 2008.

После установки точки останова в Firebug можно выполнить действие, необходимое для выполнения скрипта, который необходимо отладить, например нажать кнопку или обновить браузер для активации события onLoad. Выполнение автоматически останавливается в строке, содержащей точку останова. На рисунке 9 показан пример точки останова, которая была активирована в Firebug.

Рис. 9. Обработка точек останова в Firebug. (Щелкните для просмотра полноразмерного изображения)

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

Firebug также включает окно консоли, которое можно использовать для тестирования различных операторов скрипта, оценки переменных и просмотра выходных данных трассировки. Для доступа к нему щелкните вкладку Консоль в верхней части окна Firebug. Отлаживаемую страницу также можно "проверить", чтобы увидеть ее структуру DOM и содержимое, щелкнув вкладку Проверка. При наведении указателя мыши на различные элементы DOM, отображаемые в окне инспектора, будет выделена соответствующая часть страницы, что позволит легко увидеть, где элемент используется на странице. Значения атрибутов, связанные с заданным элементом, можно изменить в режиме реального времени, чтобы поэкспериментировать с применением различных ширин, стилей и т. д. в элемент . Это хорошая функция, которая избавляет вас от необходимости постоянно переключаться между редактором исходного кода и браузером Firefox, чтобы просмотреть, как простые изменения влияют на страницу.

На рисунке 10 показан пример использования инспектора DOM для поиска текстового поля с именем txtCountry на странице. Инспектор Firebug также можно использовать для просмотра стилей CSS, используемых на странице, а также событий, которые происходят, например отслеживания движений мыши, щелчков кнопок и т. д.

Рис. 10. Использование инспектора DOM Firebug. (Щелкните для просмотра полноразмерного изображения)

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

Поддержка отладки в ASP.NET AJAX

Библиотека ASP.NET AJAX включает множество различных классов, которые можно использовать для упрощения процесса добавления возможностей AJAX в веб-страницу. Эти классы можно использовать для поиска элементов на странице и управления ими, добавления новых элементов управления, вызова веб-служб и даже обработки событий. Библиотека ASP.NET AJAX также содержит классы, которые можно использовать для улучшения процесса отладки страниц. В этом разделе вы познакомитесь с классом Sys.Debug и узнаете, как его можно использовать в приложениях.

Использование класса Sys.Debug

Класс Sys.Debug (класс JavaScript, расположенный в пространстве имен Sys) можно использовать для выполнения нескольких различных функций, включая запись выходных данных трассировки, выполнение проверочных утверждений кода и принудительное сбой кода для его отладки. Он широко используется в отладочных файлах библиотеки ASP.NET AJAX (установленных в папке C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\MicrosoftAjaxLibrary\System.Web.Extensions\1.0.61025.0 по умолчанию) для выполнения условных тестов (называемых проверочными утверждениями), которые гарантируют правильную передаче параметров функциям, содержат ли объекты ожидаемые данные и записывают инструкции трассировки.

Класс Sys.Debug предоставляет несколько различных функций, которые можно использовать для обработки трассировки, утверждений кода или сбоев, как показано в таблице 1.

Таблица 1. Функции класса Sys.Debug.

Имя функции	Описание
assert(condition, message, displayCaller)	Утверждает, что параметр условия имеет значение true. Если проверяемое условие имеет значение false, для отображения значения параметра сообщения будет использоваться окно сообщения. Если параметр displayCaller имеет значение true, метод также отображает сведения о вызывающем объекте.
clearTrace()	Удаляет выходные данные инструкций из операций трассировки.
fail(message)	Приводит к остановке выполнения программы и прерыванию в отладчике. Параметр message можно использовать, чтобы указать причину сбоя.
trace(message)	Записывает параметр сообщения в выходные данные трассировки.
traceDump(object, name)	Выводит данные объекта в доступном для чтения формате. Параметр name можно использовать для предоставления метки для дампа трассировки. Все вложенные объекты в дампе объекта будут записаны по умолчанию.

Трассировку на стороне клиента можно использовать практически так же, как функции трассировки, доступные в ASP.NET. Это позволяет легко просматривать различные сообщения, не прерывая поток приложения. В листинге 5 показан пример использования функции Sys.Debug.trace для записи в журнал трассировки. Эта функция просто принимает сообщение, которое должно быть записано в качестве параметра.

Листинг 5. Использование функции Sys.Debug.trace.

function BuildPerson()
{
 var address = new XmlForAsp.Address($get("txtStreet").value, $get("txtCity").value, $get("txtState").value, $get("txtZip").value);
 var person = new XmlForAsp.Person(null, $get("txtFirstName").value, $get("txtLastName").value, address);
 Sys.Debug.trace("Person's name: " + person.get_firstName() + " " + person.get_lastName());
 UpdatePerson(person);
}

При выполнении кода, показанного в листинге 5, на странице не будут отображаться выходные данные трассировки. Единственный способ увидеть его — использовать окно консоли, доступное в Visual Studio .NET, вспомогательную веб-разработку или Firebug. Если вы хотите просмотреть выходные данные трассировки на странице, необходимо добавить тег TextArea и присвоить ему идентификатор TraceConsole, как показано далее:

<textArea id="TraceConsole" rows="10" cols="50"></textArea>

Все инструкции Sys.Debug.trace на странице будут записаны в traceConsole TextArea.

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

Листинг 6. Использование функции Sys.Debug.traceDump.

function UpdatePerson(person)
{
 //Dump contents of the person object to the trace output
 Sys.Debug.traceDump(person,"Person Data");

 alert("Person updated! " + person.get_firstName() + " " + person.get_lastName());
}

На рисунке 11 показаны выходные данные вызова функции Sys.Debug.traceDump. Обратите внимание, что помимо записи данных объекта Person, он также записывает данные вложенного объекта Address.

Помимо трассировки, класс Sys.Debug также можно использовать для выполнения проверочных утверждений кода. Утверждения используются для проверки выполнения определенных условий во время выполнения приложения. Отладочная версия скриптов библиотеки ASP.NET AJAX содержит несколько операторов assert для проверки различных условий.

В листинге 7 показан пример использования функции Sys.Debug.assert для проверки условия. Код проверяет, имеет ли объект Address значение NULL перед обновлением объекта Person.

Рис. 11. Выходные данные функции Sys.Debug.traceDump. (Щелкните для просмотра полноразмерного изображения)

Листинг 7. Использование функции debug.assert.

function UpdatePerson(person)
{
 //Check if address is null
 Sys.Debug.assert(person.get_address() == null,"Address is null!",true);

 alert("Person updated! " + person.get_firstName() + " " + person.get_lastName());
}

Передаются три параметра, включая условие для вычисления, сообщение, отображаемое, если утверждение возвращает значение false, и необходимость отображения сведений о вызывающем объекте. В случаях, когда утверждение завершается сбоем, отображается сообщение, а также сведения о вызывающем объекте, если третий параметр имеет значение true. На рисунке 12 показан пример диалогового окна сбоя, которое появляется в случае сбоя утверждения, показанного в листинге 7.

Окончательная функция для покрытия — Sys.Debug.fail. Если требуется принудительно выполнить сбой кода в определенной строке скрипта, можно добавить вызов Sys.Debug.fail, а не инструкцию отладчика, обычно используемую в приложениях JavaScript. Функция Sys.Debug.fail принимает один строковый параметр, представляющий причину сбоя, как показано ниже:

Sys.Debug.fail("My forced failure of script.");

Рис. 12. Сообщение об ошибке Sys.Debug.assert. (Щелкните для просмотра полноразмерного изображения)

При обнаружении инструкции Sys.Debug.fail во время выполнения скрипта значение параметра сообщения будет отображаться в консоли отладочного приложения, например Visual Studio 2008, и вам будет предложено выполнить отладку приложения. Один из случаев, когда это может быть очень полезно, — если вы не можете установить точку останова с помощью Visual Studio 2008 во встроенном скрипте, но хотите, чтобы код остановился на определенной строке, чтобы можно было проверить значение переменных.

Основные сведения о свойстве ScriptMode элемента управления ScriptManager

Библиотека ASP.NET AJAX включает версии скриптов отладки и выпуска, которые по умолчанию устанавливаются по адресу C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 расширения AJAX\v1.0.61025\MicrosoftAjaxLibrary\System.Web.Extensions\1.0.61025.0. Скрипты отладки хорошо отформатированы, удобны для чтения и имеют несколько разбросанных по ним вызовов Sys.Debug.assert, в то время как скрипты выпуска лишены пробелов и используют класс Sys.Debug, чтобы свести к минимуму их общий размер.

Элемент управления ScriptManager, добавленный на страницы ASP.NET AJAX, считывает атрибут отладки элемента компиляции в web.config, чтобы определить, какие версии скриптов библиотеки следует загрузить. Однако вы можете управлять загрузкой скриптов отладки или выпуска (скрипты библиотеки или собственные пользовательские скрипты), изменив свойство ScriptMode. ScriptMode принимает перечисление ScriptMode, члены которого включают Auto, Debug, Release и Inherit.

ScriptMode по умолчанию имеет значение Auto, что означает, что ScriptManager будет проверка атрибут отладки в web.config. Если параметр debug имеет значение false, ScriptManager загрузит версию выпуска ASP.NET скриптов библиотеки AJAX. Если параметр debug имеет значение true, будет загружена отладочная версия скриптов. Изменение свойства ScriptMode на Release или Debug приведет к тому, что ScriptManager будет загружать соответствующие скрипты независимо от того, какое значение атрибут отладки имеет в web.config. В листинге 8 показан пример использования элемента управления ScriptManager для загрузки скриптов отладки из библиотеки ASP.NET AJAX.

Листинг 8. Загрузка скриптов отладки с помощью ScriptManager.

<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug"></asp:ScriptManager>

Вы также можете загружать различные версии (отладка или выпуск) собственных пользовательских скриптов с помощью свойства ScriptManager ScriptManager вместе с компонентом ScriptReference, как показано в листинге 9.

Листинг 9. Загрузка пользовательских скриптов с помощью ScriptManager.

<asp:ScriptManager ID="ScriptManager1" runat="server">
 <Scripts>
 <asp:ScriptReference Path="~/Scripts/Person.js" ScriptMode="Debug"/>
 </Scripts>
</asp:ScriptManager>

Примечание

Если вы загружаете пользовательские скрипты с помощью компонента ScriptReference, необходимо уведомить ScriptManager о завершении загрузки скрипта, добавив следующий код в нижней части скрипта:

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

Код, показанный в листинге 9, указывает ScriptManager на поиск отладочной версии скрипта Person, чтобы он автоматически искал Person.debug.js вместо Person.js. Если файл Person.debug.js не найден, возникает ошибка.

В случаях, когда требуется загрузить отладочную или выпускную версию настраиваемого скрипта на основе значения свойства ScriptMode, заданного в элементе управления ScriptManager, можно задать для свойства ScriptMode элемента управления ScriptReference значение Inherit. Это приведет к загрузке правильной версии настраиваемого скрипта на основе свойства ScriptMode ScriptManager, как показано в листинге 10. Так как свойству ScriptMode элемента управления ScriptManager присвоено значение Отладка, скрипт Person.debug.js будет загружен и использован на странице.

Листинг 10. Наследование ScriptMode от ScriptManager для пользовательских скриптов.

<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug">
 <Scripts>
 <asp:ScriptReference Path="~/Scripts/Person.js" ScriptMode="Inherit"/>
 </Scripts>
</asp:ScriptManager>

С помощью свойства ScriptMode можно упростить отладку приложений и упростить общий процесс. Скрипты выпуска библиотеки ASP.NET AJAX довольно трудно выполнить пошагово и прочитать, так как форматирование кода было удалено, а скрипты отладки форматируются специально для целей отладки.

Заключение

Технология ASP.NET AJAX корпорации Майкрософт обеспечивает прочную основу для создания приложений с поддержкой AJAX, которые могут улучшить работу пользователей в целом. Однако, как и в случае с любой технологией программирования, ошибки и другие проблемы с приложениями, безусловно, возникнут. Знание различных доступных вариантов отладки может сэкономить много времени и сделать продукт более стабильным.

В этой статье вы ознакомились с несколькими различными методами отладки ASP.NET страниц AJAX, включая интернет-Обозреватель с Visual Studio 2008, вспомогательную веб-разработку и Firebug. Эти средства могут упростить общий процесс отладки, так как вы можете получить доступ к переменным данным, построчно просматривать код и просматривать инструкции трассировки. Помимо различных средств отладки, вы также узнали, как можно использовать в приложении класс Sys.Debug библиотеки ASP.NET AJAX и как класс ScriptManager можно использовать для загрузки отладочных или выпускных версий скриптов.

Биография

Дэн Валин (Dan Wahlin) (Microsoft Most Valuable Professional для ASP.NET и XML Web Services) является инструктором по разработке .NET и консультантом по архитектуре на сайте Interface Technical Training (www.interfacett.com). Дэн основал веб-сайт XML для разработчиков ASP.NET (www.XMLforASP.NET), находится в бюро докладчика INETA и выступает на нескольких конференциях. Дэн является соавтором professional Windows DNA (Wrox), ASP.NET: Tips, Tutorials and Code (Sams), ASP.NET 1.1 Insider Solutions, Professional ASP.NET 2.0 AJAX (Wrox), ASP.NET 2.0 MVP Hacks и автор XML для разработчиков ASP.NET (Sams). Когда он не пишет код, статьи или книги, Дэн любит писать и записывать музыку и играть в гольф и баскетбол со своей женой и детьми.

Скотт Кейт работает с веб-технологиями Майкрософт с 1997 года и является президентом myKB.com (www.myKB.com), где он специализируется на написании ASP.NET приложений, ориентированных на программное обеспечение базы знаний. С Скоттом можно связаться по электронной почте по адресу scott.cate@myKB.com или в его блоге на ScottCate.com

Назад