Рассказываем, как использовать панель Chrome Devtools удобна для отладки.
Поиск и исправление ошибок может быть затруднительным для новичков. Если думаете, что использовать console.log () для отладки кода лучшее решение, то вы неправы.
В этой статье мы расскажем об отличных инструментах Google Chrome Devtools для дебаггинга Этот процесс является гораздо более эффективным способом решения данной проблемы.
Приводим здесь всего один простой пример использования отладки, но его можно применить к любой задаче.
Шаг 1: Воспроизведите баг
Воспроизведение багов всегда является первым шагом к отладке. Это означает найти последовательность действий, приводящих к ошибке. Процесс может быть долгим, поэтому старайтесь его оптимизировать.
Чтобы самому проделать действия из этого туториала, сделайте следующее:
- Вот веб-страница, с которой мы будем работать в этом уроке. Не забудьте открыть её в новой вкладке;
- Введите число 5 в поле «Number 1»;
- Введите число 1 в поле «Number 2»;
- Кликните на кнопку «Add»;
- Посмотрите, вам говорят, что 5+1=51;
Упс, очевидно, что это неверно. Результатом должно быть число 6, эту ошибку и нужно исправлять.
Шаг 2: Приостановите выполнение с помощью точки останова
DevTools позволяют остановить выполнение кода в процессе и посмотреть значения всех переменных в этот момент времени. Инструмент для приостановки кода называется брейкпоинтом. Попробуйте:
- Вернитесь на нашу тестовую страницу и включите DevTools, нажав Cmd + Option + I (Mac) или Ctrl + Shift + I (Windows, Linux);
- Перейдите к вкладке «Sources»;
- Разверните «Event Listener». DevTools раскроет список категорий событий, таких как анимация и буфер обмена;
- Поставьте флажок в ячейке «click»;
- Вернувшись к странице, снова прибавьте «Number 1» и «Number 2». DevTools приостановит демонстрацию и выделит строку кода на панели «Sources». DevTools выделит эту строку кода:
function onClick() {Почему так происходит?
Когда вы выбираете «click», вы устанавливаете брейкпоинты, зависящие от событий типа click к каждому элементу, который имеет для него обработчик.
Шаг 3: Выполните пошаговую отладку
Одна из распространенных причин, по которой возникают ошибки заключается в том, что скрипт выполняется не в том порядке, как вы думаете. Избежать этой проблемы можно, понаблюдав за исполнением кода строчка за строчкой. Пробуем:
- На панели «Sources» нажмите «Step into next function call button»
Эта кнопка позволит последовательно отследить выполнение функции onClick. Остановите процесс, когда DevTools выделит следующую строку кода:
if (inputsAreEmpty()) {
- Теперь нажмите кнопку «Step over next function call button»;
Теперь DevTools знает, что нужно выполнить inputAreEmpty (), без дебаггинга его содержимого. Обратите внимание, что DevTools пропускает несколько строк кода. Это происходит потому, что inputAreEmpty () возвращает false, поэтому блок if не выполнялся.
Это и есть суть пошаговой отладки кода. Если вы посмотрите на код в get-started.js, то увидите, что ошибка, вероятно, находится где-то в функции updateLabel(). Вместо того, чтобы переходить через каждую строку кода, вы можете использовать другой тип брейкпоинта, чтобы остановить процесс ближе к месту ошибки.
Шаг 4: Выберите другую точку останова
Тип line-of-code является наиболее популярным брейкпоинтом. Если вы знаете, где может быть ошибка, используйте этот тип:
- Посмотрите на последнюю строку кода в updateLabel (), которая выглядит так:
label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
- Слева от этого кода вы увидите номер строки: 32. Нажмите 32. Теперь DevTools всегда будет приостанавливаться до выполнения этой строки кода;
- Нажмите кнопку «Resume script execution button». Сценарий продолжит выполняться, до следующей строки кода с брейкпоинтом;
- Посмотрите на строки кода в updateLabel (), которые уже выполнены. DevTools выводит значения addend1, addend2 и sum.
Значение суммы выглядит подозрительно. Похоже, оно оценивается не как число, а как строка. Это ещё одна частая причина ошибок.
Шаг 5: Проверьте значения переменных
Распространенной причиной ошибок является то, что переменная или функция генерируют не то значение, которое нужно. Многие разработчики используют console.log (), чтобы посмотреть, как меняются значения, но console.log () для этого плохо подходит, как минимум по двум причинам: во-первых, может потребоваться вручную редактировать код с большим количеством вызовов console.log (), во-вторых, вы можете не знать, какая переменная связана с ошибкой, поэтому придётся выводить сразу несколько переменных.
Одной из альтернатив console.log в DevTools является Watch Expressions. Используйте Watch Expressions для отслеживания изменений значений переменных. Как следует из названия, Watch Expressions не ограничивается только переменными. Вы можете сохранить любое допустимое выражение JavaScript в Watch Expression:
- На панели «Sources» выберите вкладку «Watch»;
- Затем нажмите «Add Expression»;
- Введите typeof sum;
- Нажмите enter. DevTools покажет typeof sum: "string". Это значение является результатом Watch Expression.
Как и предполагалось, sum расценивается как строка, а не как число. Это та самая ошибка, о которой мы говорили выше.
Ещё одной альтернативой DevTools для console.log () является консоль. Разработчики часто используют её для перезаписи значений переменных при отладке. В вашем случае консоль может быть удобна, чтобы проверить способы исправить ошибку. Пример:
- Если вы не открыли панель с консолью, нажмите Escape, чтобы открыть его. Он открывается в нижней части окна DevTools;
- В консоли введите parseInt (addend1) + parseInt (addend2);
- Нажмите enter. DevTools выводит число 6, что и является ожидаемым результатом.
Шаг 6: Внесите исправления
Вы определили где ошибка. Осталось только исправить её, отредактировав код и перезапустив демо. Вы можете редактировать код JavaScript непосредственно в пользовательском интерфейсе DevTools:
- В редакторе кода на панели «Sources» замените var sum = addend1 + addend2 на var sum = parseInt (addend1) + parseInt (addend2) ; Это строка №31.
- Нажмите Cmd + S (Mac) или Ctrl + S (Windows, Linux), чтобы применить изменения. Фон кода изменится на красный, чтобы показать, что сценарий был изменен в DevTools;
- Нажмите «Deactivate breakpoints»
Цвет поменяется на синий. В этом режиме, DevTools игнорирует любые брейкпоинты, которые вы установили.
- Нажмите «Resume script execution».
Впишите в поля числа, протестируйте. Теперь всё должно работать как следует!
Оригинал: codeburst.io
Комментарии