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

Инструменты разработчика (DevTools) встроены в каждый браузер — ничего устанавливать не нужно. Самый универсальный способ открыть их — клавиша F12. А есть сочетания, которые открывают сразу консоль:

Ещё один путь — правый клик в любом месте страницы и пункт «Просмотреть код». Откройте консоль прямо сейчас, введите строки ниже и нажмите Enter — браузер выполнит код и тут же покажет результат.

console.log("Привет, консоль!");
console.log(2 + 3);

Сверху панели DevTools — ряд вкладок. Их много, но на первое время достаточно знать четыре:

Пока мы учимся, девяносто процентов времени вы проведёте в Console. Остальные вкладки просто запомните в лицо — каждая из них ещё сыграет свою роль: Sources с отладчиком разбирает статья «Отладка в браузере», а Elements — «Инспектор элементов: смотрим дерево вживую» в части II.

console.log — рабочая лошадка отладки. Ему можно передать сколько угодно значений через запятую: консоль выведет их в одну строку через пробел, и это удобнее, чем склеивать всё в одну строку самому.

const answer = 42;
console.log("Ответ:", answer);
console.log("Дважды два будет", 2 * 2);

У сообщений есть уровни важности. console.warn красит вывод в жёлтый — «обрати внимание», console.error — в красный — «что-то сломалось». В больших проектах по этим уровням фильтруют вывод. А для массива однотипных объектов есть console.table: он рисует данные аккуратной таблицей вместо груды фигурных скобок.

console.warn("Кофе заканчивается");
console.error("Кофе закончился!");
console.log("Обычная новость");

const cats = [
  { name: "Барсик", age: 3 },
  { name: "Муся", age: 5 }
];
console.table(cats);

console.time("цикл");
let sum = 0;
for (let i = 0; i < 1000000; i++) sum += i;
console.timeEnd("цикл");
console.log(sum);

Красный текст в консоли выглядит пугающе, но устроен как почтовое извещение: у ошибки есть имя, сообщение, адрес (файл и строка) и список — кто кого вызывал. Научиться читать это извещение — половина отладки. Запустим код, который гарантированно упадёт:

function start() {
  sayHello();
}

start();

Читаем сверху вниз. ReferenceError — имя ошибки: браузер встретил имя, которого не знает. После двоеточия — сообщение: sayHello is not defined, то есть «sayHello не определено». Этими двумя частями панель вывода под примером и ограничивается, а настоящая консоль DevTools покажет ещё две. Справа встанет ссылка вида script.js:2, файл и номер строки: клик по ней открывает код прямо в нужном месте. Ниже — стек вызовов: первая строка показывает, где именно всё сломалось (внутри start), а каждая следующая — кто это место вызвал.

Что случилось → где → кто позвал. Ошибка всегда читается сверху вниз.

Важная деталь: необработанная ошибка останавливает скрипт. Всё, что было до неё, успело выполниться, а код после падения уже не запустится. Поэтому ошибку чинят сразу — она не рассосётся сама.