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 ed，但我不知道像這樣修改它是否是一個好主意/會產生其他副作用

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

如果您使用的是 Google Chrome 瀏覽器，則可以使用 chrome 控制台 api：

• console.time：在代碼中要啟動計時器的位置調用它
• console.timeEnd：調用它來停止計時器

這兩次調用之間經過的時間顯示在控制台中。

有關詳細信息，請參閱文檔鏈接： https : //developers.google.com/chrome-developer-tools/docs/console

Answer 7

+new Date和Date.now()是獲取時間戳的替代方法

Answer 8

從 Chrome 68 開始：

“顯示時間戳”移至設置

之前控制台設置控制台設置中的顯示時間戳復選框已移至設置。

Answer 9

也試試這個：

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

此函數將時間戳、文件名和行號與內置的console.log相同。

Answer 10

ES6解決方案：

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

其中timestamp()返回實際格式化的時間戳和log添加一個時間戳並將所有自己的參數傳播到console.log

Answer 11

如果你想保留行號信息（每條消息都指向它的 .log() 調用，而不是全部指向我們的包裝器），你必須使用.bind() 。 您可以通過console.log.bind(console, <timestamp>)在前面添加一個額外的時間戳參數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

您甚至可以通過執行Object.defineProperty(window, "log", ...)使用簡單的log()而不是console.log()來實現這種神奇的行為。

---

請參閱https://github.com/pimterry/loglevel以獲取使用.bind()並具有兼容性回退的完善的安全控制台包裝器。

有關從defineProperty()到舊版__defineGetter__ API 的兼容性回退，請參閱https://github.com/eligrey/Xcccessors 。 如果這兩個屬性 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

這會使用任意數量的參數將“日志”函數添加到本地范圍（使用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 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

擴展了來自 JSmyth的非常好的解決方案“帶格式字符串” ，以支持

• 所有其他console.log變體（ log 、 debug 、 info 、 warn 、 error ）
• 包括時間戳字符串靈活性參數（例如09:05:11.518與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 15

Chrome 版本 89.0.4389.90 (19.03.2021)

1. 按 F12。
2. 找到並按下齒輪圖標。
   
3. 選中Show timestamps 。
   

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第一個參數