Console.log: примеры (JAVASCRIPT)

Полный обзор метода console.log для отладки в JavaScript

Раздел: Отладка, Консоль

console.log(...data: any[]): undefined

типовые примеры console.log на php, python, mysql console.log изменения javascript примеры расширенные

Описание console.log в JavaScript

Метод console.log() является частью API консоли в средах выполнения JavaScript, таких как браузеры или Node.js. Он предназначен для вывода информации в инструменты разработчика, что делает его основным инструментом для отладки кода, проверки значений переменных и отслеживания потока выполнения программы.

Функция используется для логирования сообщений, данных или состояния приложения в процессе разработки. В production-среде её использование, как правило, сокращают или удаляют.

Аргументы функции

console.log() принимает неограниченное количество аргументов, разделённых запятыми:

Сообщения или данные: Любые типы данных — строки, числа, объекты, массивы, null, undefined, функции.
Спецификаторы подстановки: Для форматирования вывода можно использовать спецификаторы (%s для строк, %d или %i для целых чисел, %f для чисел с плавающей точкой, %o для объектов, %c для стилей CSS).
Выражения: Аргументами могут быть выражения, значения которых будут вычислены и выведены.

Возвращаемое значение

Функция console.log() всегда возвращает undefined. Она используется исключительно для побочного эффекта — вывода данных в консоль.

Базовые примеры использования

Вывод простых значений

console.log('Простая строка');
console.log(42);
console.log(true);
console.log(null);
console.log(undefined);

Простая строка
42
true
null
undefined

Вывод нескольких аргументов

let name = 'Анна';
let age = 30;
console.log('Имя:', name, 'Возраст:', age);

Имя: Анна Возраст: 30

Использование спецификаторов

console.log('Строка: %s, Число: %d, Объект: %o', 'текст', 10, { key: 'value' });

Строка: текст, Число: 10, Объект: { key: "value" }

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

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

Важное сообщение

Другие методы консоли JavaScript

Помимо console.log(), объект Console предоставляет специализированные методы для разных ситуаций.

console.warn() и console.error()

Используются для вывода предупреждающих и ошибкообразных сообщений соответственно. В браузере они обычно выделяются цветом и иконкой.

console.warn('Это предупреждение');
console.error('Это сообщение об ошибке');

console.table()

Полезен для вывода массивов или объектов в виде таблицы, что улучшает читаемость структурированных данных.

console.table([{name: 'Иван', city: 'Москва'}, {name: 'Ольга', city: 'СПб'}]);

console.group() и console.groupEnd()

Позволяют группировать логи в сворачиваемые блоки, что удобно для организации сложных выводов.

console.group('Группа данных');
console.log('Элемент 1');
console.log('Элемент 2');
console.groupEnd();

Когда что использовать

console.log() подходит для большинства случаев отладки. console.warn() и console.error() стоит применять для сообщений об исключительных ситуациях. console.table() идеален для массивов объектов. Группировка помогает упорядочить вывод сложных операций.

Аналоги функции в других языках

Python: print()

Функция print() выводит аргументы в стандартный поток вывода. В отличие от console.log, она не поддерживает спецификаторы стилей, но имеет параметры для разделителей и окончания строки.

print('Строка', 42, sep=' | ', end='!\n')

Строка | 42!

PHP: echo, print_r(), var_dump()

echo выводит строки. print_r() и var_dump() используются для отладки и выводят структуру переменных, причём var_dump() более детален.

$arr = ['a' => 1];
echo 'Сообщение: ';
print_r($arr);
var_dump($arr);

Сообщение: Array
(
    [a] => 1
)
array(1) {
  ["a"]=>
  int(1)
}

C: printf()

Функция printf() из стандартной библиотеки выводит форматированную строку в stdout. Требует явного указания типов через спецификаторы формата.

int x = 10;
printf("Значение переменной: %d\n", x);

Значение переменной: 10

MySQL: SELECT

Для отладки запросов или вывода значений в СУБД MySQL часто используется оператор SELECT.

SELECT 'Отладочное сообщение', 100 * 2;

+-----------------------+---------+
| Отладочное сообщение | 100 * 2 |
+-----------------------+---------+
| Отладочное сообщение |     200 |
+-----------------------+---------+

Главное отличие console.log от аналогов — её интеграция с инструментами разработчика браузера, что даёт интерактивность вывода объектов и стилизацию.

Распространённые ошибки

Неверная интерполяция строк

Попытка использовать спецификаторы формата без передачи соответствующих аргументов.

console.log('Значение: %d'); // Нет аргумента для %d

Значение: %d

Ожидание возврата значения

console.log возвращает undefined, поэтому её нельзя использовать в выражениях для получения данных.

let result = console.log('Привет');
console.log(result);

Привет
undefined

Вывод изменяющихся объектов

В некоторых браузерах при выводе объектов их содержимое может отображаться по состоянию на момент раскрытия в консоли, а не на момент вызова log.

let obj = { a: 1 };
console.log(obj);
obj.a = 2;
// При раскрытии объекта в консоли может отображаться a: 2

{ a: 1 } // Но при этом значение может показаться изменённым

Избыточное логирование в цикле

Размещение console.log внутри интенсивного цикла может привести к "засорению" консоли и зависанию вкладки браузера.

for(let i = 0; i < 1000000; i++) {
    console.log(i); // Выведет миллион строк
}

Эволюция console.log

Сам метод console.log() в своей базовой форме остаётся стабильным. Основные изменения касаются среды выполнения и возможностей инструментов разработчика.

Интерактивность вывода

В современных браузерах объекты и массивы, выведенные через console.log, стали интерактивными. Их можно раскрывать для просмотра свойств, и они ссылаются на текущее состояние объекта в памяти.

Поддержка спецификатора %c

Добавлена возможность применять стили CSS к выводимому тексту с помощью спецификатора %c, что расширило возможности форматирования.

Группировка и таблицы

Появление методов console.table(), console.group() и других сделало консоль более структурированной. Хотя это не изменения непосредственно log, это расширило контекст его использования.

В Node.js также произошли улучшения, связанные с цветовым выводом в терминале и интеграцией с системными потоками.

Расширенные примеры применения

Логирование с временными метками

Можно выводить текущее время для анализа производительности или последовательности событий.

Пример javascript

console.log(`[${new Date().toISOString()}] Запрос отправлен`);

[2023-10-26T10:30:00.123Z] Запрос отправлен

Условный вывод для отладки

Использование console.log внутри условий или для отладки конкретных участков кода.

Пример javascript

const DEBUG = true;
function process(data) {
    DEBUG && console.log('Входные данные:', data);
    // ... логика
}

Вывод стектрейса

Иногда полезно знать, откуда был вызван лог, особенно в большом проекте.

Пример javascript

console.trace('Вызвано отсюда');
// Альтернативно:
console.log(new Error().stack);

Логирование вложенных объектов с глубиной

При выводе больших объектов можно указать глубину вложенности.

Пример javascript

let deepObj = { a: { b: { c: { d: 1 } } } };
console.dir(deepObj, { depth: 2 }); // Покажет только до уровня b

Измерение времени выполнения

В паре с console.time() и console.timeEnd() можно замерять продолжительность операций.

Пример javascript

console.time('Цикл');
for (let i = 0; i < 1e6; i++) {}
console.timeEnd('Цикл');

Цикл: 2.543ms

Логирование с подсветкой синтаксиса

Используя спецификатор %c, можно имитировать подсветку для разных типов данных в одном сообщении.

Пример javascript

console.log(
  'Параметры: %c%s%c, %c%d',
  'color: blue; font-weight: bold', 'text',
  'color: inherit; font-weight: normal',
  'color: green;', 100
);

JS console.log function comments

Console.log Outputs a message to the web console.