Как исправить ошибку JavaScript: понятная диагностика для новичка

Чтобы исправить ошибку JavaScript, сначала откройте Console в DevTools, прочитайте точный текст ошибки, посмотрите файл и строку, а потом проверяйте код по месту. Не начинайте с переустановки браузера или Java: большинство ошибок JavaScript связано с синтаксисом, неверным селектором, отсутствующим элементом или неправильным порядком загрузки скрипта

Откройте DevTools:

F12 или Ctrl + Shift + I -> Console

На macOS:

Command + Option + I -> Console

Что смотреть в Console

Ошибка обычно содержит три важные части:

• тип ошибки;
• сообщение;
• файл и номер строки.

Пример:

Uncaught TypeError: Cannot read properties of null
script.js:8

Это значит: в файле script.js на строке 8 код пытается работать с null. Частая причина — элемент не найден через querySelector

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

SyntaxError — код написан с ошибкой синтаксиса: забыта скобка, кавычка, двоеточие или запятая

if (age > 18 {
  console.log("ok");
}

Здесь не хватает закрывающей скобки после условия

ReferenceError — переменная или функция не объявлена:

console.log(userName);

Если userName нигде не создана, браузер покажет ошибку

TypeError — значение есть, но вы используете его не так:

const title = null;
title.textContent = "Готово";

У null нет свойства textContent

Проверка селектора

Если ошибка связана с null, проверьте HTML и селектор:

<h1 id="title">Привет</h1>

Правильный JavaScript:

const title = document.querySelector("#title");

Если написать без #, браузер будет искать тег <title>, а не элемент с id:

const title = document.querySelector("title");

Это может дать не тот результат

Проверка порядка загрузки

Если скрипт выполняется раньше, чем браузер увидел HTML, элемент не найдется. Для новичка удобный вариант — подключать файл с defer:

<script src="script.js" defer></script>

Или ставить script перед закрывающим </body>

Мини-чек-лист исправления

1. Скопируйте точный текст ошибки.
2. Посмотрите файл и строку.
3. Откройте эту строку в редакторе.
4. Проверьте скобки, кавычки и запятые.
5. Проверьте, найден ли элемент.
6. Проверьте, подключен ли файл script.js.
7. После правки обновите страницу и снова посмотрите Console.

Быстрая таблица диагностики

Если ошибка повторяется после правки, обновите страницу с очисткой кэша: Ctrl + F5 на Windows или Command + Shift + R на macOS. Иногда браузер показывает старую версию файла, и кажется, что исправление не сработало

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

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

const button = document.querySelector("#send");
console.log(button);

button.addEventListener("click", () => {
  console.log("click");
});

Если в Console выводится null, проблема не в addEventListener, а в поиске элемента. Если кнопка выводится, но клика нет, проверьте, не перекрывает ли кнопку другой элемент и точно ли вы нажимаете нужную кнопку. Такой подход быстрее, чем менять код наугад

Чего не делать

Не скачивайте Java. JavaScript в браузере уже есть. Не удаляйте браузер после первой ошибки. Не копируйте случайный код без понимания, какая строка сломалась

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

Создайте ошибку специально:

const button = document.querySelector("#missing");
button.textContent = "Кнопка";

Откройте Console, найдите текст ошибки, затем исправьте HTML или селектор. Это нормальная практика: вы учитесь читать ошибку, а не бояться ее

Что почитать дальше по JavaScript

Если нужен общий маршрут по теме, откройте рубрику JavaScript. Для соседних задач пригодятся эти разборы:

• A JavaScript error occurred in the main process: как исправить
• Калькулятор на JS: простой пример для новичка
• Учить Джава Скрипт: это как и с чего начать
• A JavaScript error occurred in the main process: причины и исправление