Загрузка...

Отладка

Отладка — это поиск причины, почему программа делает не то. На этой странице один заказ, { drink: "tea", size: "regular" }, и одно неверное имя свойства. bug читает order.cup. Сломанная запись — tea / undefined. После исправления строка страницы — fixed / tea / regular.

Это не урок про классы

Прошлая страница собрала Drink и SpecialDrink. Её строка была tea / regular / mint. Там ничего не ломали нарочно.
Здесь данные уже верные. bug читает order.cup, а у объекта есть size, не cup. Настоящее свойство — size.

Сначала прочитай значение

console.log печатает значение и не останавливает скрипт. console.warn помечает предупреждение. console.error помечает сбой. Ни один из них не чинит данные. Они только делают неверное значение видимым.

Имя свойства неверное

label склеивает order.drink и order.cup. drink есть, поэтому первое слово — tea. cup нет, поэтому второе слово — undefined.

Журнал сломанной подписи

javascript 
const order = { drink: "tea", size: "regular" };
function label(order) {
return order.drink + " / " + order.cup;
}
console.log(label(order));

Запись — tea / undefined. У объекта по-прежнему есть size. Функция его не читала.

Пометь сбой

Когда size нет, вызови console.error("missing size"). Этот фрагмент передаёт заказ без размера, чтобы пошёл путь ошибки. console.error("missing size") не бросает исключение.

Сообщить об отсутствии size

javascript 
function label(order) {
if (!order.size) {
console.error("missing size");
return order.drink + " / missing size";
}
return order.drink + " / " + order.size;
}
console.log(label({ drink: "tea" }));

Консоль показывает ошибку missing size, а возвращённый текст — tea / missing size. Пустой заказ без size возвращает tea / missing size. Пустая строка тоже считается отсутствием, потому что !"" истинно.

Пауза нарочно

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

Пауза, когда инструменты открыты

javascript 
const order = { drink: "tea", size: "regular" };
debugger;
console.log(order.size);

С открытыми инструментами выполнение останавливается на debugger, и можно осмотреть order. С закрытыми инструментами следующая запись — regular. debugger не ошибка и не меняет order.

Список вызовов

Если label вызывает format, а format бросает, консоль перечисляет оба имени. Начни сверху списка: это строка сбоя. Потом вернись к вызывающему. bug этой страницы ничего не бросает. undefined — значение, поэтому список молчит, пока ты сам не запишешь его в журнал.

Измени одно имя

Замени order.cup на order.size. Не добавляй свойство cup только чтобы заглушить undefined. Объект уже был верным. Настоящее свойство — size.

Строка после исправления

Страница читает size, проверяет его и пишет короткий статус перед подписью.

Демо страницы — исправленная подпись

html 
<!DOCTYPE html>
<html>
<body>
<p id="line">…</p>
<script>
const order = { drink: "tea", size: "regular" };
function label(order) {
if (!order.size) {
console.error("missing size");
return order.drink + " / missing size";
}
return order.drink + " / " + order.size;
}
document.getElementById("line").textContent = "fixed / " + label(order);
</script>
</body>
</html>

Строка читается как fixed / tea / regular. Слово fixed — только статус. Напиток и размер берутся из объекта. tea / undefined был результатом сломанной функции.

У стойки

  1. Запиши в журнал label(order), пока она читает order.cup. Запись — tea / undefined.
  2. Передай { drink: "tea" } и прочитай ошибку. Возвращённый текст — tea / missing size.
  3. Оставь debugger в скрипте. При закрытых инструментах следующая запись всё ещё regular.
  4. Прочитай строку страницы: fixed / tea / regular.

Частые ошибки

  • Менять объект, потому что журнал говорит undefined
  • Считать console.log паузой; console.log не останавливает скрипт
  • Ждать, что debugger остановит страницу при закрытых инструментах
  • Читать tea / regular / mint со страницы классов
  • Вызывать console.error("missing size") и думать, что он бросает

Оставь это

  • console.log показывает значение, и скрипт продолжается
  • Сломанное чтение — order.cup; настоящее свойство — size
  • console.error("missing size") помечает сбой и не бросает
  • debugger останавливается только пока инструменты разработчика открыты
  • Строка страницы читается как fixed / tea / regular

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
7
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 66 из 68
Javascript Урок