Пошаговое руководство. Отладка веб-страниц в Visual Web Developer

Статья
11/05/2008

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

Visual Web Developer предоставляет пользователю инструменты для отслеживания ошибок на веб-страницах ASP.NET Web pages. В данном пошаговом руководстве разъяснены принципы работы с отладчиком, позволяющие работать с кодом страницы построчно и изучать значения переменных.

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

В этом пошаговом руководстве, в частности, рассматриваются следующие задачи:

Определение точек останова.
Вызов отладчика из страницы Web Forms на веб-узле на базе файловой системы.

Обязательные компоненты

Для выполнения этого пошагового руководства потребуется:

Visual Web Developer и платформа .NET Framework.

Кроме того, следует понимать основные принципы работы в Visual Web Developer. Введение в Visual Web Developer см. в разделе Пошаговое руководство. Создание базовой веб-страницы в Visual Web Developer.

Создание веб-узла и страницы

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

Если веб-узел уже создан в Visual Web Developer (например, при работе с разделом Пошаговое руководство. Создание базовой веб-страницы в Visual Web Developer ), можно использовать этот веб-узел и перейти к следующему разделу данного руководства "Добавление элементов управления для отладки". В противном случае создайте новый веб-узел и страницу, выполнив следующие действия.

Создание веб-узла на базе файловой системы

Откройте Visual Web Developer.
В меню Файл выберите Создать, Веб-узел.

Откроется диалоговое окно Создать веб-узел.
В группе Установленные шаблоны Visual Studio выберите Веб-узел ASP.NET.
В поле Расположение выберите поле Файловая система и введите имя папки, в которой будут храниться страницы веб-узла.

Например, введите имя папки C:\WebSites.
В списке Язык выберите язык программирования, с которым вы предпочитаете работать.

Выбранный язык программирования будет установлен как язык по умолчанию для данного веб-узла. Тем не менее, можно использовать несколько языков в одном и том же веб-приложении путем создания страниц и компонентов на различных языках программирования. Дополнительные сведения о том, как создавать компоненты с использованием различных языков, содержатся в разделе Общие папки кода на веб-узлах ASP.NET.
Нажмите кнопку OК.

Visual Web Developer создаст папку и новую страницу с именем Default.aspx.

Создание страницы для отладки

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

Добавление страниц в веб-узел

Закройте страницу Default.aspx.
В обозревателе решений щелкните правой кнопкой мыши имя веб-узла (например, C:\WebSite) и выберите команду Добавление нового элемента.
Под заголовком Установленные шаблоны Visual Studio выберите Web Forms.
В поле Имя введите DebugPage.aspx.
В списке Язык выберите предпочитаемый язык программирования
Снимите флажок Поместить код в отдельном файле.

В данном пошаговом руководстве показано создание страницы в одном файле, содержащей и код, и HTML. Код страниц ASP.NET может находиться как на странице, так и в отдельном файле класса. Подробные сведения о сохранении кода в отдельном файле см. в разделе Пошаговое руководство. Создание базовой веб-страницы с разделением кода в Visual Web Developer.
Выберите команду Добавить.

Visual Web Developer создаст новую страницу и откроет ее в режиме просмотра исходного кода.

Теперь на страницу можно добавлять новые элементы управления и код. Код будет достаточно простым, однако, в дальнейшем в него можно добавлять точки останова.

Добавление элементов управления и кода для отладки.

Следует перейти в режим Конструктора и из папки Стандартные в меню Панель элементов перетащить следующие элементы управления на страницу и задать их свойства, как показано далее:

Элемент управления	Свойства
Label	Идентификатор: CaptionLabel Текст: (пустой)
TextBox	Идентификатор: NumberTextBox Текст: (пустой)
Button	Идентификатор: SquareButton Текст: Square
Label	Идентификатор: ResultLabel Текст: (пустой)

Примечание.
Для данного пошагового руководства макет страницы не имеет значения.

Дважды щелкните элемент управления Button для создания обработчика его события Click.

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

Примечание.
В данном примере код намеренно не содержит проверок на наличие ошибок.

Sub SquareButton_Click(ByVal sender As Object, _
    ByVal e As System.EventArgs)
    Dim number As Integer
    Dim result As Integer
    number = CInt(NumberTextBox.Text)
    result = Square(number)
    ResultLabel.Text = CStr(number) & " squared is " & CStr(result)
End Sub

protected void SquareButton_Click(object sender, System.EventArgs e)
{
    int number, result; 
    number = System.Convert.ToInt32(NumberTextBox.Text);
    result = Square(number);
    ResultLabel.Text = NumberTextBox.Text + 
        " squared is " + result.ToString();
}

Необходимо создать функцию, которая возводит число в квадрат. В код следует включить ошибку: число будет прибавляться к самому себе, а не умножаться на самое себя. Код может выглядеть следующим образом:
```
Function Square(number As Integer) As Integer
    Square = number + number
End Function
```
```
int Square(int number )
{    
    int Square;
    Square = number + number;
    return Square;
}
```

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

Изменение элемента управления "Метка" заголовка.

В режиме Конструктора дважды щелкните по рабочей области конструирования (не по элементу управления), чтобы создать обработчик событий Page_Load.
Введите текст для элемента управления Вставляемый заголовок как Введите число:, если страница запущена впервые, или, если страница запускается не в первый раз, Введите следующее число:. Обработчик будет выглядеть так, как показано в следующем примере кода:
```
Sub Page_Load(ByVal sender As Object, ByVal e as System.EventArgs)
    If Page.IsPostBack = False Then
        CaptionLabel.Text = "Enter a number: "
    Else
        CaptionLabel.Text = "Enter another number: "
    End If
End Sub
```
```
if(Page.IsPostBack == false)
{
    CaptionLabel.Text = "Enter a number: ";
}
else {
    CaptionLabel.Text = "Enter another number: " ;
}
```

Проверка страницы

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

Запуск страницы

Сохраните эту страницу.
Нажмите сочетание клавиш CTRL+F5, чтобы запустить страницу.
Введите число 3 и нажмите кнопку Возвести в квадрат.

Обратите внимание, что результат неверен, поскольку программа содержит ошибку. Правильным результатом является число 9.
Закройте веб-обозреватель.

Отладка страницы

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

Для начала следует определить в коде точки останова. Точка останова является строкой кода, в которой выполнение кода прерывается и выполняется вызов отладчика.

Определение точки останова

Перейдите в представление Исходный код.
Щелкните правой кнопкой мыши следующую сроку, выберите пункт Точка останова, а затем команду Вставить точку останова.

Примечание.

Включать и отключать точки останова можно с помощью клавиши F9.
```
If Page.IsPostBack = False Then
```
```
if(Page.IsPostBack == false)
```
В следующей строке обработчика SquareButton_Click необходимо задать еще одну точку останова:
```
result = Square(number)
```
```
result = Square(number);
```
Примечание.

Нельзя задать точку останова в инструкции, в которой объявляется переменная.

Примечание.
Включать и отключать точки останова можно с помощью клавиши F9.

Примечание.
Нельзя задать точку останова в инструкции, в которой объявляется переменная.

Если задана по крайней мере одна точка останова, можно запускать отладчик.

Запуск отладчика

Из меню Отладка выберите команду Запустить отладчик (или нажмите клавишу F5), чтобы запустить страницу в режиме отладчика.

Если до этого запуск отладчика не выполнялся, возможно, потребуется настройка поддержка отладчика в приложении. По умолчанию функция отладки в приложениях отключена в целях повышения производительности (страницы в режиме отладчика работают медленнее), а также из соображений безопасности. Visual Web Developer выводит сообщение с инструкциями по включению функции отладки.

Переключатель для включения функции отладки хранится в качестве параметра в файле Web.config, содержащем различные параметры конфигурации, специфические для веб-узлов. Если файл Web.config не существует, Visual Web Developer создаст этот файл и выполнит соответствующую настройку отладчика.

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

В Visual Web Developer при переключении конструктор в режим отладчика отображается код страницы и окна отладчика.

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

Поскольку точка останова содержится в обработчике Page_Load, страница не завершает обработку. Обозреватель открыт, однако страница еще не отображается.

В меню Отладка выберите пункт Окна, затем пункт Контрольные значения, а затем Контрольные значения 1.

Примечание.
При работе с Visual Web Developer, экспресс-выпуск отладчик выводит только окно Контрольные значения.

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

В редакторе следует щелкнуть правой кнопкой мыши в части IsPostBack выражения Page.IsPostBack, а затем выбрать командуДобавить контрольное значение.

Таким образом выражение добавляется в окно Контрольные значения, и отображается текущее значение свойства (false) в столбце Значение. По желанию можно ввести имя переменной или свойства в столбец Имя в окне Контрольные значения.
В меню Отладка необходимо выбрать команду Продолжить, чтобы продолжить выполнение, или нажать клавишу F5.

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

Снова отображается отладчик, а также точка останова в строке обработчика Page_Load. В этот раз в окне Контрольные значения выводится сообщение о том, что Page.IsPostBack имеет значение true.
Снова нажмите клавишу F5, чтобы продолжить.

Отладчик обрабатывает обработчик Page_Load и выполняет вход в обработчик SquareButton_Click, где происходит прерывание в следующей заданной точке останова.

В меню Отладка выберите пункт Окна, а затем пункт Локальные переменные.

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

В окне Локальные переменные значение number равно 2, а значение result задано как 0.

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

В столбце Значение в окне Локальные переменные щелкните правой кнопкой мыши строку переменной number и выберите команду Редактировать значение. Отредактируйте значение переменной number и измените его на 5.

Значение 2 переменной number не является достоверной проверкой работоспособности программы, поскольку как сложение, так и возведение в квадрат значения 2 дают одинаковый результат: 4. Таким образом, во время работы программы можно изменить значение данной переменной.
В меню Отладка выберите команду Шаг с заходом, чтобы выполнить вхождение в функцию Square, или нажмите клавишу F11.

Команда Шаг с заходом также указывает отладчику на то, что необходимо выполнить строку кода и после этого приостановить работу.
Следует продолжить выполнение команды, нажимая клавишу F11 до тех пор, пока не будет достигнута следующая строка кода.
```
ResultLabel.Text = CStr(number) & " squared is " & CStr(result)
```
```
    ResultLabel.Text = NumberTextBox.Text + 
        " squared is " + result.ToString();
```
Отладчик выполняет построчный запуск кода. При выполнении отладчиком функции Square можно использовать окно Локальные переменные, чтобы проверить данные, переданные функции (number) и возвращаемое значение функции (Square).
В меню Отладка выберите пункт Окна, и затем пункт Интерпретация.

Окно Интерпретация позволяет выполнять команды. Можно использовать данное окно для вычисления выражений (например, чтобы получить значение свойства).
В окне Интерпретация необходимо ввести следующее выражение и нажать клавишу ВВОД.
```
? NumberTextBox.Text
```
Вопросительный знак (?) является оператором в окне Интерпретация, вычисляющим выражение, следующее за ним. В этом примере описывается порядок вычисления свойства Text для элемента управления NumberTextBox на странице. Можно вычислить любую переменную, свойство объекта или выражение, в котором сочетается все вышеупомянутое, используя тот же синтаксис, что и для кода.
В окне Интерпретация необходимо ввести следующее, а затем нажать клавишу ВВОД:
```
NumberTextBox.Text = "5"
```
Помимо вычисления выражений, окно Интерпретация позволяет изменять переменные и свойства.
Нажмите клавишу F5 чтобы продолжить выполнение программы.

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

Отображаемый результат — 10 — неверен, поскольку 10 не является квадратом числа 5. Теперь можно приступать к исправлению ошибки.

Исправление ошибки и повторная проверка

Перейдите из обозревателя в Visual Web Developer.

Примечание.

Не закрывайте окно обозревателя.
В функции Square измените оператор "+" на оператор "*".

Поскольку код в данный момент не выполняется (страница завершила обработку), можно вносить постоянные изменения в режиме редактирования.
Нажмите клавиши CTRL+S, чтобы сохранить страницу.
В меню Отладка выберите команду Удалить все точки останова, чтобы страница не останавливала работу каждый раз при запуске.

Примечание.

Также можно удалить точки останова, нажав клавиши CTRL+SHIFT+F9.
Перейдите в окно обозревателя.
В текстовом поле введите 5 и нажмите на кнопку.

Теперь при запуске страницы и вводе значения выполняется корректное возведение числа в квадрат. Временные изменения, внесенные ранее, например, изменение свойства Text элемента управления NumberTextBox, являются недействительными, поскольку были применимы только при последнем запуске страницы.
Закройте окно обозревателя, чтобы остановить отладчика.

Примечание.
Не закрывайте окно обозревателя.

Примечание.
Также можно удалить точки останова, нажав клавиши CTRL+SHIFT+F9.

Следующие действия

Отладчик включает также дополнительные функциональные возможности, которые облегчают работу с кодом. Кроме того, также можно изучить некоторые приемы обработки ошибок и способы отслеживания обработки страницы во время выполнения. Например, можно изучить трассировку. Дополнительные сведения см. в разделе Пошаговое руководство. Использование трассировки в Visual Web Developer для поиска ошибок на веб-страницах.

См. также

Другие ресурсы

Отладка в Visual Studio

Поделиться через