Общие сведения об отладке и трассировке приложений AJAX

Статья
10/22/2014

Обновлен: Ноябрь 2007

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

Примечание.
За исключением Visual Studio и обозревателя Internet Explorer, программы, о которых идет речь в данном разделе, являются сторонними средствами и не поддерживаются корпорацией Майкрософт. Сведения о лицензировании и поддержке можно найти на веб-узлах данных средств.

За исключением Visual Studio и обозревателя Internet Explorer, программы, о которых идет речь в данном разделе, являются сторонними средствами и не поддерживаются корпорацией Майкрософт. Сведения о лицензировании и поддержке можно найти на веб-узлах данных средств.

В этом разделе содержатся следующие подразделы:

Сценарии
Основные сведения
Ссылка на класс

Сценарии

Можно использовать следующие подходы, чтобы выполнить отладку приложений ASP.NET с включенной технологией AJAX на разных этапах разработки:

включение отладки в файле конфигурации;
использование трассировки на сервере;
использование методов класса Sys.Debug для установки точек останова и обработки данных трассировки;
включение отладки в веб-обозревателе;
вложение отладчика Visual Studio 2008 в экземпляр обозревателя Internet Explorer или использование внешних средств для отладки в других веб-обозревателях;
использование внешних средств для перехвата HTTP-трафика.

К началу

Основные сведения

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

В вспомогательном классе отладчика Sys.Debug предоставлены методы вывода объектов в форме для чтения в конце веб-страницы. Также выводятся сообщения трассировки, предоставляется возможность использования утверждений и переключения в режим отладчика. Расширенный интерфейс API объекта Error предоставляет полезные сведения об исключении и поддерживает их предоставление в режимах выпуска и отладки.

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

Настройка приложения для отладки

Чтобы включить отладку, добавьте элемент compilation в корневой файл Web.config веб-узла, затем задайте атрибуту этого элемента debug значение true. Дополнительные сведения см. в разделе Элемент compilation (схема параметров ASP.NET).

В следующем примере показан раздел файла Web.config, который имеет атрибут debug, заданный для отладки:

<configuration>
  <system.web>
    <compilation debug="true">
      <!-- etc. -->
    </compilation>
  </system.web>
<configuration>

При включенной отладке в ASP.NET используются отладочная версия Microsoft AJAX (библиотека) и отладочная версия пользовательских файлов клиентского сценария, если эти файлы доступны.

Установка приложения в режим выпуска из режима отладки для развертывания

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

В файле Web.config, если элемент compilation содержит атрибут debug, убедитесь, что атрибуту debug задано значение false.
Убедитесь, что любая веб-страница, которая содержит элемент управления ScriptManager, имеет свойство ScriptMode, которому задано значение Release.

Атрибут debug директивы @ Page не воздействует на приложения ASP.NET с включенной технологией AJAX. В элементе управления ScriptManager используются только параметры из файла Web.config и свойства IsDebuggingEnabled и ScriptMode, чтобы определить, необходимо ли отобразить сценарии отладки.

Трассировка на сервере

Если на сервере используется трассировка для отладки веб-страниц, для которых включено частичное формирование страниц, необходимо использовать средство просмотра трассировки (Trace.axd), чтобы отобразить данные трассировки. Можно дополнить данные трассировки до конца страницы, и эти данные будут выводиться при первом формировании страницы. Однако монитор трассировки не обновляется в результате асинхронных передач, поскольку изменяется только содержимое элементов управления UpdatePanel, которое должно быть обновлено.Дополнительные сведения об использовании средства просмотра трассировки см. в разделе Общие сведения о трассировке ASP.NET.

Примечание.
Частичное формирование страниц включено, когда страница содержит элемент управления ScriptManager со свойством EnablePartialRendering, которому задано значение true. Страница также должна содержать элементы управления UpdatePanel.

Вспомогательный класс отладки

ASP.NET предоставляет класс Sys.Debug для отладки клиентских приложений. Вызывая методы класса Sys.Debug, можно отображать объекты в понятном виде в конце страницы, показывать сообщения трассировки, использовать утверждения и переходить в режим отладчика.

При использовании Visual Studio и обозревателя Internet Explorer можно присоединить отладчик Visual Studio к веб-обозревателю и просмотреть сообщения трассировки отладчика в окне Вывод. Если Visual Studio не используется, сообщения трассировки отладчика можно просмотреть в обозревателе Internet Explorer, создав элемент textarea на странице и задав идентификатору этого элемента значение TraceConsole. В веб-обозревателе Mozilla Firefox можно просмотреть сообщения отладчика о трассировке с помощью средств, которые доступны в качестве расширений. Веб-обозреватели Apple Safari и Opera отображают сообщения отладчика о трассировке в соответствующих консолях отладки.

В следующей таблице перечислены методы класса Sys.Debug:

Sys.Debug.assert(условие, сообщение, displayCaller)
Проверяет условие и, если оно имеет значение false, отображает сообщение и предлагает пользователю переключиться в режим отладчика.
Sys.Debug.clearTrace()
Удаляет все сообщения трассировки из элемента TraceConsoletextarea.
Sys.Debug.traceDump(объект, имя)
Отображает объект на консоли отладчика и в элементе TraceConsoletextarea, если он доступен.
Sys.Debug.fail(сообщение)
Отображает сообщение в окне вывода отладчика и переключается в режим отладчика.
Sys.Debug.trace(текст)
Добавляет текстовую строку в консоль отладчика и в TraceConsole элемента textarea, если он доступен.

В следующем примере показано, как вызвать методы класса Sys.Debug:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
<script language="javascript" type="text/javascript">
function btnAssert_onclick() {
    var n;
    // Insert code intended to set n to a positive integer.
    if (false) n = 3;
    // Assert if n is not greater than 0.
    Sys.Debug.assert(n > 0, "n must be set to a positive integer.");
}

function btnFail_onclick() {
    var n;
    // Insert code intended to set n to a numeric value.
    if (false) n = 3;
    // Fail if n is not numeric.
    if (isNaN(n)) Sys.Debug.fail("The value of n must be a number.");
}

function btnTrace_onclick() {
    v = form1.text1.value;
    Sys.Debug.trace("Name set to " + "\"" + v + "\".");
    alert("Hello " + v + ".");
}

function btnDump_onclick() {
    Sys.Debug.traceDump(form1.text1, "Name textbox");
    alert("Hello " + form1.text1.value + ".");
}

function btnClear_onclick() {
    Sys.Debug.clearTrace()
    alert("Trace console cleared.");
}
</script>
</head>
<body>
<form id="form1" runat="server">
    <h2>Sys.Debug Methods Test Page</h2>
    <asp:ScriptManager ID="ScriptManager1" 
        runat="server" />
    <p><b>Use these buttons to demonstrate the assert() and fail() 
    methods:</b><br />
    <input id="btnAssert" type="button" value="Assert" 
        style="width: 100px" 
        onclick="return btnAssert_onclick()" /> &nbsp
    <input id="btnFail" type="button" value="Fail" 
        style="width: 100px" onclick="return btnFail_onclick()" />
    </p><hr />
    <b>Use the textbox and buttons below to demonstrate tracing.</b>
    <br />
    <p>Enter your name here:<br />
    <input id="text1" maxlength="50" type="text" />
    <br />
    <br />
    <input id="btnTrace" type="button" value="Trace" 
        style="width: 100px" onclick="return btnTrace_onclick()" /><br />
    <input id="btnDump" type="button" value="TraceDump" 
        style="width: 100px" onclick="return btnDump_onclick()" /><br />
    <input id="btnClear" type="button" value="ClearTrace" 
        style="width: 100px" onclick="return btnClear_onclick()" /><br />
    <br /></p>
    View output in the TraceConsole textarea below.
    <br />
    <textarea id='TraceConsole' rows="10" cols="50" 
        title="TraceConsole"></textarea>
</form>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
<script language="javascript" type="text/javascript">
function btnAssert_onclick() {
    var n;
    // Insert code intended to set n to a positive integer.
    if (false) n = 3;
    // Assert if n is not greater than 0.
    Sys.Debug.assert(n > 0, "n must be set to a positive integer.");
}

function btnFail_onclick() {
    var n;
    // Insert code intended to set n to a numeric value.
    if (false) n = 3;
    // Fail if n is not numeric.
    if (isNaN(n)) Sys.Debug.fail("The value of n must be a number.");
}

function btnTrace_onclick() {
    v = form1.text1.value;
    Sys.Debug.trace("Name set to " + "\"" + v + "\".");
    alert("Hello " + v + ".");
}

function btnDump_onclick() {
    Sys.Debug.traceDump(form1.text1, "Name textbox");
    alert("Hello " + form1.text1.value + ".");
}

function btnClear_onclick() {
    Sys.Debug.clearTrace()
    alert("Trace console cleared.");
}
</script>
</head>
<body>
<form id="form1" runat="server">
    <h2>Sys.Debug Methods Test Page</h2>
    <asp:ScriptManager ID="ScriptManager1" 
        runat="server" />
    <p><b>Use these buttons to demonstrate the assert() and fail() 
    methods:</b><br />
    <input id="btnAssert" type="button" value="Assert" 
        style="width: 100px" 
        onclick="return btnAssert_onclick()" /> &nbsp
    <input id="btnFail" type="button" value="Fail" 
        style="width: 100px" onclick="return btnFail_onclick()" />
    </p><hr />
    <b>Use the textbox and buttons below to demonstrate tracing.</b>
    <br />
    <p>Enter your name here:<br />
    <input id="text1" maxlength="50" type="text" />
    <br />
    <br />
    <input id="btnTrace" type="button" value="Trace" 
        style="width: 100px" onclick="return btnTrace_onclick()" /><br />
    <input id="btnDump" type="button" value="TraceDump" 
        style="width: 100px" onclick="return btnDump_onclick()" /><br />
    <input id="btnClear" type="button" value="ClearTrace" 
        style="width: 100px" onclick="return btnClear_onclick()" /><br />
    <br /></p>
    View output in the TraceConsole textarea below.
    <br />
    <textarea id='TraceConsole' rows="10" cols="50" 
        title="TraceConsole"></textarea>
</form>
</body>
</html>

Настройка обозревателя Internet Explorer для отладки

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

Включение отладки в обозревателе Internet Explorer

В меню Сервис выберите пункт Свойства обозревателя.
На вкладке Дополнительно снимите флажок с пунктов Отключить отладку сценариев (обозреватель Internet Explorer) и Отключить отладку сценариев (другие).
Выберите пункт Показывать уведомление о каждой ошибке сценария.
Чтобы выключить подробные сообщения об ошибках, снимите флажок с пункта Выводить подробные сообщения об ошибках HTTP.

Если подробные сообщения об ошибках включены и длина ответа сервера на ошибку HTTP 500 менее 513 байт, содержимое маскируется обозревателем Internet Explorer. На месте сведения об ошибке, обозреватель Internet Explorer выводит сообщение, которое предназначается для конечных пользователей, а не для разработчиков.

Вложение Visual Studio Debugger в обозреватель Internet Explorer

Чтобы выполнить отладку клиентского сценария, необходимо присоединить отладчик к обозревателю Internet Explorer. В Visual Studio, если приложение запускается для отладки (нажатием клавиши F5 или с помощью команды Начать отладку в меню Отладка) отладчик присоединяется автоматически.

Можно также присоединить отладчик Visual Studio к обозревателю Internet Explorer, когда приложение уже запущено. Для этого в меню Отладка выберите пункт Присоединение к процессу.... В диалоговом окне Присоединение к процессу, выберите экземпляр обозревателя Internet Explorer (iexplore.exe), который необходимо присоединить к отладчику.

Примечание.
Если обозреватель Internet Explorer настроен для отладки, то в столбце Тип для соответствующего экземпляра обозревателя Internet Explorer отображено Script, x86. Если в столбце Тип отображается только x86, убедитесь, что обозреватель Internet Explorer настроен для отладки.

Если обозреватель Internet Explorer настроен для отладки, то в столбце Тип для соответствующего экземпляра обозревателя Internet Explorer отображено Script, x86. Если в столбце Тип отображается только x86, убедитесь, что обозреватель Internet Explorer настроен для отладки.

Если обозреватель Internet Explorer сталкивается с ошибкой сценария и настроен для отладки сценария, но не присоединен к отладчику, веб-обозреватель запросит выбрать отладчик. Можно либо продолжить без отладки, либо вложить отладчик и выполнить пошаговую отладку кода.

Известные проблемы отладки обозревателя Internet Explorer и их решение

При отладке приложений ASP.NET с включенной технологией AJAX, которые используют обозреватель Internet Explorer, необходимо знать о следующих проблемах и методах их разрешения:

После присоединения отладчика Visual Studio к обозревателю Internet Explorer можно увидеть список сценариев, для которых выполняется отладка, в окне Обозреватель сценариев. (Чтобы открыть это окно, в меню Отладка выберите пункт Окна, затем выберите Обозреватель сценариев.) Появится библиотека клиента ASP.NET AJAX как ресурс, начинающийся с ScriptResource.axd?..., который динамически генерируется сервером из сборки ASP.NET AJAX. Известная проблема в Visual Studio может препятствовать открытию файла. Если в Visual Studio отображается сообщение об ошибке или щелчки мышью по имени файла игнорируются, закройте все открытые файлы сценариев. Затем можно открыть страницу и выбрать файлы сценария, для которых необходимо выполнить отладку.
Нельзя задавать точки останова в коде JavaScript внутри элементов script на странице ASP.NET до начала отладки кода JavaScript на этой странице. Чтобы разрешить эту проблему, установите точку останова на функции, откуда происходит вызов, и перейдите к коду на веб-странице ASP.NET. После того как отладчик остановился на строке кода JavaScript на странице, можно задать точки останова в обычном порядке. Другой способ для того, чтобы отладчик распознавал сценарии на странице ASP.NET, состоит в создании метода на странице ASP.NET, который вызывает метод Sys.Debug.fail. При вызове этого метода отладчик остановится на вызове Sys.Debug.fail, и можно будет задать точки останова в каких-либо других местах. Третья альтернатива заключается в помещении всего пользовательского кода во внешние файлы JavaScript.
Visual Studio позволяет задавать точки останова на первой строке регулярной функции JavaScript, но не на первой строке анонимных методов, которые ASP.NET использует в библиотеках AJAX. Если анонимный метод содержит только одну строку кода или необходимо задать точку останова на первой строке анонимного метода, вставьте фиктивную строку кода. Затем можно задать точку останова на второй строке метода.

Известные проблемы IIS 7.0

Если выполняется страница ASP.NET, содержащая возможности AJAX, в IIS 7.0 на платформе Windows Vista, а в качестве режима управляемого конвейера задан режим Integrated, сценарии, обрабатываемые классом ScriptResourceHandler, не кэшируются. Однако сценарии кэшируются, если в качестве режима управляемого конвейера выбран режим Classic.

Дополнительные сведения о режиме управляемого конвейера служб IIS 7.0 см. в разделе Upgrading ASP.NET Applications to IIS 7.0: Differences between IIS 7.0 Integrated Mode and Classic Mode.

Перехват HTTP-трафика

При разработке веб-приложений часто полезно следить за HTTP-трафиком между сервером и клиентом. Средство, с помощью которого можно выполнить это задание, — это Fiddler, которое можно получить на веб-узле MSDN Fiddler PowerToy page. Fiddler выполняется как прокси-сервер, который ведет запись HTTP-трафика в журнал. Это средство поддерживает обозреватель Internet Explorer и другие веб-обозреватели. С помощью Fiddler можно проверять любой запрос и ответ, который включает заголовки, файлы Сookie и сообщения.

Отладка в Mozilla Firefox

Веб-обозреватель Mozilla Firefox не интегрирован с отладчиком Visual Studio. В результате нельзя использовать отладчик Visual Studio для пошаговой отладки клиентского кода, который выполняется в веб-обозревателе Firefox. Однако Firefox поддерживает некоторую функциональность отладки, например консоль JavaScript. Также можно установить следующие расширения, доступные в веб-обозревателе Mozilla, которые могут повысить возможности отладки:

FireBug предоставляет возможность пройти клиентский сценарий и проверить элементы HTML DOM. Также данное расширение предоставляет консоль сценария, командную строку и другие средства.
Отладчик JavaScript Debugger (также известный как Venkman) обеспечивает среду отладки JavaScript, в которую входят обозреватель исходного кода и другие функции.
Расширение Web Developer extension позволяет выполнять проверку стилей DOM и CSS.

Fiddler также работает с веб-обозревателем Firefox. Однако необходимо настроить Firefox на маршрутизацию HTTP-запросов через прокси-сервер, который выполняется на порту 8888 локального компьютера. Дополнительные сведения см. на странице «Configuring Clients» на веб-узле Fiddler.

К началу

Ссылка на класс

Класс Sys.Debug
Предоставляет методы, которые определяют точки останова и обрабатывают данные трассировки.

К началу

См. также

Задачи

Общие сведения о локализации ресурсов для библиотек компонентов

Основные понятия

Общие сведения о ASP.NET AJAX

Добавление клиентских возможностей и возможностей AJAX

Общие сведения об отладке и трассировке приложений AJAX

Сценарии

Основные сведения

Настройка приложения для отладки

Установка приложения в режим выпуска из режима отладки для развертывания

Трассировка на сервере

Вспомогательный класс отладки

Настройка обозревателя Internet Explorer для отладки

Включение отладки в обозревателе Internet Explorer

Вложение Visual Studio Debugger в обозреватель Internet Explorer

Известные проблемы отладки обозревателя Internet Explorer и их решение

Известные проблемы IIS 7.0

Перехват HTTP-трафика

Отладка в Mozilla Firefox

Ссылка на класс

См. также

Задачи

Основные понятия

Дополнительные ресурсы