Когда я только начал заниматься разработкой ПО, я столкнулся с приличным количеством помех на своем пути. Одна из распространенных проблем, с которыми сталкивается множество разработчиков-новичков JavaScript, - отладка.
Сначала я думал, что обнаружил «Святой Грааль», когда понял, что можно открывать console в chrome и применять console.log() для всех моих значений, чтобы найти баги. Этот способ оказался достаточно низкоэффективным. Чтобы посмеяться, представлю несколько моих любимых случаев:
console.log('Total Price:', total) // Пытаюсь понять, сохранились ли значения
console.log('Here') // Пытаюсь понять, произошло ли достижение определенной функции во время выполнения программы
Думаю, большинство программистов начинает понимать, что отладку программ нужно производить не так. Должен же быть способ лучше!
К счастью, он действительно существует. Вы можете пользоваться инструментами для отладки в вашем браузере. Если точнее, я буду рассматривать - Chrome Developer Tools.
В этой статье я расскажу о точках прерывания, исследовании кода, установке контрольных выражений и применении поправок в Chrome Developer Tools.
Чтобы следовать этому туториалу, нужно будет использовать репозиторий кода, созданный мной в качестве примера. Скачать его можно по ссылке.
Шаг №1: Воспроизведение бага
Для начала проведем несколько действий, которые будут воспроизводить баг:
В нашем случае мы будем использовать неправильно работающий калькулятор чаевых. Если вы еще не открыли пример кода, то, пожалуйста, сделайте это;
Введите 12 в «Entree 1»;
Введите 8 в «Entree 2»;
Введите 10 в «Entree 3»;
Введите 10 в «Tax»;
Выберите 20% в «Tip»;
Нажмите на кнопку «Calculate Bill». Итоговая сумма должна быть 39,6, однако получается совершенно другой результат. Вместо этого появляется 14105,09… Ужас!
Шаг №2: Учимся использовать панель sources
Чтобы провести такую процедуру с кодом JavaScript. Отладить в chrome, нужно привыкнуть к использованию DevTools. Чтобы открыть Chrome Developer Tools, нажмите Command + Option + I (Mac) или Control + Shift + I (Linux).
После того как вы кликнете на панель sources наверху, вы получите доступ к 3 панелям для отладки: навигатор файлов, редактор исходного кода, окно для отладки. Покликайте на них, развлекитесь, перед тем как переходить к шагу №3.
Шаг №3: Установка первой точки прерывания
До того как я покажу вам, как установить первую точку прерывания, давайте я продемонстрирую, что имею в виду под использованием console.log(). Очевидно, во время выполнении программы происходит какая-то ошибка в подсчете итога. Попробовать провести отладку можно таким образом:
К счастью, теперь это делать необязательно, если воспользоваться DevTools в браузере. Вместо этого мы можем просто установить первую точку прерывания, а затем исследовать код, чтобы найти значения в видении браузера.
Давайте поговорим о том, как установить точку прерывания. Точка прерывания - место, в котором браузер останавливает выполнение кода и дает возможность провести отладку.
В нашем случае мы установим точку прерывания в самом начале выполнения программы, добавляя событие мыши.
В панели «Debugger Pane» раскройте «Event Listener Breakpoints». Там откройте «Mouse». Затем поставьте флажок «Click».
Теперь при клике на кнопку «Calculate Bill» отладчик будет приостанавливать выполнение программы на первой строчке первой функции onClick(). Если отладчик находится в другом месте, нажмите на кнопку воспроизведения, и отладчик передвинется в нужное место.
Шаг №4: Исследование кода
Во всех инструментах, в которых проводится JavaScript отладка, у пользователя есть 2 способа ориентироваться в выполнении кода. Юзер может либо «вступить», либо «перешагнуть» в случае с вызовом следующей функции.
В случае «вступления» каждая строка кода будет выполняться одна за другой внутри каждой функции.
В случае «перешагивания» вы сможете пропускать целые рабочие функции.
Ниже приведен пример, в котором я «шагаю» по своему коду. Под вкладкой «Scope» справа отображены 3 введенных значения.
Шаг №5: Установка точки прерывания на строке
Ого! Иметь возможность «перешагивать» через код - отлично, но это довольно-таки долго и проблематично, не так ли? Обычно мне нужны только значения в определенных местах. В таком случае можно устанавливать точки прерывания в конкретных строках.
От автора: Именно из-за точек прерывания на строках я перестал использовать console.log() в пользу Chrome Developer Tools.
Чтобы установить точку прерывания на строке, просто кликните на номер строки, о которой вам бы хотелось узнать больше информации. Затем запустите код, как обычно. Выполнение программы остановится на выбранной вами точке прерывания на строке. Теперь вам не придется «перешагивать» через каждую функцию.
Замечание: Если у вас возникли проблемы, убедитесь, что вы сняли флажок «Click» в «Mouse».
Как вы можете заметить, запрошенный мной итог составил 10812. В панели «Scope», а также в самом коде отображаются входные значения.
Хм… Кажется, мне стало понятно, в чем заключается баг. Сцепление строк?
Установим контрольные выражения, чтобы удостовериться.
Шаг №6: Создание контрольных выражений
Раз мы поняли, что наши входные значения неправильно складываются, давайте установим контрольное выражение для каждого из этих значений.
Контрольное выражение даст больше информации о любых данных переменной или выражении в коде.
Чтобы определить значения для «слежки», кликните на панель «Watch», что в самом верху, затем - на символ «+», когда она откроется. Здесь вы сможете ввести названия переменных или другие выражения.
В примере я установлю контрольное выражение на первом входном значении и на его типе.
Ага! Похоже, я нашел, в чем проблема. Видимо, мое первое значение хранится как данные строкового типа! Судя по всему, дело в том, как я вообще получил это значение. Наверное, виновник всего этого - querySelector(). Могли быть затронуты и некоторые другие значения. Давайте проведем отладку дальше, а затем исправим код в DevTools.
Шаг №7: Исправление кода
После дальнейшего исследования оказалось, что во всем действительно виновата функция querySelector()!
Как же это исправить? Ну, можно принудительно присвоить строковым значениям числовой тип. Например, Number(getEntree1()) в строке 74.
Чтобы отредактировать код, нужно перейти на панель «Elements» (слева от «Sources»). Если вы не видите код JavaScript, нужно расширить тег «Script». Далее кликните правой кнопкой мыши на код и выберите «Редактировать как HTML».
Если вы используете рабочую среду, сохранить код будет легко, и вы тут же его просмотрите. Если же нет, вам нужно будет сделать локальную копию веб-страницы с помощью command + s (mac) или control + s (linux).
Далее можно открыть локальную копию и ознакомиться с изменениями.
Вуаля!