Explain Codes LogoExplain Codes Logo

Console.log timestamps in Chrome

javascript
console-logging
timestamping
console-devtools
Alex KataevbyAlex Kataev·Jan 19, 2025
TLDR

Quickly annotate your console.log outputs with timestamps in Chrome by overriding the function:

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

This small yet robust one-liner infuses console.log with the power to prepend logs with an ISO timestamp, transforming your logs into historically aware messages.

For those fortuned enough to have Chrome 68+, you can watch timestamps dance in your logs without touching a line of code!

Enabling in-built timestamps

Chrome has evolved, and it's not shy to flaunt its features. Here's how to tell your chrome to stamp your log entries:

  1. Press F12 or Cmd+Opt+I on a Mac / Ctrl+Shift+I on Windows to summon the mighty Chrome DevTools.
  2. Make a swift click on vertical ellipsis (⋮) adorning the top-right of the console or simply press F1 to greet Settings.
  3. In the land of Console section, checkmark the option saying "Show timestamps".

Fear not, for with this road not only you abstain from coding exertions but also preserve the purity and dignity of your console.log function.

Creating your timestamp formatter

For those inclined towards customization or living in prehistoric chrome can manifest their own console.log magic:

  • Bound Logger: Summon your deeply bound logger to create a superficial timestamp using console.log.bind.
const myTimestampLogger = console.log.bind( console, `%c[${new Date().toLocaleTimeString()}]`, "color: gray;" ); myTimestampLogger("Now, that's some spicy log!"); // Just a little fun for the logs
  • Profiling Tools: Harness the power of console.time and console.timeEnd for timing perfection.
console.time("Racing against time"); // Something that surely takes eternity. console.timeEnd("Racing against time"); // Waits patiently to scream "Time Up!"
  • ES6 Arrow Functions: Why not make chrome arrows of time fly straight into your logs?
const log = console.log; console.log = (...messages) => log(new Date().toISOString(), ...messages);

Timestamp Visualization

Here are your ancient logs, which once roamed the console land without a trace of time, now come labeled with timestamps:

Original Log: 🏺🗿🔱 (logs with lost time) Timestamped Log: 🏺⏱️🗿⏱️🔱⏱️ (each tells a tale of its time)

Lowering the curtain on Chrome console methods

Light and fast

When speed is the essence, let Chrome's inherent timestamping guide you on console logs. It's as easy as flipping a switch but remember, customization is preserved for the brave.

Tailored perfection

When uniqueness demands precedence, enhancing console.log is the path to walk on. Coding environments oblivious of DevTools will be more welcoming to you.

Weighing performance

Fear not, for the performance impact while toy logging is meager turning colossus only in high-frequency logging. In performance-focused tasks, trust the built-in option or delegating logging frameworks for efficient timestamping!