Начало работы по отладке JavaScript

В этой статье описывается базовый рабочий процесс для отладки любой проблемы JavaScript с помощью средств разработки.

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

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

1. Откройте демонстрационную веб-страницу Приступая к отладке JavaScript в новом окне или вкладке. Чтобы открыть веб-страницу, щелкните ссылку правой кнопкой мыши и выберите "Открыть ссылку в новой вкладке" или "Открыть ссылку в новом окне" во всплывающем окне. Кроме того, можно нажать и удерживать нажатой клавишу CTRL (для Windows, Linux) или Command (для macOS), а затем щелкнуть ссылку.

   Совет. Откройте Microsoft Edge в режиме InPrivate, чтобы убедиться, что Microsoft Edge работает в чистом состоянии. Дополнительные сведения см. в разделе Обзор InPrivate в Microsoft Edge.

2. Введите 5 в текстовое поле Число 1 .

3. Введите 1 в текстовое поле Число 2 .

4. Щелкните Добавить число 1 и число 2. На метке под кнопкой указано 5 + 1 = 51, а не ожидаемый результат 6:

   

Шаг 2. Знакомство с пользовательским интерфейсом средства "Источники"

Средства разработки предоставляют несколько средств для различных задач. Эти задачи включают изменение CSS, профилирование производительности загрузки страниц и мониторинг сетевых запросов. Средство "Источники " — это место отладки JavaScript.

1. Чтобы открыть средства разработчика, щелкните веб-страницу правой кнопкой мыши и выберите Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроется devTools:

   

2. Выберите инструмент Источники . Перейдите на вкладку Страница, а затем выберите файл JavaScript: get-started.js

   

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

• Панель Навигатор (в левом верхнем углу). Здесь перечислены все файлы, запрашиваемые веб-страницей.

• Область редактора (в правом верхнем углу). После выбора файла в области Навигатор на этой панели отображается содержимое файла.

• Панель Отладчик (внизу). Эта панель предоставляет средства для проверки 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() необходимо явно указать каждое значение, которое требуется проверить. При использовании точек останова в Средствах разработки отображаются значения всех переменных на данный момент времени. Иногда переменные, влияющие на код, скрыты и замаскированы.

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

Точки останова прослушивателя событий

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

1. В области (index)Навигатор выбран по умолчанию. Щелкните .get-started.js

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

3. Щелкните Развернуть () с помощью события Мыши , открыв эту категорию. DevTools отображает список событий мыши, таких как щелчок и нажатие мыши. Рядом с каждым событием установлен флажок.

4. Установите флажок рядом с кнопкой мыши:

   

   DevTools теперь настроен для автоматической приостановки при запуске прослушивателя click событий.

5. На отображаемой демонстрационной веб-странице еще раз нажмите кнопку Добавить число 1 и число 2 . DevTools приостанавливает демонстрацию и выделяет строку кода в средстве "Источники ". DevTools приостанавливается в строке 16 в get-started.js, как показано в следующем фрагменте кода:

   if (inputsAreEmpty()) {
   

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

   Примечание.

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

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

Шаг 4. Пошаговое выполнение кода

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

1. Щелкните Шаг над следующим вызовом функции (). DevTools выполняет следующий код, не вдаваясь в него:

   if (inputsAreEmpty()) {
   

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

2. В средстве "Источники " devTools щелкните Шаг в следующий вызов функции (), чтобы выполнить пошаговое выполнение updateLabel() функции по одной строке за раз.

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

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

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

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

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

2. Номер строки для label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum; — 34. Щелкните строку 34. DevTools отображает красный круг слева от 34. Красный круг указывает, что в этой строке находится точка останова строки кода. Средства разработки всегда приостанавливаются перед выполнением этой строки кода.

3. Нажмите кнопку Возобновить выполнение скрипта ():

   

   Скрипт продолжает выполняться, пока не достигнет строки 34. В строках 31, 32 и 33 DevTools выводит значения каждой переменной справа от точки с запятой в каждой строке. Ниже приведены следующие значения:

   • addend1 = "5"
   • addend2 = "1"
   • sum = "51"

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

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

Изучение значений переменных в области области

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

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

Изучение значений переменных с помощью контрольных выражений

Панель контрольных значений позволяет отслеживать значения переменных (например, sum) или выражений (например, typeof sum). Любое допустимое выражение JavaScript можно сохранить в watch выражении.

1. Перейдите на вкладку Контроль.

2. Щелкните Добавить выражение watch ().

3. Введите выражение typeof sumwatch и нажмите клавишу ВВОД:

На панели контрольных значений отображается typeof sum: "string". Значение справа от двоеточия является результатом выражения watch. Ошибка связана с sum тем, что она оценивается как строка, когда она должна быть числом.

Если окно DevTools широкое, панель Контроль отображается в области Отладчик , которая затем появится справа.

Изучение значений переменных через консоль

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

1. Если средство "Консоль" закрыто, нажмите клавишу ESC , чтобы открыть его. В нижней области окна Средства разработки откроется средство "Консоль ".

2. В консоли введите выражение parseInt(addend1) + parseInt(addend2). Выражение вычисляется для текущей область, учитывая, что отладчик приостановлен в строке кода, где addend1 и addend2 находятся в область.

3. Нажмите клавишу ВВОД. DevTools оценивает инструкцию и выводит 6 в консоли, что является правильным результатом, который вы ожидаете получить в демонстрации:

   

Шаг 7. Применение исправления к возвращенном коду, а затем к фактическому исходному коду

Мы определили возможное исправление ошибки. Затем измените код JavaScript непосредственно в пользовательском интерфейсе DevTools, а затем повторно запустите демонстрацию, чтобы протестировать исправление следующим образом:

1. Щелкните Возобновить выполнение скрипта ().

2. В области редактора замените строку var sum = addend1 + addend2var sum = parseInt(addend1) + parseInt(addend2)на .

3. Нажмите клавиши CTRL+S (Windows, Linux) или COMMAND+S (macOS), чтобы сохранить изменения.

4. Щелкните Деактивировать точки останова (). Значок точки останова изменится на серый, чтобы указать, что точка останова неактивна. Хотя деактивация точек останова задана, Средства разработки игнорируют все заданные вами точки останова. На демонстрационной веб-странице теперь отображается правильное значение:

   

5. Попробуйте демонстрацию с разными значениями. Теперь демонстрация вычисляется правильно.

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

Дальнейшие действия

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

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

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

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

Дополнительные сведения о кнопках отладчика для пошагового выполнения кода см. в разделе Пошаговое выполнение строки кода в разделе "Функции отладки JavaScript".

См. также

• Функции отладки JavaScript — использование пользовательского интерфейса отладчика в средстве "Источники".
• Обзор средства "Источники " — представляет отладчик JavaScript и редактор кода.

Примечание.

Некоторые части этой страницы представляют собой измененные материалы, созданные и предоставленные корпорацией Google. Их использование регулируется условиями, описанными в лицензии Creative Commons Attribution 4.0 International License. Исходная страница находится здесь и автор Kayce Basques (Технический писатель, Chrome DevTools & Lighthouse).

Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.