Chrome 中的 console.log 时间戳？

Posted 2023-02-22

【中文标题】Chrome 中的 console.log 时间戳？

【英文标题】：console.log timestamps in Chrome?

【发布时间】：2012-08-14 00:57:00

【问题描述】：

是否有任何快速的方法让 Chrome 在console.log 写入中输出时间戳（就像 Firefox 一样）。还是在前面加上new Date().getTime() 是唯一的选择？

【问题讨论】：

您能更改接受的答案吗？投票第二多的要简单得多。

Chrome 似乎更改了开启此功能的方式。见，github.com/Microsoft/vscode/issues/61298#issuecomment-431422747

【参考方案1】：

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

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

Chrome 68+ 更新

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

【讨论】：

正如@Krzysztof Wolny 指出的那样，这现在已内置于 Chrome 35 DevTools。 （耶！）通过打开开发人员工具（例如 F12 或“检查元素”）启用，单击“齿轮”以查看设置，然后选中“控制台”部分中的“显示时间戳”复选框。 !Enable timestamps setting in devtoolstwitter.com/addyosmani#stream-item-tweet-485862365247053824html5rocks.com/en/tutorials/developertools/chrome-35/…codereview.chromium.org/185713007

有没有办法在 Chrome 中使用时间戳模式？我只需要小时和分钟。

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

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

谢谢@tekiegirl，同意，你的回答解决了我的问题！也就是说，Chrome 68+ 的用户必须更改 DevTools 设置（相对于 快速控制台设置 的抽屉）。在 DevTools 设置、“首选项”选项卡、“控制台”标题中;你会发现“显示时间戳”复选框。

【参考方案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 在这里并不完美，因为它会被记录为对象数组而不是一系列对象。

【讨论】：

重写了日志语句，以一种可爱的方式在 Chrome 的控制台中显示对象，以前的版本只是显示“[object Object]”之类的。

@Neal，当然不是——你必须扩展它（；你可以做类似this

这在 log 的第一个参数是格式字符串的一般情况下不起作用

@gonvaled 删除了我的评论，因为它真的没有意义 - 血液中缺乏咖啡。你是对的，这个示例代码不假设格式说明符。我认为，我们可以在这里尝试一下，检查格式字符串说明符，根据它产生不同的输出。

有什么方法可以很好地处理newlines？多行消息通过 chrome 显示在多行上，但是在字符串中时，它变成了一个长行，其中包含 ↵ 字符。

【参考方案3】：

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

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

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

【参考方案4】：

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

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

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

【讨论】：

还有console.timeStamp('foo')，它只是在时间轴中显示为一个黄色点。使用带空格的名称时，它对我不起作用。

这根本不回答与console.log 或日志记录相关的问题

@AndreasDietrich 为什么不呢？它确实输出到控制台。有关它的更多信息，请参阅这篇 2013 年的博文blog.mariusschulz.com/2013/11/22/…

【参考方案5】：

我使用Array.prototype.slice 将arguments 转换为Array，这样我就可以将concat 与另一个我想添加的Array 一起传递给@ 987654326@;

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.unshifted，不过不知道这样修改好不好/会不会有其他副作用

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

【参考方案6】：

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

【讨论】：

谢谢，+1，但我希望在不必添加代码的情况下可能会有一些支持。

【参考方案7】：

如果你使用的是谷歌Chrome浏览器，可以使用chrome控制台api：

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

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

详细信息请查看文档链接：https://developers.google.com/chrome-developer-tools/docs/console

【讨论】：

为像我这样懒得去查的人稍微扩展一下。正确的用法是：console.time("myMeasure"); [你要计时的代码] console.timeEnd("myMeasure");

这根本不回答与 console.log 或日志记录相关的问题

【参考方案8】：

ES6 解决方案：

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

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

【讨论】：

请详细说明，让所有人都明白，什么功能会做什么

谢谢@YatinKhullar。我改变了答案。

【参考方案9】：

Chrome 98 的更新：

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

从 Chrome 68 开始：

“显示时间戳”移至设置

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

【讨论】：

@tekiegirl's answer 有一个屏幕截图显示在哪里可以找到 DevTools 设置中的复选框；此答案中的屏幕截图没有显示在哪里可以找到“显示时间戳”复选框。

【参考方案10】：

也试试这个：

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

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

【讨论】：

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

【参考方案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 函数的 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", ...) 来实现这种神奇的行为。

---

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

请参阅https://github.com/eligrey/Xccessors，了解从defineProperty() 到旧版__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); 

【参考方案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);

【参考方案13】：

将非常好的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://***.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'

【讨论】：

一个缺点虽然是（例如在FF 56.0中）它不显示日志语句的源位置，但来自上面Utl.js的位置。因此启用（按需评论输入/输出）Utl.consoleWithTimestamps(...)-override 可能有意义

【参考方案14】：

Chrome 版本 89.0.4389.90 (19.03.2021)

按 F12。 找到并按下齿轮图标。 检查Show timestamps。

【参考方案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" monkey 42

【参考方案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 的第一个参数

【讨论】：

这看起来几乎都很好，除了如果你console.log(document, window)，即没有格式字符串假设，那么你会得到smth。像 2014-02-15T20:02:17.284Z > [object HTMLDocument] Window … 而不是 document 被表示为可扩展的对象树。

请参阅 here 我试图找到解决您提出的问题的方法（虽然过早地更新了我的答案）。

@JSmyth：当然，这就是为什么我的改进要求之一是第一个参数是格式字符串。为了使其灵活，可能检查第一个参数是否为字符串就足够了。