Хорошая отладка начинается с воспроизводимого действия и конкретного расхождения. Не меняйте несколько условий сразу в надежде, что ошибка исчезнет. В примере запись существует, но поиск возвращает undefined: числовой id сравнивается со строкой, полученной из ввода.
Воспроизвести и исправить несовпадение типов
example.js
const items = [{ id: 7, title: 'Тренировка' }];
const raw = '7';
console.log('До нормализации:', items.find(item => item.id === raw));
function parseId(text) {
if (typeof text !== 'string' || !/^\d+$/.test(text.trim())) {
throw new TypeError('Нужна строка целого идентификатора');
}
const id = Number(text.trim());
if (!Number.isSafeInteger(id)) throw new RangeError('Слишком большой ID');
return id;
}
const found = items.find(item => item.id === parseId(raw));
console.log('После нормализации:', found?.title ?? 'Не найдено');Запустите код в локальном учебном окружении. Первая строка вывода намеренно показывает проблему, вторая — результат после явной нормализации. В Chrome можно поместить такой код в собственный учебный файл и поставить точку останова перед сравнением. Не вставляйте незнакомые фрагменты в консоль чужого сайта.
| Что сравнить | На что смотреть | Что сделать |
|---|---|---|
| Sources: breakpoint | Какой код сейчас выполняется? | Остановиться до проблемного выражения |
| Scope | Какие значения доступны в этом месте? | Посмотреть raw и item.id |
| Watch | Меняется ли нужное выражение? | Добавить typeof raw |
| Console | Как проверить гипотезу на известных данных? | Выполнить безопасное локальное выражение |
Тип подтвердите до исправления
Официальное руководство Chrome DevTools показывает работу с точками останова и просмотром переменных. В нашей задаче сравните typeof для двух сторон. Не заменяйте строгое сравнение на нестрогое только ради исчезновения симптома: лучше определить контракт идентификатора и явно привести вход к нему. Проверка safe integer защищает выбранную числовую модель от потери точности, но не делает ID секретным или авторизованным.
- Воспроизвести исходную проблему на значении «7».
- Проверить пробелы вокруг допустимой строки.
- Проверить буквы, дробь и слишком большое число.
- Сохранить исправление в исходном файле и повторно запустить.
Изменение в DevTools не означает автоматического обновления рабочего исходника или сервера. После проверки гипотезы внесите правку в проект, добавьте подходящую проверку и повторите сценарий. Если ID в реальном API является строкой, правильное решение будет другим: нужно сохранить строковый контракт, а не навязывать этому полю число.
Вопросы и ответы
undefined всегда означает отсутствие записи?
Нет. Причина может быть в условии поиска, типе или наборе данных. Сначала проверьте вход и контракт.
Нужно ли логировать все данные?
Нет. Выбирайте минимальные нужные значения и не выводите чувствительные сведения без необходимости.
Можно ли исправлять сразу во всех местах?
Сначала подтвердите причину и границу преобразования. Разрозненные преобразования затрудняют сопровождение.
Почему пример печатает ошибочный результат?
Это намеренная воспроизводимая демонстрация исходного дефекта, после которой показано явное исправление.
Источники: developer.chrome.com.
