От автора: когда я начал свой путь становления разработчиком программного обеспечения, меня ждало множество ударов. Одной из наиболее распространенных проблем, с которыми сталкиваются большинство новых разработчиков, является отладка. Сначала я подумал, что обнаружил святой Грааль, когда понял, что могу открыть консоль в chrome и использовать console log JavaScript для значений, чтобы узнать, где у меня возникают ошибки. Это оказалось крайне неэффективным.
Ради смеха, вот пара моих любимых случаев использования:
console.log('Total Price:', total) // Чтобы увидеть, сохранено ли значение stored
console.log('Here') // Чтобы увидеть, достигло ли выполнение программы определенной функцииЯ думаю, что большинство разработчиков начинают понимать, что это НЕ то, как вы на самом деле должны отлаживать свои программы. Должен быть лучший способ!
Ну, к счастью, есть инструменты для отладки браузера. В частности, я расскажу об инструментах для разработчиков Chrome.
В этом посте я расскажу о том, как использовать точки остановки, выполнять код, настраивать наблюдение выражений и применять исправления в инструментах для разработчиков Chrome.
Чтобы следовать этому руководству, вам нужно будет использовать образец хранилища кода, который я создал. Кликните здесь. (Загрузка может занять минутку).
Шаг 1: Воспроизводите ошибку
Мы начинаем с выполнения ряда действий, которые последовательно воспроизводят ошибку.
В нашем случае мы будем использовать калькулятор с ошибками. Если вы еще не открыли образец кода, пожалуйста, сделайте это здесь.
Введите 12 для «Entree 1»
Введите 8 для «Entree 2»
Введите 10 для «Entree 3»
Введите 10 для «Tax»
Выберите 20% для «Tip»
Нажмите «Calculate Bill». Сумма должна быть 39,6, однако мы получаем совсем другой результат. Вместо этого, похоже, у нас получилось 14105.09… упс!
Шаг 2. Изучите панель «Источники»
Чтобы отладить это в Chrome, вам нужно привыкнуть к использованию DevTools. Чтобы открыть инструменты для разработчиков Chrome, нажмите Command + Option + I (Mac) или Control + Shift + I (Linux).
После нажатия на панель источников вы должны получить доступ к трем панелям отладки. Навигатор файлов, редактор исходного кода и панель отладки. Покликайте на них и развлекитесь немного, прежде чем переходить к шагу 3.
Шаг 3: Установка первой точки остановки
Прежде чем показать вам, как установить первую точку остановки, позвольте мне сначала продемонстрировать, что я имею в виду, с помощью console.log(). Очевидно, что в ходе выполнения нашей программы происходит что-то с вычислением промежуточного итога. Можно отлаживать программу, выполняя что-то вроде этого:
К счастью, этого больше не нужно делать. Вместо этого мы можем просто установить точку остановки и пройти код, чтобы найти значения, как их видит браузер.
Давайте поговорим о том, как установить точку остановки. Точка остановки — это то, что ваш браузер ищет, чтобы узнать, когда приостановить выполнение кода и позволить вам его отладить.
Для наших целей мы установим точку остановки в самом начале выполнения программы, задав событие мыши. В панели отладчика разверните представление «Точки остановки прослушивателя событий». Откройте «Мышь». Затем отметьте кнопку «Клик».
Теперь, когда вы нажимаете кнопку»Calculate Bill», отладчик приостанавливает выполнение в первой строке первой функции «onClick()». Если отладчик находится в другом месте, нажмите кнопку воспроизведения, и отладчик перейдет к ней.
Шаг 4: Пройдитесь по коду
Во всех средствах отладки пользователь имеет два варианта навигации по коду. Пользователь может «шагнуть в» или «перешагнуть» на следующий вызов функции. В результате каждая строка кода будет выполняться одна за другой внутри каждой функции.
Шаг в следующий вызов функции
«Перешагнуть» позволит пропустить все функции, которые, как известно, работают.
Перейдите к следующему вызову функции
Вот пример того, как я перешагиваю по коду. На вкладке «Диапазон» справа отображаются значения для первых трех вводов.
Шаг 5: Установите точку остановки на строке кода
Вот Это Да! Иметь возможность выполнить свой код удивительно, но немного громоздко, правда? Обычно мне нужно знать значения в определенных местах. Ну, решение этой проблемы — это точка остановки на строке.
Примечание автора: точка остановки на строке кода стала причиной, по которой я отказался от использования console.log() в пользу инструментов для разработчиков Chrome.
Чтобы установить точку остановки на строке кода, просто нажмите номер строки, о который вы хотели бы получить дополнительную информацию. Затем запустите код, как обычно, и выполнение остановится на вашей точке остановки на строке кода, а не будет прерываться на каждом шаге.
Примечание. Если у вас возникли проблемы, убедитесь, что вы установили флажок «клик» для мыши.
Как вы можете видеть, мое промежуточное значение отображается, когда я запросил значение «10812». Значения ввода также отображаются в области диапазона видимости и в качестве наложения.
Хм … Думаю, я, возможно, вычислил ошибку. Однако давайте определим отслеживание выражений.
Шаг 6: Создание отслеживания выражений
Ну, теперь, когда мы знаем, что наши входящие значения не складываются правильно, давайте определим отслеживание выражений для каждого из этих значений.
Отслеживание выражений даст больше информации о любой заданной переменной или выражении в коде.
Чтобы определить значения для «отслеживания», кликните на панели отслеживания вверху и нажмите символ «+». Здесь вы можете ввести имена переменных или другие выражения.
Для демонстрации, я установлю отслеживание на первом значении entree и типе этого значения entree.
Ага! Кажется, я нашел проблему. Похоже, что мой первый ввод сохраняется в виде строки! И кажется отсюда и берется значение. Возможно, все дело в querySelector(). Можно также просмотреть несколько других значений. Давайте отлаживать дальше, а затем перейдем к исправлению кода в DevTools.
Шаг 7: Исправьте код
При последующем рассмотрении действительно проблема оказывается в querySelector()!
Итак, как мы это исправим? Ну, мы можем просто привести строки к числовым значениям, используя, например, Number(getEntree1()), как в строке 74.
Чтобы фактически отредактировать код, вам нужно будет перейти в панель «Элементы» слева от «Исходного кода». Если вы не видите код javascript, вам нужно развернуть тег script. Здесь кликните правой кнопкой мыши на коде и выберите «Редактировать, как HTML».
Если вы используете рабочее пространство, сохранить код можно просто, и вы сразу можете просмотреть результат. Если нет, вам нужно будет сохранить локальную копию веб-страницы с помощью command+s (mac) или control+s (linux). Затем вы можете открыть локальную копию и просмотреть изменения.
Вуаля! Демо-код.
Автор: Parag Zaveri
Источник: https://medium.com/
Редакция: Команда webformyself.