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

74

Отладка приложения ASP.NET MVC может быть организована тем же способом, что и отладка приложения ASP.NET Web Forms. Отладчик Visual Studio является мощным и гибким инструментом, обладающим множеством средств и возможностей. В этой статье мы рассмотрим его лишь поверхностно, показав как настраивать отладчик и выполнять различные действия по отладке проекта MVC.

Для демонстрации использования отладчика мы создадим новый проект ASP.NET MVC с применением шаблона MVC, просто чтобы вы увидели, как устанавливается стандартное содержимое и конфигурация, а также ознакомились с результатом применения стандартной темы к представлениям. Новый проект назван Web Applicaion 2, как показано на рисунке ниже:

Создание нового проекта с использованием шаблона ASP.NET MVC

Щелкните на кнопке ОК. Среда Visual Studio создаст проект и добавит стандартные пакеты, файлы и папки, которые включают шаблон MVC. На рисунке ниже демонстрируется применение файлов и настроек добавленных в проект:

Добавления сделанные шаблоном проекта MVC

Здесь присутствуют элементы-заполнители для названия приложения и бренда и несколько указателей на документацию по MVC, NuGet и веб-хостинг. В верхней части экрана расположена панель навигации, а компоновка обладает рядом возможностей чувствительного дизайна. Чтобы увидеть создаваемый ими эффект, измените ширину окна.

В качестве части первоначального содержимого проекта среда Visual Studio создала контроллер Home, но мы заменим добавленный ею код тем, который приведен ниже:

using System.Web.Mvc;

namespace WebApplication2.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            int firstVal = 10;
            int secondVal = 5;
            int result = firstVal / secondVal;

            ViewBag.Message = "Отладка приложения ASP.NET MVC!";

            return View(result);
        }
    }
}

Среда Visual Studio также создала файл представления Views/Home/Index.cshtml, как часть настройки проекта. Нас не интересует его стандартное содержимое, поэтому мы заменяем его разметкой, показанной в примере ниже:

@model int

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
    <title>Index</title>
</head>
<body>
    <h2 class="message">@ViewData["Message"]</h2>
    <p>
       Результат расчета: @Model
    </p>
</body>
</html>

Последний подготовительный шаг, который понадобится предпринять - добавить стиль в файл /Content/Site.css и изменить один из существующих стилей. Файл Site.css создан средой Visual Studio в виде части шаблона проекта MVC и является стандартным местом размещения стилей CSS для приложения:

body { padding-top: 5px; padding-bottom: 5px; }
.field-validation-error { color: #b94a48; }
.field-validation-valid { display: none; }
input.input-validation-error { border: 1px solid #b94a48; }
input[type="checkbox"].input-validation-error { border: 0 none; }
.validation-summary-errors { color: #b94a48; }
.validation-summary-valid { display: none; }
.no-color { background-color: white; border-style:none; }
.message { font-size: 20pt; text-decoration: underline;}

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

Среда Visual Studio подготавливает новые проекты для отладки автоматически, однако полезно разобраться, каким образом можно изменять конфигурацию отладки. Важная настройка, связанная с отладкой, находится в файле Web.config, расположенном в корневой папке проекта, внутри элемента system.web:

<!-- ... -->
<system.web>
    <compilation debug="true" targetFramework="4.5.1" />
    <httpRuntime targetFramework="4.5.1" />
</system.web>

При выполнении приложения на сервере IIS производится много работ по компиляции проекта MVC Framework, поэтому необходимо удостовериться, что во время процесса разработки атрибут debug дескриптора compilation установлен в true. Это гарантирует возможность отладчику взаимодействовать с файлами классов, получаемыми при компиляции по требованию.

В дополнение к файлу Web.config понадобится обеспечить включение средой Visual Studio отладочной информации в создаваемые ею файлы классов. Это не является критичным, но может вызвать проблемы, если разные настройки отладки не синхронизированы. Удостоверьтесь, что в панели инструментов Visual Studio выбрана конфигурация Debug (Отладочная), как показано на рисунке ниже:

Выбор конфигурации Debug

Чтобы запустить отладку приложения MVC Framework, выберите пункт Start Debugging (Начать отладку) в меню Debug (Отладка) среды Visual Studio или щелкните на стрелке зеленого цвета в панели инструментов Visual Studio (на рисунке она находится слева от названия браузера, который будет использоваться для отображения приложения - в данном случае это Google Chrome).

Если при запуске отладчика атрибут debug в файле Web.config установлен в false, среда Visual Studio отобразит диалоговое окно, показанное на рисунке ниже. Выберите переключатель Modify the Web.config file to enable debugging (Модифицировать файл Web.config для включения отладки), щелкните на кнопке ОК и отладчик запустится:

Диалоговое окно, которое Visual Studio отображает, если в файле Web.config отладка отключена

В этот момент приложение запустится и отобразится в новом окне браузера. Отладчик присоединится к приложению, но вы не заметите никакой разницы до тех пор, пока не произойдет останов при отладке (что это значит - объясняется в следующем разделе). Чтобы остановить отладчик, выберите пункт Stop Debugging (Остановить отладку) в меню Debug среды Visual Studio или закройте окно браузера.

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

Останов отладчика Visual Studio

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

Использование точек останова

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

Чтобы создать точку останова, щелкните правой кнопкой мыши на операторе кода и выберите в контекстном меню пункт Breakpoint --> Insert Breakpoint (Точка останова --> Вставить точку останова). В качестве демонстрации применим точку останова к первому оператору в методе действия Index() контроллера Home; на полях редактора кода напротив оператора появится точка красного цвета:

Применение точки останова к первому оператору в методе действия Index

Для просмотра точки останова в работе запустите отладчик. Приложение будет выполняться вплоть до достижения оператора, к которому была применена точка останова, где отладчик приостановит работу приложения и передаст управление вам. Среда Visual Studio подсвечивает точку, в которой выполнение было остановлено, стрелкой желтого цвета, как показано на рисунке:

Попадание в точку останова

Точка останова активизируется, только когда выполняется ассоциированный с ней оператор. Рассматриваемый пример точки останова достигается сразу после запуска приложения, поскольку она находится внутри метода действия, который вызывается при получении запроса к стандартному URL. Если поместить точку останова внутрь другого метода действия понадобится с помощью браузера запросить URI, ассоциированный с этим методом. Это может означать работу с приложением так, как это делает пользователь, или навигацию непосредственно к URI в окне браузера.

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

Просмотр значений данных в редакторе кода

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

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

Отображение значения переменной в редакторе кода Visual Studio

Выполнение операторов в методе действия Index() не достигло точки, где переменной result присваивается значение, поэтому Visual Studio показывает стандартное значение, равное 0 для типа int. Выберите в меню Debug пункт Step Over (Выполнить без захода) или нажмите <F10>, чтобы переместить точку выполнения к оператору, который определяет свойство ViewBag.Message, и снова наведите курсор мыши на переменную result. Мы выполнили оператор, присваивающий значение переменной result, и эффект можно видеть на рисунке:

Эффект от присваивания значения переменной

Описанное средство применяется в начале процесса отслеживания ошибки, поскольку он позволяет немедленно понять, что происходит внутри приложения; оно особенно полезно при выявлении значений null, которые указывают на то, что переменной не было присвоено значение (распространенная причина многих ошибок).

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

Просмотр состояния приложения в окне отладчика

Среда Visual Studio предоставляет несколько разных окон, которые можно использовать для получения информации о приложении, пока выполнение приостановлено в точке останова. Полный список доступных окон находится в меню Debug --> Windows (Отладка --> Окна), а двумя наиболее часто применяемыми окнами являются Locals (Локальные) и Call Stack (Стек вызовов). Окно Locals автоматически отображает значения всех переменных в текущей области видимости, как показано на рисунке ниже. Это обеспечивает всеобъемлющее представление переменных, которое наверняка будет интересным разработчику:

Окно Locals

Переменные, значения которых изменились предыдущим выполненным оператором, показаны красным цветом. На рисунке это переменная result, т.к. только что был выполнен оператор, присваивающий ей значение.

Набор переменных, отображаемый в окне Locals, изменяется по мере прохождения по приложению, но если необходимо видеть какую-то переменную постоянно, следует щелкнуть правой кнопкой мыши на соответствующем элементе в окне Locals и выбрать в контекстном меню пункт Add Watch (Добавить наблюдение). Элементы в окне Watch (Наблюдение) не изменяются по мере выполнения операторов в приложении, предоставляя фиксированную контрольную точку.

Окно Call Stack отображает последовательность вызовов, которая привела к выполнению текущего оператора. Это оказывается очень полезным при попытке выявления причин странного поведения, поскольку можно раскрутить стек вызовов и исследовать обстоятельства, приведшие к активизации точки останова. (Мы не приводим здесь экранный снимок с окном Call Stack, поскольку нашему простому приложению не хватает глубины вызовов, чтобы предоставить сколько-нибудь полезную информацию в этом окне. Однако мы рекомендуем исследовать как упомянутое, так и другие окна Visual Studio, чтобы иметь понятие о том, какие сведения способен предоставлять отладчик.)

Точки останова можно добавлять и в представления. Например, они очень полезны при анализе значений свойств, относящихся к модели представления. Добавление точки останова в представление осуществляется точно так же, как в файл кода: щелкните правой кнопкой мыши на интересующем операторе Razor и выберите в контекстном меню пункт Breakpoint --> Insert Breakpoint.

Остановы из-за исключений

Необработанные исключения - это явление, присущее процессу разработки. Одна из причин проведения модульного и интеграционного тестирования в проектах - сведение к минимуму вероятности возникновения таких исключений в производственных версиях. В качестве помощи в поиске и устранении причин возникновения необработанных исключений, отладчик Visual Studio будет автоматически останавливаться, когда встретит такое исключение.

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

Для демонстрации останова по исключению мы внесли небольшое изменение в метод действия Index() контроллера Home, как показано в примере ниже:

using System.Web.Mvc;

namespace WebApplication2.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            int firstVal = 10;
            int secondVal = 0;
            int result = firstVal / secondVal;

            ViewBag.Message = "Отладка приложения ASP.NET MVC!";

            return View(result);
        }
    }
}

Мы изменили значение переменной secondVal на 0, что приведет к генерации исключения в операторе, в котором производится деление firstVal на secondVal. Мы также удалили точку останова из метода действия Index(), для чего щелкнули правой кнопкой мыши на значке точки останова, расположенном на полях редактора кода, и выбрали в контекстном меню пункт Delete Breakpoint (Удалить точку останова).

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

Вспомогательное всплывающее окно исключения

Использование средства Edit and Continue

Одно из интересных средств отладки Visual Studio называется Edit and Continue (Отредактировать и продолжить). Когда отладчик останавливается, вы можете отредактировать код и продолжить отладку. Среда Visual Studio перекомпилирует приложение и воссоздаст состояние приложения на момент останова отладки.

Включение средства Edit and Continue

Средство Edit and Continue должно быть включено в двух местах:

Внесение модификаций в проект

Со средством Edit and Continue связаны кое-какие требования. Существуют условия при которых оно работать не будет. Одно из таких условий присутствует в методе действия Index() класса HomeController: использование динамических объектов. Чтобы обойти это, мы закомментируем строку кода в классе HomeController в которой применяется объект ViewBag, как показано в примере ниже:

using System.Web.Mvc;

namespace WebApplication2.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            int firstVal = 10;
            int secondVal = 0;
            int result = firstVal / secondVal;

            // Этот оператор закомментирован
            // ViewBag.Message = "Отладка приложения ASP.NET MVC!";

            return View(result);
        }
    }
}

В представление Index.cshtml понадобится внести соответствующее изменение:

@model int

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
    <title>Index</title>
</head>
<body>
    <!-- Этот элемент закомментирован -->
    <!--<h2 class="message">@ViewData["Message"]</h2>-->
    <p>
       Результат расчета: @Model
    </p>
</body>
</html>

Демонстрация работы средства Edit and Continue

Теперь все готово для демонстрации работы средства Edit and Continue. Начните с выбора пункта Start Debugging в меню Debug. Приложение запустится с присоединенным отладчиком, и будет выполняться вплоть до достижения строки в методе Index(), где производится простое вычисление. Значением второго параметра является 0, поэтому генерируется исключение. В этой точке отладчик останавливает выполнение и отображается вспомогательное всплывающее окно исключения (подобно показанному ранее).

Щелкните на ссылке Enable editing (Включить редактирование) во вспомогательном всплывающем окне исключения. В редакторе кода измените выражение, которое вычисляет значение переменной result, следующим образом:

int result = firstVal / 2;

Ссылка на переменную secondVal была удалена, а вместо нее введено числовое литеральное значение 2. Теперь выберите пункт Continue (Продолжить) в меню Debug среды Visual Studio, чтобы возобновить выполнение приложения. Новое значение используется для получения значения для переменной result, давая вывод, представленный на рисунке ниже:

Эффект от исправления ошибки с применением средства Edit and Continue

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

Браузер получает визуализированный результат, который отражает это новое значение. Без средства Edit and Continue пришлось бы остановить приложение, внести изменение, скомпилировать приложение и перезапустить отладчик. Затем понадобилось бы повторить в браузере все шаги, которые были проделаны до момента останова отладчика. Наиболее важным может оказаться именно устранение этой необходимости в последнем действии. Воспроизведение сложных ошибок часто требует проведения множества шагов, поэтому возможность тестирования потенциальных исправлений без постоянного повторения таких шагов экономит время и усилия программиста.

Пройди тесты
Лучший чат для C# программистов