Стюарт Эшворт
В этой статье речь пойдет об отладке кода JavaScript Visual Studio. Традиционно Visual Studio известна как мощная IDE для C#.NET и VB.NET, но без особой поддержки JavaScript. Однако в последних итерациях это изменилось, и теперь вы можете использовать Visual Studio для отладки JavaScript в той же среде, что и код C#. Это делает его чрезвычайно полезным интегрированным инструментом, который ускорит процесс поиска и исправления ошибок!
Шаги, которые мы собираемся выполнить, следующие:
- Введение в пример проекта
- Анализ отчета об ошибках Raygun
- Изучите анатомию инструментов отладки Visual Studio
- Добавьте точки останова в свой код
- Шаг через свой код
- Определите состояние вашего приложения
- Исправьте ошибку!
Итак, давайте погрузимся!
Шаг 1: Введение в пример проекта
Чтобы продемонстрировать, как отлаживать приложение с помощью Visual Studio, я буду использовать простую форму добавления пользователя. Эта форма позволяет ввести имя, отчество и фамилию. При нажатии кнопки «Сохранить» форма немного обработается, и данные будут отправлены на ваш (воображаемый) сервер.
Код для этой формы имеет три функции:
- Обработчик кликов
- Строковая функция с заглавной буквы
- Функция сохранения
К сожалению, после отправки этого в производство поздно вечером в пятницу вы начинаете видеть отчеты об ошибках, поступающие на вашу панель инструментов. Есть ошибка, и вам нужно ее исправить. Быстрый.
Шаг 2. Проанализируйте отчет об ошибках Raygun
Отчеты об ошибках, которые приходят в Raygun, содержат много информации, которую вы можете использовать, чтобы найти и исправить ошибку, поэтому давайте посмотрим, с чем мы имеем дело.
Информация, которая вам понадобится для отладки ошибки, находится в модуле Stacktrace.
Часть сообщения в Stacktrace представляет собой краткий обзор того, что не так. В этом случае метод toUpperCase вызывается для неопределенного значения.
Stacktrace сообщает вам, где произошла ошибка, и последовательность вызовов функций, которая привела к ней. Как вы можете видеть на скриншоте выше, ошибка произошла в функции capitalizeString в строке 20 файла index.js.
Зная, какая строка вызвала ошибку, вы можете сразу перейти к тому месту, где произошла ошибка, и начать копаться в том, что вызвало проблему.
Первый шаг — открыть проект Visual Studio и запустить приложение, нажав кнопку. Теперь, когда приложение запущено, мы можем открыть все окна отладки, которые я буду использовать. Откройте меню «Отладка», а затем подменю Windows.
Щелкните по очереди элементы JavaScript Console, Call Stack, Watch 1, Locals, Output и Breakpoints, чтобы все они были открыты в нижней части окна Visual Studio.
Активируйте окно консоли JavaScript, щелкнув его вкладку. Эта вкладка позволяет в любое время выполнить произвольный код JavaScript или просмотреть любые выходные данные вызовов console.log.
Попробуйте ввести alert('Hello!'); и нажать Enter — предупреждение должно появиться сразу.
Вкладка «Консоль JavaScript» — ценный инструмент отладки, поскольку вы можете использовать ее как блокнот для опробования кода и оценки переменных при диагностике проблемы.
Поскольку мы находимся в знакомой среде для отладки кода на стороне сервера, вы можете найти и перемещаться по коду на стороне клиента точно так же, используя обозреватель решений. Двойной щелчок по файлу откроет его на центральной панели.
В приложении вы знаете, что проблема заключается в файле index.js, поэтому выберите его в списке обозревателя решений, чтобы просмотреть его содержимое.
Шаг 4: Добавьте точки останова в свой код
Теперь вы можете просматривать свой код, мы хотим иметь возможность просматривать его построчно, чтобы увидеть, где что-то идет не так. Для этого мы используем точки останова. Точки останова — это маркеры в определенных точках кода, которые останавливают выполнение, чтобы вы могли проверить состояние кода в этот момент времени и продолжить выполнение построчно.
Есть несколько различных способов добавления точек останова, которые я рассмотрю здесь:
Точки останова строки
Вероятно, самый распространенный способ добавить точку останова — найти конкретную строку, на которой вы хотите остановиться, и добавить ее туда. Перейдите к интересующему вас файлу и строке и щелкните серую область рядом с номером строки. К этой строке будет добавлен красный маркер, и выполнение будет останавливаться каждый раз, когда будет встречаться эта строка кода. На скриншоте ниже он остановится на строке 7 из index.js.
Программная точка останова
Вы также можете добавить точки останова программно. Этот подход полезен для условного введения точек останова, например, на определенных итерациях циклов.
Для этого вы добавляете оператор debugger; в позицию, в которой хотите прервать выполнение. Приведенный ниже код будет иметь тот же эффект, что и вышеприведенная точка разрыва строки.
Точка останова при ошибке
По умолчанию Visual Studio выводит всплывающее предупреждение, если на вашей странице возникло необработанное исключение. В этом диалоговом окне вы можете выбрать прерывание в этот момент, чтобы вы могли исследовать причину.
Шаг 5. Пройдитесь по своему коду
Теперь, когда мы знаем, как взломать наш код, мы хотим пройтись по каждой строке, чтобы понять, что происходит не так. Во-первых, поставьте точку останова в строке 7 — прямо внутри обработчика щелчка кнопки «Добавить», чтобы мы могли начать с самого начала.
В предыдущем разделе мы сделали вывод из отчета об ошибках Raygun, что ошибка возникла из-за метода capitalizeString. Этот метод вызывается три раза, так какой экземпляр является виновником? Вы можете присмотреться к трассировке стека и увидеть, что именно вызов из строки 13 вызвал ошибку. Вы знаете, что строка 13 относится к значению отчества. Таким образом, вы должны сосредоточить свои усилия на воспроизведении ошибки путем правильной обработки ввода.
Обладая этими дополнительными знаниями, вы можете заполнить поля «Имя» и «Фамилия», но оставить поле «Отчество» пустым, чтобы увидеть, не вызовет ли это ошибку.
Нажмите кнопку Сохранить. Отсюда откроется вкладка «Источник», где вы можете увидеть активированную точку останова. Теперь вы можете начать пошаговое выполнение кода. Для этого вы используете четыре кнопки на панели отладки.
Возобновляет выполнение вашего кода и продолжается до следующей точки останова. Шаги по текущей строке, перемещая нас к следующей строке. Шаги к следующему вызову функции, который находится в этой строке. Выход из текущего вызова функции, резервное копирование стека вызовов на один уровень.
Вы будете использовать их, чтобы пройти весь путь до вашей функции capitalizeString. Итак, начиная со строки 7, используйте кнопку «Перейти», пока не дойдете до строки 13. Активная строка показана желтым фоном и стрелкой, указывающей на нее.
Теперь вы можете использовать кнопку «Шаг в», чтобы перейти к вызову функции capitalizeString.
Когда вы перемещаетесь по такому коду, вы можете вернуться к родительской функции, чтобы проверить, что происходило в этот момент. Для этого используйте окно стека вызовов, которое вы открыли ранее, в котором перечислены все функции, которые были пройдены, чтобы добраться до этой точки в вашем коде — точно так же, как стек вызовов, показанный в отчете об ошибках Raygun.
Вы можете просто дважды щелкнуть элемент в этом списке, и вы вернетесь к этой функции. Имейте в виду, что текущая позиция в выполнении не меняется, поэтому использование кнопок Step Over продолжится с вершины стека вызовов.
Шаг 6: Определите состояние вашего приложения
Теперь, когда вы перешли к тому месту, где произошла ошибка, нам нужно изучить состояние приложения и выяснить, что вызывает ошибку.
Существует множество вариантов для выяснения того, какие значения содержат переменные, и оценки выражений до того, как код продолжит работу. Мы рассмотрим каждый по очереди:
Наведение мыши
Самый простой способ определить значение переменной — просто навести на нее указатель мыши, и появится всплывающая подсказка со значением. Вы даже можете выбрать группу выражений и навести на нее курсор, чтобы получить вывод выражения.
Наблюдатели
Вы можете добавлять выражения на панель Watch, которая отображает текущее значение выражения при перемещении по коду. Это удобно для отслеживания того, как со временем меняются более сложные выражения.
Вы добавляете их, либо дважды щелкнув пустую строку панели Watch и введя выражение, либо выбрав выражение, щелкнув правой кнопкой мыши и выбрав «Добавить Watch».
Местные жители
Панель «Локальные» отображает список переменных, находящихся в настоящее время в пределах области видимости, и связанных с ними значений. Она похожа на панель Watch, но автоматически создается Visual Studio. Панель «Локальные» удобна для идентификации локальных переменных и избавляет вас от явного добавления их в список наблюдения.
Консоль JavaScript
Наконец, вкладка «Консоль JavaScript» — отличный инструмент для проверки значений выражений и экспериментов с кодом. Просто вернитесь на вкладку консоли JavaScript, введите код и нажмите Enter. Visual Studio выполнит код в контексте и области действия текущей точки останова.
Шаг 7. Исправьте ошибку
Переключитесь на вкладку «Консоль JavaScript» и начнем разбирать строку, вызвавшую ошибку, чтобы вы могли исправить ее с помощью вкладки «Консоль JavaScript».
Во-первых, проверьте вывод вызова value.split(‘’), чтобы вы могли получить первый символ, а затем вызвать для него функцию toUpperCase.
Выполнение выражения в консоли JavaScript показывает, что оно возвращает пустой массив — отсюда и ошибка! Поскольку он возвращает пустой массив, и мы пытаемся вызвать toUpperCase для первого элемента (который не определен, поскольку элементов нет), это дает вам ошибку.
Вы можете убедиться в этом, введя полное выражение в консоль JavaScript:
Итак, чтобы решить проблему, вам нужно проверить, что строка пуста или не определена. Если это так, вам нужно вернуть пустую строку обратно без какой-либо обработки.
На этом краткое введение в отладку JavaScript в Visual Studio завершено. Хотя Visual Studio в первую очередь известна как серверная IDE, она очень многофункциональна, когда дело доходит до отладки JavaScript.
Если вы уже работаете с Visual Studio, то иметь одну среду отладки для внутреннего и внешнего кода будет огромным преимуществом.
Первоначально опубликовано на raygun.com.
