Чтение трассировок стека
Отслеживайте ошибки до их источника.
«Чтение трассировок стека» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.
Что такое трассировка стека
Трассировка стека — это список вызовов функций, активных в момент возникновения ошибки. Она показывает путь, по которому программа пришла к сбою.
Чтение сверху вниз
Верхний кадр трассировки указывает место, где была вызвана ошибка. Каждая следующая строка показывает вызывающую функцию вплоть до исходной точки входа в программу.
Строение кадра стека
В каждом кадре обычно указаны функция, файл, номер строки и столбец, где произошёл вызов. Это позволяет точно определить место.
Сообщение об ошибке
Над кадрами находятся название и сообщение об ошибке, например TypeError с описанием того, что пошло не так. Сначала прочитайте их: часто они объясняют причину.
function getName(user) {
return user.name
}
// calling getName with undefined would throw a TypeError
console.log("Reading the message tells you what failed")Отслеживание цепочки вызовов
Читая трассировку вниз, Вы восстанавливаете последовательность: какая функция вызвала другую и как это привело к строке, в которой произошёл сбой.
Ваш код и код библиотек
Трассировки часто содержат кадры библиотек. Сосредоточьтесь на самом верхнем кадре, относящемся к Вашим исходным файлам: обычно именно там находится исправление.
Асинхронные трассировки стека
Современные DevTools объединяют асинхронные вызовы, показывая исходный контекст обещания или таймера, поэтому трассировка не обрывается на границе.
Создание трассировки вручную
console.trace выводит текущий стек вызовов, не создавая ошибку. Это помогает понять, как была достигнута текущая функция.
function inner() {
console.trace("reached inner")
}
function outer() {
inner()
}
outer()Свойство стека ошибки
Объект ошибки содержит свойство стека с текстовой трассировкой, которую можно записать в журнал или отправить в службу регистрации ошибок.
const err = new Error("Something failed")
console.log(typeof err.stack)Минифицированный код и карты исходников
Рабочий код часто минифицирован, поэтому трассировки становятся трудно понятными. Карты исходников переводят позиции минифицированного кода обратно в исходные файлы, делая трассировки читаемыми.
От трассировки к исправлению
Объедините сообщение, верхний кадр из собственного кода и номер строки, чтобы найти ошибку. Затем проверьте находящиеся там переменные и подтвердите причину.
Быстрая проверка
Проверьте свои знания о трассировке стека.
Итоги
Итоги: Трассировки стека показывают путь к ошибке.
- Верхний кадр указывает место возникновения ошибки
- Кадры ниже содержат вызывающие функции
- Сосредоточьтесь на самом верхнем кадре собственного кода
- Карты исходников делают трассировки минифицированного кода читаемыми
const err = new Error("fail")
console.log(typeof err.stack)Часто задаваемые вопросы
Урок «Чтение трассировок стека» бесплатный?
Да — полный текст урока «Чтение трассировок стека» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «Чтение трассировок стека»?
Отслеживайте ошибки до их источника. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Чтение трассировок стека»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Возможности за пределами console.log
- Установка точек останова
- Пошаговое выполнение кода
- Чтение трассировок стека