Отладка 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() {
   

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

   Примечание . Если вы сделали паузу на другой строке, значит, у вас есть расширение браузера, которое регистрирует прослушиватель событий click на каждой посещаемой вами странице. Вы были приостановлены в прослушивателе click расширения. Если вы используете режим инкогнито для просмотра в приватном режиме , который отключает все расширения, вы можете видеть, что вы каждый раз делаете паузу на правильной строке кода.

Точки останова прослушивателя событий — это лишь один из многих типов точек останова, доступных в 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: проверьте область применения

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

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

Примечание. В зависимости от ваших предпочтений в макете и ширины окна DevTools вкладка «Область действия» может отображаться как сворачиваемый раздел вместе с точками останова и стеком вызовов .

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

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

Примечание. В зависимости от ваших предпочтений в макете и ширины окна DevTools вкладка «Наблюдение» может отображаться как сворачиваемый раздел вместе с точками останова и стеком вызовов .

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

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

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

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

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

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

1. Если у вас не открыт ящик консоли, нажмите Escape , чтобы открыть его. Он откроется в нижней части окна DevTools.
2. В консоли введите parseInt(addend1) + parseInt(addend2) . Этот оператор работает, потому что вы приостанавливаетесь на строке кода, где addend1 и addend2 находятся в области видимости.
3. Нажмите Enter . 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 и сохранять их в своих источниках с помощью Workspaces .

Совет. Начиная с версии Chrome 105, вы можете редактировать приостановленную функцию в реальном времени .

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

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

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

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

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

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