Chrome中的console.log时间戳？

Question

有没有快捷方法让Chrome在console.log次写入中输出时间戳（如Firefox一样）。或者在new Date().getTime()之前是唯一的选择？

Answer 1

在Chrome中，有一个选项是控制台设置（开发者工具 - ＆gt;控制台 - ＆gt;设置[右上角]），名为“显示时间戳”，这正是我需要的。

我刚刚发现它。没有其他肮脏的黑客需要破坏占位符并擦除记录消息的代码。

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);
        }
    }
};

输出：

P.S。：仅在Chrome中测试过。

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

Answer 3

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

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

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

Answer 4

我使用Array.prototype.slice将arguments转换为数组，以便我可以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 5

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

Answer 6

如果您使用的是谷歌浏览器浏览器，则可以使用chrome console api：

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

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

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

Answer 7

从Chrome 68：

“显示时间戳记”已移至设置

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

Answer 8

也可以尝试：

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

此函数将时间戳，文件名和行号与内置console.log相同。

Answer 9

这会使用任意数量的参数向本地范围添加“log”函数（使用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);

输出如下内容：

  

[Mon，11 Mar 2013 16:47:49 GMT] Object {test：“log”} monkey 42

Answer 10

如果要保留行号信息（指向其.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函数的property来隐式地进行第一次调用：

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", ...)来实现这种神奇的行为。

---

使用.bind()查看功能完善的安全控制台包装器https://github.com/pimterry/loglevel，并提供兼容性回退。

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

---

Boilerplate：时间格式化我喜欢的方式：

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 11

将非常好的solution "with format string" from JSmyth扩展为支持

• 所有其他 console.log变体（log，debug，info，warn，error）
• 包括时间戳字符串灵活性参数（例如09:05:11.518与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 12

我在大多数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 13

ES6解决方案：

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

其中timestamp()返回实际格式化的时间戳记，而log添加时间戳记并将所有自变量传播到console.log

Answer 14

Chrome 版本 89.0.4389.90 (19.03.2021)

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

Answer 15

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
的第一个参数