在Chrome中打印时间戳：console.log时间戳

Question

有没有快速的方法让Chrome在console.log输出中输出时间戳（像Firefox那样）？

还是只能在前面添加new Date().getTime()？

- UpTheCreek

---

你能否更改被接受的答案？第二个得票最高的答案要简单得多。 - Liron Yahdav

看起来 Chrome 已经改变了如何打开这个功能。请参见：https://github.com/Microsoft/vscode/issues/61298#issuecomment-431422747 - itsthetaste

Answer 1

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

我刚找到它。不需要其他破坏占位符并擦除消息记录位置的脏技巧。

Chrome 68+的更新

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

- Krzysztof Wolny

---

如@Krzysztof Wolny所指出，这现在已经内置于Chrome 35开发工具中。（耶！）通过打开开发者工具（例如F12或“检查元素”），单击“齿轮”以查看设置，然后在“控制台”部分中选中“显示时间戳”复选框来启用。 https://twitter.com/addyosmani#stream-item-tweet-485862365247053824 http://www.html5rocks.com/en/tutorials/developertools/chrome-35/#timestamps-next-to-console-messages https://codereview.chromium.org/185713007 - jacobq

在Chrome 68.0.3440.106上，我需要打开开发者工具（按F12键）> 点击右上角的三个点菜单> 点击设置> 在左侧菜单中选择首选项> 在设置屏幕（右上方）的控制台部分中勾选显示时间戳。 - tekiegirl

这个答案曾经对我有用： 即控制台“齿轮图标”; “显示时间戳”复选框 ...但是现在在 Chrome 70.0.3538.110 (Official Build) (64位) 中，我不看到“显示时间戳”所以我尝试了 @tekiegirl 关于 Chrome 68 的建议： 即打开开发者工具（F12）> 点击右上角的三个点菜单> 点击设置> 在左侧菜单中选择首选项> 勾选显示时间戳...但是在设置的左侧菜单中我没有看到“首选项”，这是在Chrome 70.0.3538.110（官方构建）（64位）中。 - Nate Anderson

感谢@tekiegirl，我同意，你的答案解决了我的问题！也就是说，Chrome 68+的用户必须更改DevTools设置（而不是快速控制台设置抽屉）。在DevTools设置中，“首选项”选项卡下的“控制台”标题中，您会找到“显示时间戳”的复选框。 - Nate Anderson

默认情况下应该是开启的！ - Simon_Weaver

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

输出结果如下：

附言：仅在Chrome中测试过。

另外一点：这里不适合使用Array.prototype.slice，因为它会被记录为对象数组而不是一系列的对象。

- JSmyth

---

我已经重新编写了日志语句，以可爱的方式在Chrome的控制台中显示对象。之前的版本只是显示“[object Object]”或类似内容。 - JSmyth

@Neal，当然不会 - 你必须扩展它（; 你可以像这样做些事情。 - JSmyth

这在一般情况下是行不通的，因为log的第一个参数是格式字符串。 - blueFast

@gonvaled 删除了我的评论，因为它真的没有意义——血液中缺乏咖啡因。你是正确的，这个示例代码并不假设格式说明符。我认为，我们可以冒险在此基础上检查格式字符串说明符，并根据此生成不同的输出。 - JSmyth

你如何将时间戳变成红色？ - Oliver Watkins

Answer 3

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

在Chrome 68.0.3440.106（现在在72.0.3626.121中检查过）中，我需要：

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

- tekiegirl

---

那张图片几乎无法辨认。至少可以进行裁剪。 - Peter Mortensen

Answer 4

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

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

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

- SerzN1

---

还有一个 console.timeStamp('foo')，它只会在时间轴上显示为黄色点。但是，如果名称中包含空格，则对我无效。 - Vitim.us

这并没有回答与console.log或日志记录相关的问题。 - Andreas Covidiot

@AndreasDietrich 为什么不呢？它确实会输出到控制台。更多相关信息请参考这篇2013年的博客文章 https://blog.mariusschulz.com/2013/11/22/measuring-execution-times-in-javascript-with-consoletime - JP Hellemons

Answer 5

ES6 解决方案：

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

timestamp()返回实际格式化的时间戳，log会添加时间戳并将所有参数传递给console.log

- A. Rokinsky

---

请详细说明每个函数的作用，以便所有人都能理解。 - Yatin Khullar

谢谢@YatinKhullar。我已经修改了我的答案。 - A. Rokinsky

Answer 6

Chrome 98更新：

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

从Chrome 68开始：

"显示时间戳"已移至设置中。

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

- itsazzad

---

@tekiegirl的回答中有一张截图，显示如何在DevTools设置中找到复选框；但是这个回答中的截图没有告诉我在哪里找到“显示时间戳”复选框。 - Nate Anderson

Answer 7

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

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"]

- Paul S.

Answer 8

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

- KiL

---

谢谢，+1，但我希望能够在不添加代码的情况下获得支持。 - UpTheCreek

Answer 9

也可以尝试这个：

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

这个函数会将时间戳、文件名和行号放在内置的console.log中相同的位置。

- sho terunuma

---

用这种方式创建的“log”函数会冻结一个固定的时间戳；每次想要最新的时间[=最新的日期;-]，您都必须重新运行它。虽然可以将其制作成一个函数，但您必须像“mklog()(...)”而不是“log()”那样使用它。 - Beni Cherniavsky-Paskin

Answer 10

Chrome 版本 89.0.4389.90（2021年3月19日）

1. 按下 F12。

2. 找到并点击齿轮图标。

   

3. 勾选 显示时间戳。

   

- Andrey Patseiko