+7 (937) 141-32-58
Контакты

Обработка ошибок в JavaScript: try...catch и отладка в DevTools

Научись отлавливать ошибки с помощью try...catch и использовать DevTools для отладки JavaScript. Понятные примеры и интерактив.

Оглавление

Обработка ошибок в JavaScript

Зачем это нужно: ошибки в коде случаются у всех. Главное — уметь их находить и корректно обрабатывать, чтобы сайт не «падал».

В этом уроке ты узнаешь:

  • Что такое try...catch и зачем он нужен.
  • Как находить ошибки через инструменты разработчика DevTools.
  • Как не испугаться ошибки и сделать так, чтобы сайт продолжил работать.

Что делает try...catch

JavaScript остановит выполнение скрипта, если возникнет ошибка. Чтобы этого не произошло — используем конструкцию try...catch.

Скопировать 
try {
  // потенциально опасный код
} catch (error) {
  // что делать, если ошибка произошла
}
Скопировать

Пример:

try {
  let result = 10 / 0;
  alert("Результат: " + result);
} catch (err) {
  alert("Произошла ошибка: " + err.message);
}

Попробуйте прямо здесь:

Симулируем ошибку и ловим её:

DevTools: Отладка JavaScript в браузере

Открой DevTools (нажми F12 или Ctrl+Shift+I → вкладка Console) и следи за сообщениями. Можно ставить точки останова, смотреть переменные и видеть ошибки.

Попробуй запустить такой код прямо в консоли браузера:

Скопировать 
function debugExample() {
  let a = 10;
  let b = 0;
  console.log("Перед делением");
  let result = a / b;
  console.log("Результат: " + result);
}
debugExample();

Поставь точку останова на строке let result = a / b; и посмотри значения переменных.

Совет: Всегда логируй ошибки в консоль при разработке — так проще их отловить. А для пользователя показывай вежливое сообщение.

Что дальше

В следующем уроке мы сделаем мини-проект — ToDo-лист с добавлением, удалением и сохранением задач.

К содержанию курса