17. Как искать и исправлять ошибки

Ты уже умеешь делать страницы, добавлять картинки и даже оживлять сайт. Но вот однажды — бац! — страница не открывается или кнопка не работает

Не паникуй! Ошибка — это не беда, а подсказка. Каждый программист ошибается (даже самые крутые)!

Почему ошибки — это хорошо

Ошибки помогают понять, где нужно быть внимательнее. Они как помощники, которые говорят тебе: «Эй, тут опечатка!» или «Файла не вижу!».

Самые частые ошибки у начинающих

Забыли закрыть тег. Было <p>Текст<p> вместо <p>Текст</p>.
Путь к файлу неверный. Например, указано <img src="cat.jpg">, но файла нет в папке. Проверь имя и расширение!
CSS не подключается. Возможно, ты написал <link href="style.ccs"> вместо <link href="style.css"> (буквы перепутаны!).
Скобка пропала. В JavaScript бывает alert('Привет!; — пропущена кавычка или скобка.

Как не паниковать и чинить спокойно

Шаг 1 — Вдохни и выдохни. Ошибки — это часть приключения!
Шаг 2 — Посмотри внимательно на код. Часто ошибка — просто опечатка или пропущенная буква.
Шаг 3 — Проверь пути к файлам. Убедись, что картинки и стили лежат в нужных папках.
Шаг 4 — Слушай браузер. Он умеет подсказывать, где проблема!

Как смотреть ошибки в браузере

Каждый браузер имеет встроенные инструменты для программистов. Они помогут найти, где что-то пошло не так.

1️⃣ Нажми F12 (или Ctrl + Shift + I). 2️⃣ Перейди на вкладку Console (Консоль). 3️⃣ Там ты увидишь подсказку — строку, где что-то не работает.


Uncaught SyntaxError: missing ) after argument list

Это значит: где-то не хватает закрывающей скобки. Проверь внимательно свой JavaScript!

Пример: где ошибка?

Вот код:


<h1>Привет!</h1>
<p>Это мой сайт<p>

Выглядит нормально, да? Но браузер может не понять, где закончился абзац. Правильно будет так:


<h1>Привет!</h1>
<p>Это мой сайт</p>

Ошибка в пути


<img src="img/cat.jpg" alt="Кот">

Если у тебя нет папки img, браузер не найдёт файл. Проверь — может, картинка лежит рядом с HTML-файлом? Тогда просто напиши:


<img src="cat.jpg" alt="Кот">

Ошибка в CSS


<link rel="stylesheet" href="style.css">

Если ты написал href="style.ccs" (перепутал буквы) — стиль не подгрузится. Исправь расширение, и всё заработает!

Ошибка в JavaScript


<script>
  alert('Привет);
</script>

Браузер напишет: SyntaxError: missing ) after argument list А это значит: не хватает кавычки перед закрывающей скобкой. Исправляем:


<script>
  alert('Привет');
</script>

Мини-задание

Сделай страницу с ошибкой (например, пропусти тег или скобку).
Открой консоль (F12) и найди, где проблема.
Исправь и проверь, исчезло ли сообщение об ошибке.

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

Не бойся красных сообщений — это просто подсказки.
Ошибки — способ стать умнее! Каждый раз ты учишься чему-то новому.
Сохраняй файлы чаще и проверяй код шаг за шагом.
Если не получается — отдохни 5 минут. Иногда мозг сам всё находит потом!

Забавный факт

Первую компьютерную ошибку нашли в 1947 году — это был настоящий мотылёк, застрявший в компьютере! С тех пор слово «bug» (ошибка) стало знаменитым.

Главное запомни

Ошибки — не враги, а подсказки!
Всегда проверяй закрывающиеся теги, пути к файлам и скобки.
Консоль (F12 → Console) помогает понять, где именно ошибка.
Любой сайт когда-то ломался — и это нормально! 🔧

Твоё задание

Создай страничку с ошибкой, найди её через F12 и исправь. А потом попробуй специально сделать другую ошибку и снова починить её — вот ты уже как настоящий программист!