Home > Article > Web Front-end > Customize JavaScripts console.log
If you ever wondered how to extend the default console.log() to i.e: prefix it with the current date-time:
// Store the default log method: const _log = console.log; // Override: console.log = (...args) => { const prefix = `[${new Date().toLocaleString()}]`; if (typeof args[0] === "string") args[0] = `${prefix} ${args[0]}` else args.unshift(prefix); _log(...args); }; // Examples: console.log("Test"); // [Date Time] Test console.log({a: "b"}); // [Date Time] {a: "b"} console.log("Hello, %s!", "World"); // [Date Time] Hello, World! console.log("Number: %i", 42); // [Date Time] Number: 42 console.log("%cStylized text", 'color: red'); // [Date Time] Stylized text
Writing console.log is tedious, so instead of overriding the default behavior let's just create a log() function that uses console.log internally:
const log = (...args) => { const prefix = `[${new Date().toLocaleString()}]`; if (typeof args[0] === "string") args[0] = `${prefix} ${args[0]}` else args.unshift(prefix); console.log(...args); }; // Examples: log("Test"); // [Date Time] Test log({a: "b"}); // [Date Time] {a: "b"} log("Hello, %s!", "World"); // [Date Time] Hello, World! log("Number: %i", 42); // [Date Time] Number: 42 log("%cStylized text", 'color: red'); // [Date Time] Stylized text
Have fun logging, and don't forget about breakpoints ;)
The above is the detailed content of Customize JavaScripts console.log. For more information, please follow other related articles on the PHP Chinese website!