JavaScript Academy · Урок

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

Приостанавливайте выполнение и проверяйте состояние.

«Установка точек останова» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Что такое точка останова

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

Почему точки останова лучше журналирования

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

Открытие панели исходного кода

В браузерных DevTools точки останова находятся на панели исходного кода. Откройте DevTools, перейдите на эту панель и найдите файл сценария в дереве файлов.

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

Щёлкните в поле рядом с номером строки, содержащей инструкцию, чтобы установить там точку останова. Появится маркер, и выполнение приостановится перед запуском этой строки.

Инструкция debugger

Добавление инструкции debugger в код программно запускает точку останова, когда DevTools открыты. Перед публикацией рабочего кода эту инструкцию удаляют.

function compute(x) {
  const doubled = x * 2
  // a debugger statement on the next line would pause execution here
  return doubled + 1
}

Условные точки останова

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

Точки журналирования

Точка журналирования выводит сообщение, не приостанавливая выполнение. Это временная инструкция журналирования, которую добавляют через DevTools вместо изменения исходного кода.

Проверка переменных

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

Выражения для наблюдения

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

Точки останова на событиях

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

Управление точками останова

На панели точек останова перечислены все установленные точки. Их можно временно отключить флажком или удалить после завершения отладки.

Быстрая проверка

Проверьте свои знания о точках останова.

Итоги

Итоги: Точки останова приостанавливают выполнение для проверки состояния программы.

Устанавливайте их в поле панели исходного кода рядом с номерами строк
Инструкция debugger устанавливает точку останова программно
Условные точки останова срабатывают только при истинном условии
Во время паузы проверяйте область видимости и выражения для наблюдения

Часто задаваемые вопросы

Урок «Установка точек останова» бесплатный?

Да — полный текст урока «Установка точек останова» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Установка точек останова»?

Приостанавливайте выполнение и проверяйте состояние. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Установка точек останова»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy