Для форматирования текста можно использовать подстановки. Пример: console.log(‘Сумма: %d, Строка: %s’, 10, ‘тест’). Поддерживаются спецификаторы %s (строка), %d (число), %o (объект). Это облегчает структурирование информации без необходимости вручную объединять значения.
Как использовать console.log для отображения строк
При использовании переменных со строковыми значениями:
let сообщение = 'Ошибка подключения';
console.log(сообщение);Для объединения строк с переменными используйте конкатенацию или шаблонные строки:
let код = 404;
console.log('Код ошибки: ' + код);console.log(`Код ошибки: ${код}`);Если нужно вывести несколько строк одновременно, передайте их через запятую:
console.log('Статус:', 'Ожидание');При необходимости сохранить читаемость больших строк используйте переносы:
console.log('Первая строка\nВторая строка');Для отладки полезно использовать метки:
console.log('[Загрузка]', 'Файл успешно загружен');let значение = '123';
console.log(typeof значение, значение);let число = 42;
console.log(число);
Для строк:
let сообщение = 'Привет';
console.log(сообщение);
Чтобы вывести несколько значений одновременно:
let имя = 'Анна';
let возраст = 30;
console.log(имя, возраст);
Объекты отображаются с их структурой:
let пользователь = { имя: 'Иван', активен: true };
console.log(пользователь);
let числа = [1, 2, 3];
console.log(числа);
Важно: при передаче объекта в console.log() он отображается по ссылке. Если объект позже изменится, консоль покажет обновлённое состояние. Чтобы зафиксировать значение на момент вызова, используйте JSON.stringify():
console.log(JSON.stringify(пользователь));
Для отслеживания промежуточных данных используйте поясняющие подписи:
console.log('Возраст пользователя:', возраст);
console.error('Неверный формат данных');
console.warn('Значение близко к пределу');
Для сложных структур предпочтительнее использовать console.dir() с параметром { depth: null }:
console.dir(пользователь, { depth: null });
Форматирование текста с помощью шаблонных строк
Шаблонные строки (template literals) в JavaScript создаются с помощью обратных кавычек `. Они позволяют вставлять переменные и выражения внутрь строки с помощью конструкции ${...}.
console.log(`Имя: ${name}
Возраст: ${age}
Город: ${city}`);Можно включать арифметику и функции:
console.log(`Сумма: ${a + b}, Удвоенное значение: ${multiply(a, 2)}`);Если требуется выравнивание, используйте методы padStart и padEnd:
console.log(`Цена: ${price.toString().padStart(5, ' ')} руб.`);Для форматирования чисел до фиксированного количества знаков после запятой:
console.log(`Итог: ${total.toFixed(2)} ₽`);Когда нужно вставить кавычки внутрь строки, шаблонные строки избавляют от экранирования:
console.log(`Он сказал: "Привет, ${user}!"`);Рекомендация: избегайте вложенности шаблонных строк без необходимости – это снижает читаемость. Для сложных конструкций готовьте данные отдельно, затем подставляйте.
Разница между console.log, console.warn и console.error
console.warn() сигнализирует о потенциальных проблемах. Браузеры выделяют такие сообщения жёлтым цветом и значком предупреждения. Рекомендуется использовать для уведомлений о deprecated-функциях, нестабильных данных или нежелательных, но допустимых условиях.
console.error() применяется при возникновении ошибок, нарушающих ожидаемую логику. Сообщения выделяются красным цветом и сопровождаются значком ошибки. Часто включают стек вызовов. Этот метод следует использовать для исключений, отказов загрузки данных, недопустимых параметров и других критичных ситуаций.
console.warnможет быть перехвачен инструментами анализа производительности и качества кода.console.errorможет запускать обработчикиwindow.onerrorи логгироваться внешними системами мониторинга.
Для фильтрации сообщений используйте вкладку «Console» в DevTools: включайте или отключайте категории «Logs», «Warnings» и «Errors» по необходимости.
Группировка сообщений с использованием console.group
Метод console.group() позволяет объединять связанные сообщения в логической и визуальной иерархии. Это особенно полезно при работе со вложенными структурами данных или отслеживании последовательности вызовов функций.
Вызов console.group('Имя группы') создаёт новую секцию в консоли браузера. Все последующие сообщения будут отображаться с отступом, пока не будет вызван console.groupEnd(). Чтобы свернуть группу по умолчанию, используется console.groupCollapsed().
Пример:
console.group('Загрузка данных');
console.log('Получение токена');
console.group('Запрос к API');
console.log('GET /api/data');
console.groupEnd();
console.log('Обработка ответа');
console.groupEnd();Группы могут быть вложенными. Для наглядности стоит ограничивать уровень вложенности двумя-тремя уровнями. Избыточное использование приводит к снижению читаемости.
Отладка с помощью console.trace и console.time
Методы console.trace и console.time позволяют эффективно отслеживать выполнение кода и находить узкие места в производительности. Эти инструменты полезны для разработки, особенно при анализе сложных цепочек вызовов или времени выполнения операций.
function example() {
console.trace();
}
function test() {
example();
}
test();
При запуске этого кода в консоль будет выведена информация о стеке вызовов, включая функции test() и example(). Это облегчает поиск проблем в логике вызова функций, особенно в сложных сценариях с множеством вложенных вызовов.
console.time() позволяет измерить время выполнения блока кода. Для этого нужно вызвать console.time(label) в начале блока и console.timeEnd(label) в конце. Между этими вызовами будет измеряться время, которое можно использовать для анализа производительности. Например:
console.time('loop');
for (let i = 0; i < 1000000; i++) {
// некоторая логика
}
console.timeEnd('loop');
Совмещение console.trace() и console.time() позволяет не только измерить время выполнения, но и точно понять, в каком месте программы возникли задержки, что делает отладку более эффективной.
Загрузка...
