Использование браузерной консоли для отладки кода JavaScript

Расширенные примеры использования консоли

Ниже приведены более сложные сценарии, демонстрирующие комбинирование методов и нестандартные приёмы.

Пример 1. Вывод с несколькими стилями и подстановками

const name = 'Алиса';
const age = 30;
console.log(
  '%cПользователь: %s, возраст: %d',
  'color: green; font-size: 16px;',
  name,
  age
);
// Результат: зелёный текст "Пользователь: Алиса, возраст: 30"
// %s - подстановка строки, %d - числа

[Результат в консоли] Пользователь: Алиса, возраст: 30 (зелёный стиль)

Пример 2. Группировка с временными замерами

console.groupCollapsed('Операции с массивом');
console.time('фильтрация');
const arr = [1,2,3,4,5,6,7,8,9,10];
const filtered = arr.filter(n => n % 2 === 0);
console.timeEnd('фильтрация');
console.log('Результат:', filtered);
console.groupEnd();

[Свёрнутая группа «Операции с массивом»]
  фильтрация: 0.123 ms
  Результат: [2, 4, 6, 8, 10]

Пример 3. Таблица с вложенными объектами и массивом

const books = [
  {title: 'Война и мир', author: 'Толстой', year: 1869},
  {title: 'Преступление и наказание', author: 'Достоевский', year: 1866},
  {title: 'Мастер и Маргарита', author: 'Булгаков', year: 1966}
];
console.table(books, ['title', 'author']); // показать только колонки title и author

[Таблица с двумя колонками: title, author]

Пример 4. Использование console.count с разными метками

function handleClick(buttonName) {
  console.count('Нажатие кнопки: ' + buttonName);
}
handleClick('btn1');
handleClick('btn2');
handleClick('btn1');
// В консоли:
// Нажатие кнопки: btn1: 1
// Нажатие кнопки: btn2: 1
// Нажатие кнопки: btn1: 2

Пример 5. Вывод трассировки с аргументами

function outer() {
  inner('параметр1');
}
function inner(param) {
  console.trace('Стек вызовов с param =', param);
}
outer();

[Стек вызовов для inner с указанием строк и файлов]

Пример 6. Комбинирование console.assert и console.group

const value = 0;
console.group('Проверки');
console.assert(value > 0, 'value должно быть положительным');
console.assert(typeof value === 'number', 'value должно быть числом');
console.groupEnd();
// Выведутся только два сообщения об ошибках (т.к. условия ложны)

Пример 7. Стилизация нескольких фрагментов в одной строке

console.log(
  '%cОшибка %c%s %cв строке %d',
  'color: red;',
  'color: orange;',
  'undefined is not a function',
  'color: blue;',
  42
);
// Первый фрагмент красный, второй оранжевый, текст ошибки оранжевый, последний синий

Пример 8. Вывод DOM-элемента через console.dirxml (показывает HTML)

const div = document.createElement('div');
div.innerHTML = '<span>Привет</span>';
console.dirxml(div); // или console.log(div) - то же самое

[В консоли отображается как HTML-элемент с разметкой]

Пример 9. Вывод объектов с циклическими ссылками (не ломается)

const obj = {a: 1};
obj.self = obj;
console.log(obj); // консоль показывает объект, но циклическая ссылка помечена как [Circular]

Пример 10. Использование console.memory (если доступно - Chrome)

console.memory; // возвращает объект с информацией об использовании памяти
// Типичный вывод: {jsHeapSizeLimit: 2172649472, totalJSHeapSize: 10000000, usedJSHeapSize: 8000000}
// Не является стандартным, но полезно для профилирования

Примечание: часть методов (например, console.profile и console.profileEnd) устарели и не рекомендуются к использованию. Вместо них следует применять инструменты Performance в DevTools.