Как включить отметки времени в console.log Chrome

Быстрый ответ

Если вам необходимо, чтобы вывод console.log в браузере Chrome сопровождался временными метками, просто переопределите функцию следующим образом:

console.log = ((log) => (...args) => log(new Date().toISOString(), ...args))(console.log);

С помощью этого кода каждое сообщение в консоли будет предварено временной меткой в формате ISO, что добавляет логам информативности.

Однако, если у вас установлен Chrome 68 или более поздней версии, вы можете также использовать встроенные средства браузера для отображения временных меток, без необходимости изменять код.

Включение временных меток браузером

Chrome предлагает функцию автоматического добавления временных меток к логам:

1. Откройте Инструменты разработчика Chrome, откликнув на нажатие F12 или комбинацию клавиш Cmd+Opt+I на Mac и Ctrl+Shift+I на Windows.
2. Кликните по иконке с вертикальными точками (⋮), выползающей в правом верхнем углу консоли, или просто нажмите F1 для доступа к настройкам.
3. В разделе Консоль отметьте галочкой опцию "Показывать временные метки".

Таким образом, вы избегаете изменений в коде и оставляете оригинальные функции console.log в неприкосновенности.

Создание собственного форматтера временных меток

Если вы предпочитаете индивидуализировать выдачу логов или столкнулись со старыми версиями Chrome, имеется возможность добавить временные метки в console.log собственноручно:

• Logger с привязкой: Создайте свой собственный Logger, привязывая время при помощи console.log.bind.

const myTimestampLogger = console.log.bind(
  console,
  `%c[${new Date().toLocaleTimeString()}]`, "color: gray;"
);
myTimestampLogger("Это ваш лог!"); // Немного юмора для ваших логов

• Инструменты профилирования: Зафиксируйте время операций с помощью console.time и console.timeEnd.

console.time("Измерение времени");
// Действие, занимающее определённое время.
console.timeEnd("Измерение времени"); // Предоставьте время, оно сообщит о его распорядке.

• Стрелочные функции ES6: Также современный и стильный способ для добавления меток времени.

const log = console.log;
console.log = (...messages) => log(new Date().toISOString(), ...messages);

Визуализация временных меток

Теперь на примере вы можете наблюдать, как ваши ранее атемпоральные логи получили соответствующие отметки:

Без временных меток: 🏺🗿🔱 (логи, утратившие связь со временем)
С временными метками: 🏺⏱️🗿⏱️🔱⏱️ (теперь каждый элемент сообщает о времени своего фиксирования)

Завершение

Быстрое и удобное решение

Если вам нужно с тайм-маркировкой логов выдвигаете задачу быстродействия, прибегните к встроенной функции отметки времени Chrome. Корректировка всего одной настройки облегчит вам работу с выводом консоли.

Индивидуальная настройка

Если для вас важно иметь под рукой уникальные логи, предлагается самостоятельная оптимизация работы console.log. Такая стратегия особенно актуальна в средах, в которых не предусмотрены инструменты разработки.

Производительность и баланс

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

Полезные материалы

1. Chrome DevTools: Справочник API Console — Официальная документация API консоли DevTools от Chrome.
2. Web APIs: Console — MDN — Справочник для разработчиков, исчерпывающий особенности JavaScript-консоли на MDN.
3. Объект Console в браузере — W3Schools — Обзор использования объекта "Console" в JavaScript c подробными примерами.
4. Документация Node.js: Util — Инструкция Node.js по использованию временных меток в логах.
5. Отладка JavaScript – Chrome DevTools 101: YouTube Учебник — Видеоурок по отладке выдачи и использованию DevTools от Chrome для начинающих.
6. Medium: Улучшение функционала логирования консоли JavaScript — Статья с рекомендациями по расширению возможностей стандартной консоли JavaScript.