javascript - Chrome 中的 console.log 时间戳？

Question

有什么快速的方法可以让 Chrome 在console.log写入中输出时间戳（就像 Firefox 一样）。还是预先new Date().getTime()设置唯一的选择？

Answer 1

在 Chrome 中，控制台设置中有一个名为“显示时间戳”的选项（按 F1 或选择开发人员工具 -> 控制台 -> 设置 [右上角]），这正是我所需要的。

我刚刚找到它。不需要其他肮脏的黑客来破坏占位符并擦除记录消息的代码中的位置。

Chrome 68+ 更新

“显示时间戳”设置已移至 DevTools 抽屉右上角的“DevTools 设置”的“首选项”窗格：

Answer 2

尝试这个：

console.logCopy = console.log.bind(console);

console.log = function(data)
{
    var currentDate = '[' + new Date().toUTCString() + '] ';
    this.logCopy(currentDate, data);
};

或者这个，如果你想要一个时间戳：

console.logCopy = console.log.bind(console);

console.log = function(data)
{
    var timestamp = '[' + Date.now() + '] ';
    this.logCopy(timestamp, data);
};

以一种很好的方式记录不止一件事（如对象树表示 ）：

console.logCopy = console.log.bind(console);

console.log = function()
{
    if (arguments.length)
    {
        var timestamp = '[' + Date.now() + '] ';
        this.logCopy(timestamp, arguments);
    }
};

使用格式字符串( JSFiddle )

console.logCopy = console.log.bind(console);

console.log = function()
{
    // Timestamp to prepend
    var timestamp = new Date().toJSON();

    if (arguments.length)
    {
        // True array copy so we can call .splice()
        var args = Array.prototype.slice.call(arguments, 0);

        // If there is a format string then... it must
        // be a string
        if (typeof arguments[0] === "string")
        {
            // Prepend timestamp to the (possibly format) string
            args[0] = "%o: " + arguments[0];

            // Insert the timestamp where it has to be
            args.splice(1, 0, timestamp);

            // Log the whole array
            this.logCopy.apply(this, args);
        }
        else
        { 
            // "Normal" log
            this.logCopy(timestamp, args);
        }
    }
};

输出：

PS：仅在 Chrome 中测试。

PPS：Array.prototype.slice在这里并不完美，因为它会被记录为对象数组而不是一系列对象。

Answer 3

我最初将此作为评论添加，但我想添加一个屏幕截图，因为至少有一个人找不到该选项（或者可能由于某种原因在他们的特定版本中不可用）。

在 Chrome 68.0.3440.106 上（现在签入 72.0.3626.121）我不得不

• 打开开发工具 (F12)
• 点击右上角的三点菜单
• 点击设置
• 在左侧菜单中选择首选项
• 检查设置屏幕的控制台部分中的显示时间戳

Answer 4

您可以使用开发工具分析器。

console.time('Timer name');
//do critical time stuff
console.timeEnd('Timer name');

“定时器名称”必须相同。您可以使用具有不同名称的多个计时器实例。

Answer 5

我使用转换arguments为数组Array.prototype.slice，以便可以concat使用另一个要添加的数组，然后将其传递给console.log.apply(console, /*here*/);

var log = function () {
    return console.log.apply(
        console,
        ['['+new Date().toISOString().slice(11,-5)+']'].concat(
            Array.prototype.slice.call(arguments)
        )
    );
};
log(['foo']); // [18:13:17] ["foo"]

似乎arguments也可以Array.prototype.unshift编辑，但我不知道像这样修改它是否是个好主意/会不会有其他副作用

var log = function () {
    Array.prototype.unshift.call(
        arguments,
        '['+new Date().toISOString().slice(11,-5)+']'
    );
    return console.log.apply(console, arguments);
};
log(['foo']); // [18:13:39] ["foo"]

Answer 6

+new Date并且Date.now()是获取时间戳的替代方法

Answer 7

如果您使用的是 Google Chrome 浏览器，则可以使用 chrome 控制台 api：

• console.time：在代码中要启动计时器的位置调用它
• console.timeEnd：调用它来停止计时器

这两个调用之间的经过时间显示在控制台中。

有关详细信息，请参阅文档链接：https ://developers.google.com/chrome-developer-tools/docs/console

Answer 8

ES6 解决方案：

const timestamp = () => `[${new Date().toUTCString()}]`
const log = (...args) => console.log(timestamp(), ...args)

wheretimestamp()返回实际格式化的时间戳并log添加时间戳并将所有自己的参数传播到console.log

Answer 9

Chrome 98 的更新：

设置 -> 首选项 -> 控制台 -> 显示时间戳

从 Chrome 68 开始：

“显示时间戳”移至设置

之前在控制台设置控制台设置中的显示时间戳复选框已移至设置。

Answer 10

也试试这个：

this.log = console.log.bind( console, '[' + new Date().toUTCString() + ']' );

此函数将时间戳、文件名和行号与内置 console.log.

Answer 11

如果要保留行号信息（每条消息都指向其 .log() 调用，而不是全部指向我们的包装器），则必须使用.bind(). 您可以通过预先添加一个额外的时间戳参数，console.log.bind(console, <timestamp>)但问题是您每次都需要重新运行它以获得与新时间戳绑定的函数。一个尴尬的方法是返回一个绑定函数的函数：

function logf() {
  // console.log is native function, has no .bind in some browsers.
  // TODO: fallback to wrapping if .bind doesn't exist...
  return Function.prototype.bind.call(console.log, console, yourTimeFormat());
}

然后必须与双重调用一起使用：

logf()(object, "message...")

但是我们可以通过安装一个带有 getter 函数的属性来隐式调用第一个调用：

var origLog = console.log;
// TODO: fallbacks if no `defineProperty`...
Object.defineProperty(console, "log", {
  get: function () { 
    return Function.prototype.bind.call(origLog, console, yourTimeFormat()); 
  }
});

现在您只需调用console.log(...)并自动添加时间戳！

> console.log(12)
71.919s 12 VM232:2
undefined
> console.log(12)
72.866s 12 VM233:2
undefined

你甚至可以通过简单log()的而不是console.log()通过做来实现这种神奇的行为Object.defineProperty(window, "log", ...)。

---

请参阅https://github.com/pimterry/loglevel了解使用 的安全控制台包装器.bind()，并具有兼容性回退。

请参阅https://github.com/eligrey/XccessorsdefineProperty()了解从旧版__defineGetter__API的兼容性回退。如果两个属性 API 都不起作用，您应该回退到每次都获取新时间戳的包装函数。（在这种情况下，您会丢失行号信息，但仍会显示时间戳。）

---

样板：时间格式化我喜欢的方式：

var timestampMs = ((window.performance && window.performance.now) ?
                 function() { return window.performance.now(); } :
                 function() { return new Date().getTime(); });
function formatDuration(ms) { return (ms / 1000).toFixed(3) + "s"; }
var t0 = timestampMs();
function yourTimeFormat() { return formatDuration(timestampMs() - t0); }

Answer 12

从 JSmyth扩展了非常好的解决方案“带格式字符串”以也支持

• 所有其他console.log变体 ( log, debug, info, warn, error)
• 包括时间戳字符串灵活性参数（例如09:05:11.518vs. 2018-06-13T09:05:11.518Z）
• 包括回退以防万一console或其功能在浏览器中不存在

.

var Utl = {

consoleFallback : function() {

    if (console == undefined) {
        console = {
            log : function() {},
            debug : function() {},
            info : function() {},
            warn : function() {},
            error : function() {}
        };
    }
    if (console.debug == undefined) { // IE workaround
        console.debug = function() {
            console.info( 'DEBUG: ', arguments );
        }
    }
},


/** based on timestamp logging: from: https://stackoverflow.com/a/13278323/1915920 */
consoleWithTimestamps : function( getDateFunc = function(){ return new Date().toJSON() } ) {

    console.logCopy = console.log.bind(console)
    console.log = function() {
        var timestamp = getDateFunc()
        if (arguments.length) {
            var args = Array.prototype.slice.call(arguments, 0)
            if (typeof arguments[0] === "string") {
                args[0] = "%o: " + arguments[0]
                args.splice(1, 0, timestamp)
                this.logCopy.apply(this, args)
            } else this.logCopy(timestamp, args)
        }
    }
    console.debugCopy = console.debug.bind(console)
    console.debug = function() {
        var timestamp = getDateFunc()
        if (arguments.length) {
            var args = Array.prototype.slice.call(arguments, 0)
            if (typeof arguments[0] === "string") {
                args[0] = "%o: " + arguments[0]
                args.splice(1, 0, timestamp)
                this.debugCopy.apply(this, args)
            } else this.debugCopy(timestamp, args)
        }
    }
    console.infoCopy = console.info.bind(console)
    console.info = function() {
        var timestamp = getDateFunc()
        if (arguments.length) {
            var args = Array.prototype.slice.call(arguments, 0)
            if (typeof arguments[0] === "string") {
                args[0] = "%o: " + arguments[0]
                args.splice(1, 0, timestamp)
                this.infoCopy.apply(this, args)
            } else this.infoCopy(timestamp, args)
        }
    }
    console.warnCopy = console.warn.bind(console)
    console.warn = function() {
        var timestamp = getDateFunc()
        if (arguments.length) {
            var args = Array.prototype.slice.call(arguments, 0)
            if (typeof arguments[0] === "string") {
                args[0] = "%o: " + arguments[0]
                args.splice(1, 0, timestamp)
                this.warnCopy.apply(this, args)
            } else this.warnCopy(timestamp, args)
        }
    }
    console.errorCopy = console.error.bind(console)
    console.error = function() {
        var timestamp = getDateFunc()
        if (arguments.length) {
            var args = Array.prototype.slice.call(arguments, 0)
            if (typeof arguments[0] === "string") {
                args[0] = "%o: " + arguments[0]
                args.splice(1, 0, timestamp)
                this.errorCopy.apply(this, args)
            } else this.errorCopy(timestamp, args)
        }
    }
}
}  // Utl

Utl.consoleFallback()
//Utl.consoleWithTimestamps()  // defaults to e.g. '2018-06-13T09:05:11.518Z'
Utl.consoleWithTimestamps( function(){ return new Date().toJSON().replace( /^.+T(.+)Z.*$/, '$1' ) } )  // e.g. '09:05:11.518'

Answer 13

我在大多数 Node.JS 应用程序中都有这个。它也适用于浏览器。

function log() {
  const now = new Date();
  const currentDate = `[${now.toISOString()}]: `;
  const args = Array.from(arguments);
  args.unshift(currentDate);
  console.log.apply(console, args);
}

Answer 14

Chrome 版本 89.0.4389.90 (19.03.2021)

1. 按 F12。
2. 找到并按下齿轮图标。
   
3. 检查Show timestamps。
   

Answer 15

this这将使用尽可能多的参数向本地范围（使用）添加一个“日志”函数：

this.log = function() {
    var args = [];
    args.push('[' + new Date().toUTCString() + '] ');
    //now add all the other arguments that were passed in:
    for (var _i = 0, _len = arguments.length; _i < _len; _i++) {
      arg = arguments[_i];
      args.push(arg);
    }

    //pass it all into the "real" log function
    window.console.log.apply(window.console, args); 
}

所以你可以使用它：

this.log({test: 'log'}, 'monkey', 42);

输出如下内容：

[格林威治标准时间 2013 年 3 月 11 日星期一 16:47:49] 对象 {test: "log"} 猴子 42

Answer 16

JSmyth 对答案的改进：

console.logCopy = console.log.bind(console);

console.log = function()
{
    if (arguments.length)
    {
        var timestamp = new Date().toJSON(); // The easiest way I found to get milliseconds in the timestamp
        var args = arguments;
        args[0] = timestamp + ' > ' + arguments[0];
        this.logCopy.apply(this, args);
    }
};

这个：

• 以毫秒显示时间戳
• 假定格式字符串作为第一个参数.log