Отладка JavaScript с помощью инструментов для разработчиков от Google Chrome

Эта статья будет посвящена отладке JavaScript-кода с помощью инструментов для разработчиков от Google Chrome. Мы рассмотрим следующее:

1. Пример реализации проекта;
2. Анализ отчета об ошибках Raygun;
3. Подробное рассмотрение инструментов для разработчиков;
4. Добавление в код точек остановки;
5. Пересмотр кода;
6. Определение состояния приложения;
7. Исправление ошибок.

Шаг 1. Пример реализации проекта

Чтобы продемонстрировать, как отлаживать приложение с помощью инструментов для разработчиков в Chrome, я использую форму «Добавить пользователя». Она позволяет вводить имя, отчество и фамилию. При нажатии кнопки «Сохранить» форма отправляет данные для обработки на сервер.

Код для этой формы включает в себя три функции:

• Обработчик кликов;
• Функция преобразования первых букв строк в заглавные;
• Функция сохранения.

varsaveButton = document.getElementById('saveButton');
varfirstNameField = document.getElementById('firstName');
varmiddleNameField = document.getElementById('middleName');
varlastNameField = document.getElementById('lastName');
functiononSaveButtonClick(){
varfirstName = firstNameField.value;
varmiddleName = middleNameField.value;
varlastName = lastNameField.value;
// преобразование первых букв имен в заглавные
firstName = capitalizeString(firstName);
middleName = capitalizeString(middleName);
lastName = capitalizeString(lastName);
doSave(firstName, middleName, lastName);
}
functioncapitalizeString(value){
returnvalue.split('')[0].toUpperCase() + value.slice(1);
}
functiondoSave(firstName, middleName, lastName){
alert(firstName + ' ' + middleName + ' ' + lastName + ' has been saved!');
}
saveButton.addEventListener('click', onSaveButtonClick);

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

Шаг 2. Анализ отчета об ошибках Raygun

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

Информация, необходимая для отладки ошибки, находится в модуле Stacktrace. Это краткий обзор того, что работает не так. В этом случае метод toUpperCase вызывается с неопределенным значением.
Stacktrace сообщает, где именно произошла ошибка: в функции capitalizeString в строке 20 файла index.js.

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

Шаг 3: Подробное рассмотрение инструментов для разработчиков

Первым делом нужно запустить приложение в Chrome и открыть инструменты для разработчиков. Вы можете сделать это с помощью клавиатуры, используя комбинацию клавиш CMD-OPT-I (в операционной системе OSX) или CTRL-SHIFT-I (в операционной системе Windows).

Теперь инструменты открыты в браузере, активная вкладка - "Console". Она позволяет в любое время выполнить произвольный код JavaScript.

Попробуйте ввести alert ('Hello!'); и нажать Enter - вы сразу увидите сообщение.

Вкладка «Консоль» - это полезный инструмент для отладки. Ее можно использовать для проверки кода и оценки переменных при диагностике.

Чтобы приступить к отладке кода, нужно иметь возможность перемещаться по исходному коду. Это осуществляется на вкладке «Sources».

Левая панель этой вкладки содержит древовидное представление всех исходных файлов, загруженных на веб-странице. Вы можете перемещаться по файлам так же, как в IDE. При этом их содержимое будет отображаться в центральной панели. В нижней панели будут представлены все параметры отладки, о которых я расскажу позже.
Если много файлов, можно выполнить поиск, воспользовавшись клавиатурной комбинацией CMD-P (для операционной системы OSX) или CTRL-P (для Windows).
В нашем приложении проблема возникла в файле index.js. Выберите его из списка слева, чтобы просмотреть содержимое файла.

Шаг 4. Добавление в код точек остановки

Теперь нужно просмотреть код построчно, чтобы увидеть, где все пошло не так. Для этого мы используем точки остановки (breakpoints). Это маркеры в определенных местах кода, которые останавливают его выполнение.Это позволяет проверить состояние кода в этот момент времени и продолжить выполнение программы.

Есть несколько способов добавить точки остановки:

Точки остановки события

Вы можете прервать выполнение кода, когда на странице происходит определенное событие. Используя раздел «Event Listener Breakpoints» в панели отладки, можно развернуть соответствующую группу и найти событие, после которого нужно прекратить выполнения кода. Например, можно отметить событие клика.Это остановит выполнение программы, когда в любом месте страницы будет выполнен клик.

Точки остановки строки

Также можно просто найти конкретную строку и добавить для нее контрольную точку. Перейдите к интересующему вас файлу и строке, а затем кликните по номеру строки. Для этой строки будет добавлен синий маркер, и выполнение кода будет останавливаться в этой строке. На скриншоте, приведенном ниже, маркер установлен на строке 7файла index.js.

Программные точки остановки

Также можно добавить точки остановки программно, если будете отлаживать код в среде IDE. Вы можете использовать этот подход для условного введения точек остановки. Например, при определенных итерациях циклов, или если код выполняется при загрузке страницы, и нет времени о, чтобы добавить Event breakpoints в ручную.
Для этого необходимо добавить оператор debugger в позиции, на которой вы хотите прервать выполнение. Приведенный ниже код даст тот же результат.

Точки остановки ошибки

В инструментах для разработчиков есть удобная функция, которая прекращает выполнение кода, когда встречает исключение. Это позволяет изучить, что происходит во время ошибки.
Также можно задать остановку исполнения на исключениях, которые обрабатываются оператором try / catch.

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

Шаг 5: Пересмотр кода

Сначала установите точку остановки на строке 7? прямо внутри обработчика клика кнопки «Добавить», чтобы мы могли начать с самого начала.

Ошибка возникла в методе capizeizeString. Он вызывается три раза. Но какой его экземпляр выдает ошибку? Вы можете внимательнее рассмотреть Stacktrace и увидеть, что это был вызов из строки 13.

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

Заполните поля формы «First Name» и «Last Name», но оставьте поле «Middle Name» пустым, чтобы увидеть, вызовет ли это ошибку.

Нажмите кнопку «Save». Откроется вкладка «Source», на которой видно, что точка остановки активирована. Теперь можно начать выполнять код. Для этого нужно использовать четыре кнопки, доступные в панели отладки.

Вам нужно использовать эти кнопки, чтобы полностью пройти всю функцию capitalizeString. Поэтому, начиная со строки 7, используйте кнопку «Step over Current Line» до тех пор, пока не перейдете к строке 13. Активная строка помечается линиями сверху и снизу.

Теперь можно использовать кнопку «Step into Function», чтобы перейти к вызову функции capitalizeString.

Перемещение в стеке вызовов

Можно вернуться к родительской функции, чтобы проверить, что именно происходит в этот момент. Для этого используйте раздел «Call Stack», в котором перечислены все вызванные функции.

Можно кликнуть по элементу в списке и вернуться к функции. Имейте в виду, что текущая позиция в выполнении не изменяется. Поэтому, используя кнопку «Step Over», мы будем перемещаться дальше от верхней части стека вызовов.

Шаг 6: Определение состояния приложения

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

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

Наведение мыши

Самый простой способ определить значение переменной – навести на нее курсор мыши. Значение будет отображено во всплывающей подсказке. Также можно выбрать группу выражений и навести на нее курсор, чтобы получить результат выражения.

Наблюдатели

Можно добавить выражения в панель «Watch», которая отображает текущее значение при перемещении по коду. Это удобно для отслеживания изменений сложных выражений.

Их можно добавить нажав кнопку «+». А также кликнув по выражению правой кнопкой мыши и выбрав пункт «Add selected text to watches».

Область действия

Панель «Scope» отображает список переменных, находящихся в пределах области действия, а также связанных с ними значений. Она похожа на панель «Watch». Но она автоматически создается инструментами для разработчиков. Панель «Watch» может использоваться для идентификации локальных переменных и позволяет добавлять их в список «Watch list».

Консоль

Вкладка «Console» - это инструмент для проверки значений выражений и экспериментов с кодом. Вернитесь на эту вкладку, введите код и нажмите «Enter». Инструменты для разработчиков Chrome выполнят код в контексте и области действия текущей точки остановки.

Шаг 7: Исправьте ошибку

Перейдите на вкладку «Console» и найдите строку, которая вызвала ошибку. Сначала проверьте alue.split(‘’), чтобы получить первый символ, а затем вызвать функцию toUpperCase.

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

Вы можете проверить это, введя полное выражение в консоль:

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

functioncapitalizeString(value){
if(!value||value.length===0){
return'';
    }
returnvalue.split('')[0].toUpperCase() +value.slice(1);
}

Заключение

На этом мы завершаем краткое руководство по отладке JavaScript с помощью инструментов для разработчиков от GoogleChrome. Это мощный функционал!

Вадим Дворниковавтор-переводчик статьи «Debug JavaScript in Google Chrome’s Dev Tools in 7 Easy Steps»