Отладка JavaScript

Kayce Basques

Sofia Emelianova

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

Шаг 1. Воспроизведите ошибку

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

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

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

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

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

1. Откройте DevTools, нажав Command+Option+J (Mac) или Control+Shift+J (Windows, Linux). Этот ярлык открывает панель консоли .

   

2. Откройте вкладку «Источники» .

   

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

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

Шаг 3. Приостановите выполнение кода с помощью точки останова.

Распространенный метод отладки подобных проблем — вставка в код большого количества операторов 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. На панели «Отладка JavaScript» нажмите «Точки останова прослушивателя событий» , чтобы развернуть раздел. DevTools отображает список расширяемых категорий событий, таких как Анимация и Буфер обмена .
2. Рядом с категорией событий «Мышь» нажмите «Развернуть» . . DevTools отображает список событий мыши, таких как click и mousedown . Рядом с каждым событием есть флажок.

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

   

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

   function onClick() {
   

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

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

Шаг 4. Пройдитесь по коду

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

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

   if (inputsAreEmpty()) {
   

2. Нажмите «Перейти к следующему вызову функции». . DevTools выполняет inputsAreEmpty() , не входя в него. Обратите внимание, что DevTools пропускает несколько строк кода. Это происходит потому, что inputsAreEmpty() имеет значение false, поэтому блок кода оператора if не выполняется.

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

Шаг 5. Установите точку останова на строке кода

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

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

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

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

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

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

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

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

Способ 1: панель «Область»

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

Метод 2: наблюдение за выражениями

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

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

На снимке экрана выше показана панель Watch Expression (внизу справа) после создания контрольного выражения typeof sum . Если окно DevTools большое, панель Watch Expression находится справа над панелью «Точки останова прослушивателя событий» .

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

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

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

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

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

Шаг 7. Примените исправление

Вы нашли исправление ошибки. Все, что осталось, — это опробовать ваше исправление, отредактировав код и повторно запустив демо-версию. Чтобы применить исправление, вам не нужно выходить из 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. Нажмите «Деактивировать точки останова». . Его цвет изменится на синий, указывая на то, что он активен. Пока этот параметр установлен, DevTools игнорирует любые установленные вами точки останова.
5. Попробуйте демо-версию с разными значениями. Демо-версия теперь рассчитывается правильно.

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

Поздравляем! Теперь вы знаете, как максимально эффективно использовать Chrome DevTools при отладке JavaScript. Инструменты и методы, которые вы изучили в этом руководстве, могут сэкономить вам бесчисленное количество часов.

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

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

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

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