Справочник · JavaScript

console: вывод и отладка в браузере

Редакция PraktumОбновлено 25 октября 20265 мин чтенияУровень: новичок

Объект console выводит сообщения в консоль инструментов разработчика (F12 → Console). console.log — для любых значений, warn и error — для предупреждений и ошибок, table показывает массив объектов таблицей, а time замеряет, сколько выполняется код. Это главный инструмент отладки, когда нужно быстро посмотреть, что лежит в переменной.

Минимальный пример

const user = { name: 'Аня', age: 25 };

console.log('Пользователь:', user);
console.log({ user });             // имя переменной видно в выводе
console.warn('Пароль слишком короткий');
console.error('Не удалось загрузить данные');

log принимает несколько аргументов через запятую. Запись console.log({ user }) — удобный приём: объект с одним свойством показывает и имя переменной, и значение.

Методы console

console.table для данных

const products = [
  { id: 1, name: 'Кроссовки', price: 5990 },
  { id: 2, name: 'Носки', price: 390 },
];
console.table(products);
console.table(products, ['name', 'price']);   // только нужные колонки

Массив объектов из ответа сервера читать в log неудобно. table показывает его таблицей с сортировкой по колонкам — сразу видно пропуски и странные значения.

Замер времени

console.time('сортировка');
const sorted = bigArray.toSorted((a, b) => a.price - b.price);
console.timeEnd('сортировка');   // сортировка: 12.4 ms

time и timeEnd с одинаковой меткой показывают, сколько миллисекунд выполнялся код между ними. Для точных измерений используют performance.now() или вкладку Performance в DevTools.

Группы и assert

console.groupCollapsed('Ответ сервера');
console.log('Статус:', res.status);
console.log('Данные:', data);
console.groupEnd();

console.assert(Array.isArray(data.items), 'items должен быть массивом', data);

Группы сворачивают связанные сообщения, чтобы консоль не превращалась в простыню. assert ничего не выводит, пока условие истинно, и пишет ошибку, когда нарушено ожидание.

Ловушка: объекты «живые»

const cart = { items: [] };
console.log(cart);          // при раскрытии покажет уже изменённый объект
cart.items.push('Носки');

console.log(structuredClone(cart));   // снимок на момент вывода
console.log(JSON.stringify(cart));

Консоль хранит ссылку на объект и показывает его содержимое в момент раскрытия, а не в момент вывода. Если объект потом изменился, увидишь новое состояние. Для снимка выводи копию или строку JSON.

Логи в продакшене

Консоль видит любой посетитель, открывший DevTools. Не выводи токены, пароли, персональные данные и полные ответы сервера. Отладочные log перед публикацией удаляют; сборщики умеют вырезать их автоматически. Для ошибок на реальном сайте используют системы мониторинга, а console.error оставляют только для действительно неожиданных ситуаций.

console.log или отладчик

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

• Оставляют отладочные логи с данными пользователей на сайте.
• Доверяют выводу изменяемого объекта, раскрытому позже.
• Выводят массивы объектов через log вместо table.
• Ищут ошибку только логами, не используя точки останова.
• Пишут console.log в горячем цикле и тормозят страницу.

Доступность

Консоль не видят пользователи, поэтому ошибки, важные для человека, показывай на странице понятным текстом. console.error — для разработчика, сообщение в интерфейсе — для пользователя.

Поддержка браузерами

console.log, warn, error, table, group, time и count работают во всех актуальных браузерах и в Node.js.

console.time('запрос пользователей');
const res = await fetch('/api/users');
const users = await res.json();
console.timeEnd('запрос пользователей');

console.assert(Array.isArray(users), 'Ожидали массив', users);
console.groupCollapsed('Пользователи');
console.table(users, ['name', 'email']);
console.groupEnd();