Откройте для себя новые рабочие процессы отладки с помощью этого исчерпывающего справочника по функциям отладки Chrome DevTools.

Если вы используете console.log() каждый раз для отладки, вы можете заметить, что вы тратите гораздо больше времени на отладку. Чтобы использовать большую часть нашего времени для большего производственного времени, мы используем Chrome DevTools 101, который имеет множество функций отладки, которые мы собираемся обсудить ниже.

Создание ошибки на демо-сайте

Мы будем использовать веб-сайт «DEMO» для представления отладки в Chrome DevTools 101.

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

Чтобы отслеживать ошибку и эффективно ее устранять, мы будем использовать Chrome DevTools 101

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

С помощью DevTools вы можете приостановить код в середине выполнения, проверить переменную в области видимости в это конкретное время и запустить код по одной строке за раз.

Пользовательский интерфейс панели инструментов разработчика

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

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

2. Нажмите на панель «Источники» на верхней панели DevTools.

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

Установка точек останова в DevTools

Если мы сделаем шаг назад и подумаем о том, как работает функция, мы можем предположить, что неверная сумма (5+1 = 51) вычисляется в прослушивателе событий щелчка, связанном с кнопкой «Добавить номер 1 и номер 2». . Следовательно, мы, вероятно, хотим приостановить код примерно в то время, когда выполняется прослушиватель кликов.

Чтобы инициализировать точки останова прослушивателя событий Click, выполните следующие действия:

  1. Нажмите на Точки останова прослушивателя событий на панели Отладка JavaScript, чтобы отобразить список многих компонентов.
  2. Разверните параметр мыши и включите параметр «щелчок».
  3. Теперь DevTools останавливается на первой строке любого исполняемого прослушивателя событий щелчка.
  4. Когда мы нажимаем кнопку «Добавить номер 1 и номер 2», мы видим, что на экране в самом верху отображается приглашение с надписью «Приостановлено в отладчике».
  5. В пользовательском интерфейсе DevTools мы видим, что код выделен синим цветом в строке, на которой в данный момент приостановлен отладчик.
  6. Если вы не видите никаких проблем с текущей строкой кода, мы можем просканировать следующую строку кода с помощью прослушивателя событий щелчка, щелкнув символ возобновления на верхней панели отладчика.

Помните, что точки останова прослушивателя событий являются лишь частью точек останова. DevTools предлагает гораздо больше инструментов JavaScript Breakpoints, таких как установка точки останова в определенной строке кода, при изменении кода DOM или при возникновении исключения и т. д.

Проверка через строку кода

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

  1. На панели Источники DevTools нажмите Перейти к следующему вызову функции, чтобы выполнить выполнение функции onClick() по одной строке за раз. DevTools выделяет следующую строку кода:
  2. чтобы выполнить выполнение функции onClick() по одной строке за раз. DevTools выделяет следующую строку кода:if(inputsAreEmpty())
  3. Щелкните Перейти к следующему вызову функции. DevTools выполняет «inputsAreEmpty()», не выполняя его. Обратите внимание, как DevTools пропускает несколько строк кода. Это связано с тем, что «inputsAreEmpty()» оценивается как ложное, поэтому блок кода инструкции 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 справа от точки с запятой в каждой строке.

Проверка и проверка значений переменных

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

Шаг 1. Панель «Область»

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

Шаг 2: Следите за выражениями

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

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

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

Шаг 3: Консоль

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

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

Применить изменения

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

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