Стюарт Эшворт
В этой статье основное внимание будет уделено отладке кода JavaScript в инструментах разработчика Opera. Важно отметить, что, поскольку Opera перешла на движок рендеринга Blink (форк WebKit) в 2013 году, инструменты и процесс отладки идентичны Chrome. Это отличная новость, так как опубликовано огромное количество ресурсов о Chrome Dev Tools, которые на 100% применимы для отладки в Opera.
Использование Blink в Opera означает, что они используют чрезвычайно мощные инструменты, которые ускорят процесс поиска и исправления ошибок!
Шаги, которые мы собираемся выполнить, следующие:
- Введение в пример проекта
- Анализ отчета об ошибках Raygun
- Изучите анатомию инструментов разработки
- Добавьте точки останова в свой код
- Шаг через свой код
- Определите состояние вашего приложения
- Исправьте ошибку!
Итак, давайте погрузимся!
Шаг 1: Введение в пример проекта
Чтобы продемонстрировать, как отлаживать приложение с помощью Opera Dev Tools, я буду использовать простую форму добавления пользователя. Эта форма позволяет ввести имя, отчество и фамилию. При нажатии кнопки «Сохранить» форма немного обработается, и данные будут отправлены на ваш (воображаемый) сервер.
Код для этой формы имеет три функции:
- Обработчик кликов
- Строковая функция с заглавной буквы
- Функция сохранения
К сожалению, после отправки этого в производство поздно вечером в пятницу вы начинаете видеть отчеты об ошибках, поступающие на вашу панель инструментов. Есть ошибка, и вам нужно ее исправить. Быстрый.
Шаг 2. Проанализируйте отчет об ошибках Raygun
Отчеты об ошибках, которые приходят в Raygun, содержат много информации, которую вы можете использовать, чтобы найти и исправить ошибку, поэтому давайте посмотрим, с чем мы имеем дело.
Информация, которая вам понадобится для отладки ошибки, находится в модуле Stacktrace.
Часть сообщения в Stacktrace представляет собой краткий обзор того, что не так. В этом случае метод toUpperCase вызывается для неопределенного значения.
Stacktrace сообщает вам, где произошла ошибка, и последовательность вызовов функций, которая привела к ней. Как вы можете видеть на скриншоте выше, ошибка произошла в функции capitalizeString в строке 20 файла index.js.
Зная, какая строка вызвала ошибку, вы можете сразу перейти к тому месту, где произошла ошибка, и начать копаться в том, что вызвало проблему. Шаг 3: Изучение анатомии инструментов разработчика Первый шаг — запустить приложение в Opera и открыть инструменты разработчика. Вы можете сделать это с помощью клавиатуры, используя сочетание клавиш CMD-OPT-I в OSX или CTRL-SHIFT-I в Windows.
Инструменты разработчика теперь будут открыты на вкладке браузера, а вкладка «Консоль» будет активной. Эта вкладка позволяет в любое время выполнить произвольный код JavaScript или просмотреть любые выходные данные вызовов console.log.
Попробуйте ввести alert('Hello!'); и нажать Enter — предупреждение должно появиться сразу.
Вкладка «Консоль» — ценный инструмент отладки, поскольку вы можете использовать ее как блокнот для опробования кода и оценки переменных при диагностике проблемы.
Для отладки кода вам сначала нужно иметь возможность перемещаться по исходному коду в Dev Tools. Вы делаете это на вкладке Источники.
На левой панели этой вкладки представлено древовидное представление всех исходных файлов, загруженных на страницу. Вы можете перемещаться по ним так же, как и в среде IDE, так как содержимое отображается на центральной панели. Нижняя панель предоставляет вам все параметры отладки, о которых я расскажу позже.
Если у вас много файлов, вы можете найти их, используя CMD-P в OSX или CTRL-P в Windows, а затем начать вводить имя файла.
В приложении вы знаете, что проблема заключается в файле index.js, поэтому выберите его из списка слева, чтобы просмотреть его содержимое.
Шаг 4: Добавьте точки останова в свой код
Теперь вы можете просматривать свой код, мы хотим иметь возможность просматривать его построчно, чтобы увидеть, где что-то идет не так. Для этого мы используем точки останова. Точки останова — это маркеры в определенных точках кода, которые останавливают выполнение, чтобы вы могли проверить состояние кода в этот момент времени и продолжить выполнение построчно.
Есть несколько различных способов добавления точек останова, которые я рассмотрю здесь:
Точки останова событий
Вы можете принудительно прервать выполнение, когда на странице происходит определенное событие. Используя раздел «Точки останова прослушивателя событий» на панели отладки, вы можете развернуть соответствующую группу и найти событие, после которого вы хотите остановить выполнение. Например, вы можете поставить галочку на событии click, которое остановит выполнение при щелчке в любом месте страницы.
Точки останова строки
Вероятно, самый распространенный способ добавить точку останова — найти конкретную строку, на которой вы хотите остановиться, и добавить ее туда. Перейдите к интересующему вас файлу и строке и щелкните номер строки. К этой строке будет добавлен синий маркер, и выполнение будет останавливаться каждый раз, когда будет встречаться эта строка кода. На скриншоте ниже он остановится на строке 7 из index.js.
Программная точка останова
Вы также можете добавить точки останова программно, что может быть полезно, если вы не хотите искать код в Dev Tools, когда он у вас есть под рукой в вашей IDE. Вы также можете использовать этот подход для условного введения точек останова, например, на определенных итерациях циклов или если код выполняется при загрузке страницы и нет времени добавлять точку останова вручную.
Для этого вы добавляете оператор debugger; в позицию, в которой хотите прервать выполнение. Приведенный ниже код будет иметь тот же эффект, что и вышеприведенная точка разрыва строки.
Точка останова при ошибке
Dev Tools имеет удобную функцию, которая останавливает выполнение при обнаружении исключения в вашем коде, позволяя вам изучить, что происходит во время ошибки. Вы даже можете остановиться на исключениях, которые уже обработаны оператором try/catch.
Чтобы включить эту функцию, щелкните значок знака остановки с символом паузы внутри него. При включении он будет синим. Установите флажок, который, по-видимому, также прерывается при обработке исключений.
Шаг 5. Пройдитесь по своему коду
Теперь, когда мы знаем, как взломать наш код, мы хотим пройтись по каждой строке, чтобы понять, что происходит не так. Во-первых, поставьте точку останова в строке 7 — прямо внутри обработчика щелчка кнопки «Добавить», чтобы мы могли начать с самого начала.
В предыдущем разделе мы сделали вывод из отчета об ошибках Raygun, что ошибка возникла из-за метода capitalizeString. Этот метод вызывается три раза, так какой экземпляр является виновником? Вы можете присмотреться к трассировке стека и увидеть, что именно вызов из строки 13 вызвал ошибку. Вы знаете, что строка 13 относится к значению отчества. Таким образом, вы должны сосредоточить свои усилия на воспроизведении ошибки путем правильной обработки ввода.
Обладая этими дополнительными знаниями, вы можете заполнить поля «Имя» и «Фамилия», но оставить поле «Отчество» пустым, чтобы увидеть, не вызовет ли это ошибку.
Нажмите кнопку Сохранить. Отсюда откроется вкладка «Источник», где вы можете увидеть активированную точку останова. Теперь вы можете начать пошаговое выполнение кода. Для этого вы используете четыре кнопки на панели отладки.
Возобновляет выполнение вашего кода и продолжается до следующей точки останова. Шаги по текущей строке, перемещая нас к следующей строке. Шаги к следующему вызову функции, который находится в этой строке. Выход из текущего вызова функции, резервное копирование стека вызовов на один уровень.
Вы собираетесь использовать их, чтобы пройти весь путь до вашей функции capitalizeString. Итак, начиная со строки 7, используйте кнопку «Перейти к текущей строке», пока не дойдете до строки 13. Активная строка отображается с линиями над и под ней.
Теперь вы можете использовать кнопку «Перейти к функции», чтобы перейти к вызову функции capitalizeString.
###Навигация по стеку вызовов
Когда вы перемещаетесь по такому коду, вы можете вернуться к родительской функции, чтобы проверить, что происходило в этот момент. Для этого используйте раздел Call Stack, в котором перечислены все функции, которые были пройдены, чтобы добраться до этой точки в вашем коде — точно так же, как Callstack, показанный в отчете об ошибках Raygun.
Вы можете просто щелкнуть элемент в этом списке, и вы вернетесь к этой функции. Имейте в виду, что текущая позиция в выполнении не меняется, поэтому использование кнопок Step Over продолжится с вершины стека вызовов.
Шаг 6: Определите состояние вашего приложения
Теперь, когда вы перешли к тому месту, где произошла ошибка, нам нужно изучить состояние приложения и выяснить, что вызывает ошибку.
Существует множество вариантов для выяснения того, какие значения содержат переменные, и оценки выражений до того, как код продолжит работу. Мы рассмотрим каждый по очереди:
Наведение мыши
Самый простой способ определить значение переменной — просто навести на нее указатель мыши, и появится всплывающая подсказка со значением. Вы даже можете выбрать группу выражений и навести на нее курсор, чтобы получить вывод выражения.
Наблюдатели
Вы можете добавлять выражения на панель Watch, которая отображает текущее значение выражения при перемещении по коду. Это удобно для отслеживания того, как со временем меняются более сложные выражения.
Вы добавляете их, либо нажимая кнопку «+» в верхней части панели, либо выбирая выражение, щелкая правой кнопкой мыши и выбирая «Добавить выделенный текст в часы».
Сфера
На панели «Область» отображается список переменных, находящихся в настоящее время в области видимости, и связанных с ними значений. Она похожа на панель Watch, но создается автоматически средствами разработки Opera. автоматически. Панель «Область» удобна для идентификации локальных переменных и избавляет вас от явного добавления их в список наблюдения.
Консоль
Наконец, вкладка «Консоль» — отличный инструмент для проверки значений выражений и экспериментов с кодом. Просто вернитесь на вкладку «Консоль», введите код и нажмите Enter. Инструменты разработчика Opera будут выполнять код в контексте и области действия текущей точки останова.
Шаг 7. Исправьте ошибку
Переключитесь на вкладку «Консоль» и давайте начнем разбирать строку, вызвавшую ошибку, чтобы вы могли исправить ее с помощью вкладки «Консоль».
Во-первых, проверьте вывод вызова value.split(‘’), чтобы вы могли получить первый символ, а затем вызвать для него функцию toUpperCase.
Выполнение выражения в консоли показывает, что оно возвращает пустой массив — отсюда и ошибка! Поскольку он возвращает пустой массив, и мы пытаемся вызвать toUpperCase для первого элемента (который не определен, поскольку элементов нет), это дает вам ошибку.
Вы можете убедиться в этом, введя полное выражение в консоль:
Итак, чтобы решить проблему, вам нужно проверить, что строка пуста или не определена. Если это так, вам нужно вернуть пустую строку обратно без какой-либо обработки.
На этом краткое введение в отладку JavaScript в Инструментах разработчика Opera завершено. Это чрезвычайно мощный инструмент, и время, потраченное на его освоение, будет иметь огромное значение для ускорения ваших навыков отладки!
Как я уже говорил во введении, Opera делится своими инструментами разработчика с Chrome, поэтому любые ресурсы, сфокусированные на инструментах разработчика Chrome, которые вы встретите, будут применимы и к Opera. Это отличная новость для пользователей Opera, так как сообщество активно поддерживает инструменты разработчика Chrome, и каждую неделю публикуются отличные руководства и справочные материалы.
Первоначально опубликовано на raygun.com.
