Отладка JavaScript

Kayce Basques

Sofia Emelianova

В этом руководстве вы научитесь базовому рабочему процессу отладки любой проблемы JavaScript в DevTools. Читайте дальше или посмотрите видеоверсию этого урока.

Воспроизвести ошибку

Поиск серии действий, которые последовательно воспроизводят ошибку, всегда является первым шагом к отладке.

1. Откройте это демо в новой вкладке.
2. Введите 5 в поле «Цифра 1» .
3. Введите 1 в поле «Номер 2» .
4. Нажмите «Добавить номер 1 и номер 2» . Надпись под кнопкой гласит: 5 + 1 = 51 . Результат должен быть 6 . Это ошибка, которую вы собираетесь исправить.

В этом примере результат 5 + 1 равен 51. Должно быть 6.

Ознакомьтесь с пользовательским интерфейсом панели «Источники»

DevTools предоставляет множество различных инструментов для разных задач, таких как изменение CSS, профилирование производительности загрузки страниц и мониторинг сетевых запросов. Панель «Источники» — это место, где вы выполняете отладку JavaScript.

1. Откройте DevTools и перейдите на панель «Источники» .

   

Панель «Источники» состоит из трех разделов:

1. Вкладка Страница с деревом файлов. Здесь перечислены все файлы, которые запрашивает страница.
2. Раздел «Редактор кода» . После выбора файла на вкладке «Страница» здесь отображается содержимое этого файла.

3. Раздел «Отладчик» . Различные инструменты для проверки JavaScript страницы.

   Если окно DevTools широкое, по умолчанию отладчик находится справа от редактора кода . В этом случае вкладки Scope и Watch объединяют Breakpoints , Call stack и другие в виде свертываемых разделов.

Приостановить код с помощью точки останова

Распространенный метод отладки подобных проблем — вставка в код большого количества операторов console.log() для проверки значений во время выполнения сценария. Например:

function updateLabel() {
  var addend1 = getNumber1();
  console.log('addend1:', addend1);
  var addend2 = getNumber2();
  console.log('addend2:', addend2);
  var sum = addend1 + addend2;
  console.log('sum:', sum);
  label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}

Метод console.log() может выполнить работу, но точки останова могут сделать ее быстрее. Точка останова позволяет приостановить выполнение кода в середине его выполнения и проверить все значения в данный момент времени. Точки останова имеют несколько преимуществ перед методом console.log() :

• При использовании console.log() вам необходимо вручную открыть исходный код, найти соответствующий код, вставить инструкции console.log() , а затем перезагрузить страницу, чтобы увидеть сообщения в консоли. С помощью точек останова вы можете приостановить работу соответствующего кода, даже не зная, как он структурирован.
• В операторах console.log() вам необходимо явно указать каждое значение, которое вы хотите проверить. С помощью точек останова DevTools показывает значения всех переменных в данный момент времени. Иногда на ваш код влияют переменные, о которых вы даже не подозреваете.

Короче говоря, точки останова могут помочь вам найти и исправить ошибки быстрее, чем метод console.log() .

Если вы сделаете шаг назад и задумаетесь о том, как работает приложение, вы можете сделать обоснованное предположение, что неверная сумма ( 5 + 1 = 51 ) вычисляется в прослушивателе событий click , который связан с кнопками «Добавить номер 1» и «Номер 2» . Поэтому вы, вероятно, захотите приостановить выполнение кода примерно в то время, когда выполняется прослушиватель click . Точки останова прослушивателя событий позволяют вам сделать именно это:

1. В разделе «Отладчик» нажмите «Точки останова прослушивателя событий» , чтобы развернуть раздел. DevTools отображает список расширяемых категорий событий, таких как Анимация и Буфер обмена .
2. Рядом с категорией событий «Мышь» нажмите «arrow_right» «Развернуть» . DevTools отображает список событий мыши, таких как click и mousedown . Рядом с каждым событием есть флажок.

3. Установите флажок щелчка . DevTools теперь настроен на автоматическую приостановку при выполнении любого прослушивателя событий click .

   

4. Вернувшись в демо-версию, снова нажмите «Добавить номер 1» и «Номер 2» . DevTools приостанавливает демонстрацию и выделяет строку кода на панели «Источники» . DevTools следует приостановить на этой строке кода:

   function onClick() {
   

   Если вы остановились на другой строке кода, нажимайте «Возобновить выполнение сценария», пока не остановитесь на нужной строке.

Точки останова прослушивателя событий — это лишь один из многих типов точек останова, доступных в DevTools. Стоит изучить все различные типы, поскольку каждый тип в конечном итоге помогает максимально быстро отлаживать различные сценарии. См. раздел «Приостановка кода с помощью точек останова» , чтобы узнать, когда и как использовать каждый тип.

Шаг по коду

Одной из распространенных причин ошибок является выполнение сценария в неправильном порядке. Пошаговое рассмотрение кода позволяет вам просмотреть его выполнение по одной строке за раз и выяснить, где именно он выполняется, в другом порядке, чем вы ожидали. Попробуй это сейчас:

1. На панели «Источники» DevTools нажмите «Step_into» «Перейти к следующему вызову функции», чтобы выполнить пошаговое выполнение функции onClick() по одной строке за раз. DevTools выделяет следующую строку кода:

   if (inputsAreEmpty()) {
   

2. Нажмите Step_over. Перейдите к следующему вызову функции .

   DevTools выполняет inputsAreEmpty() , не входя в него. Обратите внимание, что DevTools пропускает несколько строк кода. Это происходит потому, что inputsAreEmpty() имеет значение false, поэтому блок кода оператора if не выполняется.

Это основная идея пошагового выполнения кода. Если вы посмотрите на код в get-started.js , то увидите, что ошибка, вероятно, находится где-то в функции updateLabel() . Вместо того, чтобы проходить каждую строку кода, вы можете использовать другой тип точки останова, чтобы приостановить выполнение кода ближе к вероятному местоположению ошибки.

Установите точку останова на строке кода

Точки останова на строке кода являются наиболее распространенным типом точек останова. Если у вас есть определенная строка кода, на которой вы хотите приостановить работу, используйте точку останова на строке кода:

1. Посмотрите на последнюю строку кода в updateLabel() :

   label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
   

2. Слева от кода вы можете увидеть номер этой конкретной строки кода, который равен 32 . Нажмите 32 . DevTools помещает синий значок поверх 32 . Это означает, что на этой строке есть точка останова. DevTools теперь всегда делает паузу перед выполнением этой строки кода.

3. Нажмите «Возобновить». Возобновить выполнение сценария . Сценарий продолжает выполняться до тех пор, пока не достигнет строки 32. В строках 29, 30 и 31 DevTools отображает значения addend1 , addend2 и sum рядом с их объявлениями.

В этом примере DevTools приостанавливает работу на точке останова строки кода в строке 32.

Проверьте значения переменных

Значения addend1 , addend2 и sum выглядят подозрительно. Они заключены в кавычки, что означает, что они являются строками. Это хорошая гипотеза для объяснения причины ошибки. Теперь пришло время собрать больше информации. DevTools предоставляет множество инструментов для проверки значений переменных.

Метод 1: проверьте область применения

Когда вы останавливаетесь на строке кода, на вкладке «Область» показано, какие локальные и глобальные переменные определены на данном этапе выполнения, а также значение каждой переменной. Он также показывает переменные закрытия, если это применимо. Если вы не остановились на строке кода, вкладка «Область действия» пуста.

Дважды щелкните значение переменной, чтобы отредактировать его.

Способ 2: наблюдайте за выражениями

Вкладка «Наблюдение» позволяет отслеживать значения переменных с течением времени. Watch не ограничивается только переменными. На вкладке Watch можно сохранить любое допустимое выражение JavaScript.

Попробуй это сейчас:

1. Откройте вкладку «Смотреть» .
2. Нажмите « Добавить контрольное выражение» .
3. Тип typeof sum .
4. Нажмите Ввод . DevTools показывает typeof sum: "string" . Значение справа от двоеточия — это результат вашего выражения.

На этом снимке экрана показана вкладка «Наблюдение» (внизу справа) после создания выражения наблюдения за typeof sum .

Как и предполагалось, sum оценивается как строка, хотя она должна быть числом. Теперь вы подтвердили, что это является причиной ошибки.

Способ 3: Консоль

Помимо просмотра сообщений console.log() , вы также можете использовать консоль для оценки произвольных операторов JavaScript. Что касается отладки, вы можете использовать консоль для проверки потенциальных исправлений ошибок. Попробуй это сейчас:

1. Если у вас не открыт ящик консоли, нажмите Escape, чтобы открыть его. Он откроется в нижней части окна DevTools.
2. В консоли введите parseInt(addend1) + parseInt(addend2) . Этот оператор работает, потому что вы приостанавливаетесь на строке кода, где addend1 и addend2 находятся в области видимости.
3. Нажмите Ввод . DevTools оценивает оператор и выводит 6 — результат, который вы ожидаете от демонстрации.

На этом снимке экрана показан ящик консоли после вычисления parseInt(addend1) + parseInt(addend2) .

Применить исправление

Вы нашли исправление ошибки. Все, что осталось, — это опробовать ваше исправление, отредактировав код и повторно запустив демо-версию. Чтобы применить исправление, вам не нужно выходить из DevTools. Вы можете редактировать код JavaScript непосредственно в пользовательском интерфейсе DevTools. Попробуй это сейчас:

1. Нажмите «Возобновить». Возобновить выполнение сценария .
2. В редакторе кода замените строку 31 var sum = addend1 + addend2 на var sum = parseInt(addend1) + parseInt(addend2) .
3. Нажмите Command + S (Mac) или Control + S (Windows, Linux), чтобы сохранить изменения.
4. Нажмите label_off Деактивировать точки останова . Его цвет изменится на синий, указывая на то, что он активен. Пока этот параметр установлен, DevTools игнорирует любые установленные вами точки останова.
5. Попробуйте демо-версию с разными значениями. Демо-версия теперь рассчитывается правильно.

Следующие шаги

В этом уроке показаны только два способа установки точек останова. DevTools предлагает множество других способов, в том числе:

• Условные точки останова, которые срабатывают только тогда, когда заданное вами условие истинно.
• Точки останова на перехваченных или неперехваченных исключениях.
• Точки останова XHR, которые срабатывают, когда запрошенный URL-адрес соответствует предоставленной вами подстроке.

См. раздел «Приостановка кода с помощью точек останова» , чтобы узнать, когда и как использовать каждый тип.

Есть несколько элементов управления пошаговым выполнением кода, которые не были объяснены в этом руководстве. Дополнительную информацию см. в разделе «Переход через строку кода» .