Console Tab

Интерактивная JavaScript-консоль: выполнение кода, просмотр логов и отладка

Зачем нужно

  • Выполнять JavaScript прямо на странице
  • Просматривать логи, ошибки и предупреждения
  • Быстро тестировать идеи и API
  • Отлаживать данные

Где используется

  • Отладка JavaScript
  • Тестирование DOM-запросов
  • Проверка значений переменных
  • Быстрое прототипирование

Предпосылки

Методы console

Базовые

console.log("Обычное сообщение");
console.info("Информация");
console.warn("Предупреждение");    // жёлтый фон
console.error("Ошибка");           // красный фон
console.debug("Отладка");          // серый, скрыт по умолчанию

console.table — данные в таблице

const users = [
  { name: "Ivan", age: 25 },
  { name: "Maria", age: 30 },
  { name: "Alex", age: 28 }
];
console.table(users);
// ┌─────────┬─────────┬─────┐
// │ (index) │  name   │ age │
// ├─────────┼─────────┼─────┤
// │    0    │ "Ivan"  │  25 │
// │    1    │ "Maria" │  30 │
// │    2    │ "Alex"  │  28 │
// └─────────┴─────────┴─────┘

// Показать только определённые колонки
console.table(users, ["name"]);

console.time / console.timeEnd — замер времени

console.time("fetch");
const response = await fetch("/api/data");
const data = await response.json();
console.timeEnd("fetch");
// fetch: 234.5ms

console.group — группировка

console.group("User Data");
console.log("Name: Ivan");
console.log("Age: 25");
console.groupEnd;

// Свёрнутая группа
console.groupCollapsed("Details");
console.log("...");
console.groupEnd;

console.count — счётчик вызовов

function handleClick() {
  console.count("click");
}
// click: 1
// click: 2
// click: 3

console.assert — проверка условия

const age = 15;
console.assert(age >= 18, "Возраст должен быть >= 18");
// Assertion failed: Возраст должен быть >= 18

console.dir — объект в виде дерева

console.dir(document.body);
// Раскрываемое дерево свойств объекта

console.clear() — очистить консоль

console.clear();

Стилизация вывода

console.log(
  "%cВажное сообщение",
  "color: red; font-size: 20px; font-weight: bold;"
);

console.log(
  "%cSuccess%c Operation completed",
  "background: green; color: white; padding: 2px 6px; border-radius: 3px;",
  "color: green;"
);

Специальные переменные консоли

$0 — последний выбранный элемент

// 1. Выберите элемент в Elements tab
// 2. В Console:
$0              // → выбранный элемент
$0.textContent  // → его текст
$0.classList    // → его классы
$1              // → предпоследний выбранный

$ и $$ — выбор элементов

$("header")             // → document.querySelector("header")
$$(".nav-link")         // → document.querySelectorAll(".nav-link") (массив)
$$("a").length          // → количество ссылок на странице

// Фильтрация
$$("img").map(img => img.src)  // → все URL изображений

$_ — результат последнего выражения

2 + 2           // 4
$_ * 10         // 40

copy — скопировать в буфер

copy(document.title)                    // скопировать заголовок
copy($$("a").map(a => a.href))          // все ссылки
copy(JSON.stringify(data, null, 2))     // JSON с отступами

monitor — отслеживание вызовов функции

function add(a, b) { return a + b; }
monitor(add);
add(2, 3);
// function add called with arguments: 2, 3
unmonitor(add);

monitorEvents — отслеживание событий

monitorEvents(document.body, "click");
// click MouseEvent {clientX: 100, clientY: 200, ...}

unmonitorEvents(document.body, "click");

Фильтрация сообщений

Панель фильтров в верхней части Console:

Фильтр Показывает
All Все сообщения
Errors Только ошибки (красные)
Warnings Только предупреждения (жёлтые)
Info Только info-сообщения
Verbose Включая debug

Текстовый фильтр: ввести текст → показать только совпадающие сообщения.

Фильтр по URL

url:app.js          — сообщения из app.js
-url:vendor         — исключить vendor

Live Expressions

Кнопка "глаз" в Console — выражение, которое обновляется в реальном времени:

document.activeElement      // текущий элемент в фокусе
performance.memory.usedJSHeapSize / 1024 / 1024  // МБ памяти
new Date.toLocaleTimeString()  // текущее время

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

  • Оставлять console.log в production-коде — используйте ESLint rule no-console
  • Не знать про console.table — выводить массивы через log нечитаемо
  • Не использовать $0 — вручную писать document.querySelector для выбранного элемента
  • Не фильтровать сообщения — искать нужный лог среди тысяч сообщений
  • Не знать про copy — вручную выделять и копировать из консоли

Практика

  1. Откройте Console и выполните 2 + 2, Math.random
  2. Используйте console.table для массива объектов
  3. Замерьте время загрузки через console.time
  4. Выберите элемент в Elements и используйте $0 в Console
  5. Найдите все ссылки на странице через $$("a")
  6. Скопируйте заголовок страницы через copy(document.title)
  7. Создайте Live Expression для document.activeElement

Связанные темы

Ресурсы