JavaScript Academy · Урок

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

Переходите через функции, заходите в них и выходите из них по шагам.

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

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

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

Возобновление выполнения

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

Выполнение без захода

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

function helper() {
  return 5
}
function main() {
  const a = helper()
  const b = a + 1
  return b
}

Вход в функцию

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

function helper() {
  const x = 10
  return x
}
function main() {
  return helper()
}

Выход из функции

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

Выбор команды пошагового выполнения

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

Панель стека вызовов

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

Наблюдение за изменением состояния

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

Пошаговое выполнение в циклах

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

function sumTo(n) {
  let total = 0
  for (let i = 1; i <= n; i++) {
    total += i
  }
  return total
}

Пошаговый вход в код библиотек

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

Типичный рабочий процесс

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

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

Проверьте свои знания о пошаговом выполнении.

Итоги

Итоги: Пошаговое выполнение позволяет управляемо перемещаться по коду.

Выполнение без захода запускает строку, не переходя в вызываемые функции
Выполнение с заходом переходит в вызываемую функцию
Выполнение с выходом завершает текущую функцию
Стек вызовов показывает, как Вы дошли до текущего места

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

Урок «Пошаговое выполнение кода» бесплатный?

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

Чему я научусь в уроке «Пошаговое выполнение кода»?

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

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

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

Сколько времени занимает урок «Пошаговое выполнение кода»?

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

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

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

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

← Назад к JavaScript Academy