Забудьте об отладке при помощи console.log() раз и навсегда! Изучите, как использовать точки останова для отладки кода в инструментах разработчика Chrome.
Перевод статьи Brandon Morelli: Learn How To Debug JavaScript with Chrome DevTools. Опубликовано с разрешения автора.
Поиск и исправление ошибок может быть затруднительным. Вы можете поддаться соблазну бесконтрольно использовать console.log(), чтобы заставить ваш код работать правильно. С этим покончено!
Эта статья о правильном пути отладки! Вы узнаете, как использовать инструменты разработчика Chrome для настройки точек останова и исследования кода. Такой подход часто наиболее эффективный способ поиска и исправления ошибок в коде.
В этом руководстве показано, как отлаживать одну конкретную проблему, но подобный рабочий процесс полезен для отладки всех типов ошибок JavaScript.
Воспроизведение ошибки - первый шаг к отладке - означает обнаружение ряда действий, приводящих к её появлению. Возможно, вам придётся воспроизводить баг многократно, поэтому желательно устранить любые ненужные шаги.
Чтобы воспроизвести ошибку, которую мы собираемся исправлять в ходе данного руководства, следуйте инструкциям ниже:
- Вот веб-страница, с которой мы будем работать в рамках этой статьи. Открывайте её в новой вкладке: ДЕМО.
- В демо для Number 1 введите
5. - Введите
1для Number 2. - Нажмите Add Number 1 and Number 2.
- Посмотрите на метку ниже инпутов и кнопки. Она говорит, что
5 + 1 = 51.
Упс. Это неверный результат. Результат должен быть равен 6. Это и есть ошибка, которую мы собираемся исправить.
DevTools позволяет приостановить ваш код посреди его выполнения и получить значения всех переменных в этот момент времени. Инструмент для приостановки кода называется точкой останова. Попробуйте прямо сейчас:
- Вернитесь к демо и откройте DevTools, нажав Command+Option+I (Mac) или Control+Shift+I (Windows, Linux).
- Перейдите во вкладку Sources.
- Нажмите Event Listener Breakpoints, чтобы развернуть меню. DevTools раскрывает список категорий событий, таких как Animation и Clipboard.
- Разверните категорию событий Mouse.
- Выберите click.
- Вернувшись к демо, снова нажмите Add Number 1 and Number 2. DevTools приостановит работу и выделит строку кода в панели Sources:
function onClick() {
Почему?
Когда вы выбираете click, вы устанавливаете точку останова на основе всех событий click. Когда происходит клик по любой ноде и эта нода имеет обработчик события click, DevTools автоматически останавливает исполнение на первой строке кода обработчика click для этой ноды.
Одна из распространенных причин ошибок заключается в том, что скрипт выполняется в неправильном порядке. Исследуя код, вы можете выполнять код по одной строке за раз, и выяснить, где именно он выполняется в неожиданном порядке. Попробуйте прямо сейчас:
- На панели Sources в DevTools нажмите Step into next function call.
кнопка Step into next function call
Эта кнопка позволяет вам осуществить выполнение функции onClick() по одной строке за раз. DevTools остановит выполнение и выделит следующую строку кода:
if (inputsAreEmpty()) {
- Теперь нажмите кнопку Step over next function call.
кнопка Step over next function call
Это говорит DevTools выполнить функцию inputAreEmpty(), не заходя в неё. Обратите внимание, что DevTools пропускает несколько строк кода. Это происходит из-за того, что inputAreEmpty() расценивается как false, поэтому блок кода оператора if не выполняется.
Это основная идея исследования кода. Если вы посмотрите на код get-started.js, вы увидите, что ошибка, вероятно, находится где-то в функции updateLabel(). Вместо того, чтобы исследовать каждую строку кода, вы можете использовать другой тип точки останова, чтобы приостановить код ближе к месту ошибки.
Наиболее распространены точки останова, устанавливаемые на строках кода: когда у вас есть определенная строка кода, которую вы хотите приостановить. Попробуйте прямо сейчас:
- Посмотрите на последнюю строку кода в
updateLabel():
label.textContent = addend1 + '+' + addend2 + '=' + sum;
Слева от кода вы можете увидеть номер этой конкретной строки: 32. Нажмите на него. DevTools поместит синюю иконку поверх номера. Это означает, что на этой строке есть точка останова. DevTools теперь всегда будет приостанавливаться до неё.
- Нажмите кнопку Resume script execution:
кнопка Resume script execution
Сценарий будет выполняться до тех пор, пока не встретит точку останова.
- Посмотрите на уже выполненные строки кода в
updateLabel(). DevTools выводит значенияaddend1,addend2иsum.
Значение sum выглядит подозрительно. Похоже, оно расценивается в качестве строки, а должно быть числом. Это и может быть причиной нашей ошибки.
Другая распространенная причина ошибок: переменная или функция генерируют значения, отличные от ожидаемых. Чтобы увидеть, как значения меняются со временем, многие разработчики используют console.log(), но console.log() может утомлять и быть неэффективным по двум причинам. Во-первых, вам может потребоваться вручную отредактировать код с большим количеством вызовов console.log(). Во-вторых, вы можете не знать точно, какая переменная связана с ошибкой, поэтому вам может потребоваться залогировать множество переменных.
Watch Expressions - альтернатива от DevTools для console.log(). Используйте Watch Expressions для отслеживания значения переменных во времени. Как следует из названия, Watch Expressions не ограничиваются только переменными. Вы можете сохранить любое допустимое выражение JavaScript в Watch Expression. Попробуйте прямо сейчас:
- На панели Sources DevTools нажмите Watch. Секция раскроется.
- Нажмите Add Expression.
кнопка Add Expression
- Введите
typeof sum. - Нажмите Enter. DevTools покажет:
typeof sum: "string". Значение справа от двоеточия является результатом вашего Watch Expression.
Как и предполагалось, sum расценивается в качестве строки, а должна быть числом. Это причина нашей ошибки в демо.
Вторая альтернатива в DevTools для console.log() - это консоль. Используйте консоль для взаимодействия с произвольными операторами JavaScript. При отладке разработчики обычно используют консоль для перезаписи значений переменных. В вашем случае консоль может нам помочь проверить возможные пути исправления обнаруженной ошибки. Попробуйте прямо сейчас:
- Если у вас не открыта консоль, откройте её нажатием Escape. Она откроется в нижней части окна DevTools.
- В консоли введите
parseInt(addend1) + parseInt(addend2). - Нажмите Enter. DevTools вычислит команду и выведет
6- ожидаемый результат.
Мы определили потенциальное исправление ошибки. Осталось только проверить его, отредактировав код и перезапустив демо. Вам не нужно выходить из DevTools для применения исправления. Вы можете редактировать код JavaScript непосредственно в пользовательском интерфейсе DevTools. Попробуйте прямо сейчас:
- В редакторе кода на панели Sources DevTools замените
var sum = addend1 + addend2наvar sum = parseInt(addend1) + parseInt(addend2);. Это на одну строку выше места вашей остановки. - Нажмите Command+S (Mac) или Control+S (Windows, Linux) для сохранения изменений. Фон кода изменится на красный, сигнализируя, что сценарий был изменен в DevTools.
- Нажмите Deactivate breakpoints.
кнопка Deactivate breakpoints
Кнопка окрасится синим, указывая, что она активна: DevTools игнорирует любые точки останова.
- Нажмите Resume script execution
кнопка Resume script execution
Попробуйте демо с разными значениями, теперь оно должно правильно вычислять суммы.
Часть этой страницы - модификации, основанные на работе, созданной и распространяемой Google, и используются в соответствии с условиями, описанными в Creative Commons 3.0 Attribution License. Эта статья была адаптирована из Get Started with Debugging JavaScript in Chrome DevTools от Kayce Basques.
Слушайте наш подкаст в iTunes и SoundCloud, читайте нас на Medium, контрибьютьте на GitHub, общайтесь в группе Telegram, следите в Twitter и канале Telegram, рекомендуйте в VK и Facebook.