By Parag Zaveri | Oct 1, 2018
Когда я начал свой путь инженера-разработчика программного обеспечения, я обнаружил, что на этом пути было много трудностей. Одна из самых частых сложностей, с которой сталкивается каждый новичок — отладка. Сначала, когда я узнал, что могу открыть консоль и посмотреть на вывод console.log(), чтобы найти ошибку, я был как святое место. Но этот метод малоэффективен. Вот несколько примеров, которые мне нравятся и более забавны:
console.log(‘Total Price:’, total) //In an effort to see if the value was stored
console.log(‘Here’) //If my program execution reached a certain function
Я думаю, что большинство разработчиков начинают понимать, что это не лучший способ отладки вашей программы. Существует лучший способ.
Хороший способ сделать это — использовать инструменты отладки браузера. В этой статье я использую инструменты разработчика Chrome.
В этом посте я опишу, как использовать точки останова, выполнять код пошагово, устанавливать выражения отслеживания и применять исправления в инструментах разработчика Chrome.
Чтобы лучше выполнить это руководство, вам нужно использовать мой пример кода.кликните сюда(нужно перевернуть стену)
Шаг 1. Воспроизведите ошибку
Сначала мы выполняем ряд глючных операций.
1. В этом примере мы используем глючный калькулятор чаевых.
2. Введите 12 в «Entree1».
3. Введите 8 в «Entree2».
4. Введите 10 в «Entree3»
5. Введите 10 в поле «Налог».
6. Выберите 20% в разделе «Чаевые».
7. Нажимаем кнопку Calculate Bill, сумма должна быть 39,6, однако получаем другой ответ и результат 14105,09. . . уй!
Шаг 2. Научитесь пользоваться панелью ресурсов
Для отладки в хроме нужно открыть инструменты разработчика. Нажмите Command+Option+I (Mac) или Control+Shift+I (Linux), чтобы открыть его.
Откройте панель ресурсов, как показано выше. Панель навигации по файлам, редактор исходного кода, панель отладки. Ознакомьтесь с ним перед третьим шагом.
Шаг 3: Установите точки останова
Прежде чем использовать точки останова, позвольте мне использовать консоль для отладки. Очевидно, что отладку можно выполнить, выполнив следующие действия:
К счастью, больше нет необходимости разрабатывать подобное в браузере. Вместо этого мы можем установить точки останова, чтобы шаг за шагом наблюдать за нашим кодом.
Давайте посмотрим, как установить точки останова, которые ищет браузер, чтобы знать, когда приостановить выполнение вашего кода и дать вам возможность отладить его.
В учебных целях мы устанавливаем точку останова в самом начале программы, используя Set Mouse Events.
В разделе «Отладчик» разверните представление для точек останова прослушивателя событий. Оттуда разверните «Мышь». Затем отметьте кнопку «Нажать».
Теперь, когда вы нажмете кнопку «Рассчитать счет», отладчик приостановит выполнение на первой строке первой функции «onClick()». Если отладчик находится где-то еще, нажмите кнопку воспроизведения, и отладчик пропустит его.
Шаг 4. Начните отладку
Во всех средствах отладки есть две кнопки, выполняющие код. Разработчик может войти внутрь функции или пропустить ее.
Не пропускайте каждую строку кода в каждом методе.
метод пропуска
Вот пример моего пошагового выполнения кода. На вкладке Scope значения первых трех полей ввода отображаются справа.
Шаг 5: Установите точку останова на номер строки
Это здорово использовать, но есть проблема. Ставить такие точки останова слишком глупо, обычно нам просто нужно куда-то смотреть. Есть хороший способ установить точки останова на количестве строк определенной строки
Голос автора: Эта функция заставила меня полностью отказаться от консольного метода и влюбиться в средства отладки.
Просто нажмите на номер строки кода, чтобы установить точку останова строки кода. Затем запустите свой код, и отладчик остановится там, где вы установили точку останова.
Совет: Если у вас возникнут проблемы, обязательно снимите флажок «Щелкнуть» в разделе «Мышь».
Как видите, мое промежуточное значение показывает «10812». Мои входные значения отображаются в панели и также рассчитываются.
эммм. . . Кажется, это конкатенация строк.
Давайте рассмотрим еще несколько выражений, чтобы прояснить весь процесс.
Шаг 6: Создайте выражение наблюдения
Теперь, когда мы знаем, что наши значения входа не складываются правильно, давайте настроим выражения наблюдения для каждого значения.
Выражения наблюдения предоставят больше информации о любой заданной переменной или выражении в коде.
Чтобы определить значение как «наблюдать», щелкните самую верхнюю панель просмотра и нажмите знак +, когда она откроется. Здесь вы можете ввести имена переменных или другие выражения.
В этом примере я установлю контрольные значения и типы для моего первого значения входа.
Ага! Кажется, я нашел ошибку. Мое первое значение хранится в виде строки! Кажется, это призрак метода querySelector. Другие значения также могут быть задействованы. Отлаживаем дальше и меняем наш код в DevTools.
Шаг 7: Ремонт
После дальнейшего изучения метод querySelector определенно является виновником.
Так как же решить эту проблему? Что ж, мы можем просто привести строку к числовому значению, используя, например, Number(getEntree1()), как показано в строке 74.
Чтобы реально отредактировать код, вам нужно перейти на панель «элементы» слева от «источников». Если вы не видите код javascript, вам нужно расширить тег скрипта. Оттуда щелкните правой кнопкой мыши код и выберите «Редактировать как html».
Если вы используете рабочее пространство, вы можете легко сохранить свой код и сразу же просмотреть его. Если нет, вам нужно использовать команду command+s (mac) или control+s (linux) для сохранения.
Затем вы можете наблюдать за изменениями собственного кода.
Братишка, ты здоров~
* * *Метод отладки в этой статье вдохновлен Kayce Basques.эта статьяВдохновение.