Chrome中的console.log时间戳？

Question

有没有快速的方法让Chrome在console.log写入中输出时间戳(比如Firefox).或者是预先new Date().getTime()唯一的选择？

Answer 1

在Chrome中,有一个选项是控制台设置(开发人员工具 - >控制台 - >设置[右上角]),名为"显示时间戳",这正是我所需要的.

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

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

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

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

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

Answer 4

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

在Chrome 68.0.3440.106（现在已在72.0.3626.121中检查）上，我不得不

• 开放开发工具（F12）
• 点击右上角的三点菜单
• 点击设置
• 在左侧菜单中选择偏好设置
• 检查设置屏幕的“控制台”部分中的显示时间戳记

Answer 5

ES6解决方案：

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

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

Answer 6

Chrome 版本 89.0.4389.90 (19.03.2021)

1. 按F12。

2. 找到并按齿轮图标。

   

3. 检查显示时间戳。

   

Answer 7

我转换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 8

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

Answer 9

如果您使用的是谷歌Chrome浏览器,则可以使用chrome console api:

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

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

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

Answer 10

从Chrome 68：

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

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

Answer 11

也试试这个：

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

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