Об'єкт console має значно більше, ніж log, і правильний метод часто економить час налагодження.
Рівні повідомлень - фільтруються в DevTools:
console.debug('деталі'); // приховано за замовчуванням (рівень Verbose)
console.info('інформація');
console.warn('попередження'); // жовте, зі стеком
console.error('помилка'); // червоне, зі стеком
console.table - масив об'єктів таблицею:
console.table(users, ['id', 'name', 'email']); // лише вибрані колонки
console.group / groupCollapsed / groupEnd - вкладені групи повідомлень:
console.groupCollapsed(`Замовлення ${order.id}`);
console.log('товари', order.items);
console.log('доставка', order.shipping);
console.groupEnd();
console.time / timeLog / timeEnd - вимір часу:
console.time('рендер');
renderList(items);
console.timeEnd('рендер'); // рендер: 48.2 ms
console.count - скільки разів виконався рядок (корисно для пошуку зайвих рендерів):
console.count('render ProductCard');
console.trace - стек викликів у цьому місці: відповідає на питання «хто викликав цю функцію?».
console.assert(condition, ...) - пише помилку, лише якщо умова хибна:
console.assert(total >= 0, 'Від\'ємна сума', { total, items });
console.dir(element) - DOM-елемент як об'єкт з властивостями, а не як HTML.
Підстановки й стилі:
console.log('%cУвага', 'color: red; font-weight: bold', 'звичайний текст');
Пастка - лінивий показ об'єктів. console.log(obj) показує об'єкт за посиланням: коли ви розгорнете його в консолі пізніше, побачите поточний стан, а не стан на момент виклику. Якщо об'єкт змінюється, логуйте знімок: console.log(structuredClone(obj)) чи JSON.stringify(obj).
Утиліти, доступні лише в консолі DevTools: $0 (виділений елемент), $$('selector') (масив елементів), copy(obj) (скопіювати в буфер), monitorEvents(window, 'resize').
На продакшені console.* у коді - шум і інколи витік даних. Збирач може прибрати їх (у Vite - опція esbuild.drop: ['console', 'debugger']), а для справжніх помилок потрібна система моніторингу, а не консоль користувача.