javascript - Chromeのconsole.logタイムスタンプ？

Question

Chromeに書き込みでタイムスタンプを出力させる簡単な方法はありますかconsole.log（Firefoxのように）。それともnew Date().getTime()、唯一のオプションを前に付けるのですか？

Answer 1

Chromeでは、コンソール設定（F1キーを押すか、[開発者ツール]->[コンソール]->[設定][右上隅]を選択）に「タイムスタンプを表示」という名前のオプションがあります。これはまさに私が必要としていたものです。

見つけたばかりです。プレースホルダーを破棄し、メッセージがログに記録されたコード内の場所を消去する、他のダーティハックは必要ありません。

Chrome68以降のアップデート

[タイムスタンプの表示]設定は、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

もともとコメントとして追加しましたが、少なくとも1人がオプションを見つけられなかったため（または、何らかの理由で特定のバージョンで利用できなかったため）、スクリーンショットを追加したいと思いました。

Chrome 68.0.3440.106（そして現在72.0.3626.121でチェックイン）では、

• 開発ツールを開く（F12）
• 右上の3ドットメニューをクリックします
• 設定をクリックします
• 左側のメニューで[設定]を選択します
• 設定画面の[コンソール]セクションで[タイムスタンプの表示]を確認します

Answer 4

開発ツールプロファイラーを使用できます。

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

「タイマー名」は同じでなければなりません。異なる名前のタイマーの複数のインスタンスを使用できます。

Answer 5

を使用して配列に変換argumentsし、追加したいものの別の配列を使用できるようにしてから、それを;に渡します。Array.prototype.sliceconcatconsole.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"]

argumentsedもできるようです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 6

+new DateタイムスタンプをDate.now()取得する別の方法です

Answer 7

Google Chromeブラウザを使用している場合は、chromeconsoleapiを使用できます。

• console.time：タイマーを開始するコード内のポイントで呼び出します
• console.timeEnd：タイマーを停止するために呼び出します

これら2つの呼び出し間の経過時間は、コンソールに表示されます。

詳細については、ドキュメントリンクをご覧ください：https ：//developers.google.com/chrome-developer-tools/docs/console

Answer 8

ES6ソリューション：

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

ここで、timestamp()実際にフォーマットされたタイムスタンプを返し、タイムスタンプをlog追加し、すべての独自の引数をに伝播しますconsole.log

Answer 9

Chrome 98の更新：

[設定]->[設定]->[コンソール]->[タイムスタンプを表示]

Chrome 68から：

「タイムスタンプを表示」を設定に移動

以前の[コンソール設定][コンソール設定]の[タイムスタンプを表示する]チェックボックスが[設定]に移動しました。

Answer 10

これも試してください：

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

この関数は、タイムスタンプ、ファイル名、および行番号を組み込みと同じものにし console.logます。

Answer 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関数を使用してプロパティをインストールすることにより、最初の呼び出しを暗黙的に行うことができます。

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()

レガシーAPIからの互換性フォールバックについては、 https：//github.com/eligrey/Xccessorsを参照してください。どちらのプロパティAPIも機能しない場合は、毎回新しいタイムスタンプを取得するラッパー関数にフォールバックする必要があります。（この場合、行番号情報は失われますが、タイムスタンプは引き続き表示されます。）defineProperty()__defineGetter__

---

ボイラープレート：好きなようにフォーマットする時間：

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

私はほとんどの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

JSmythの「フォーマット文字列を使用した」非常に優れたソリューションを拡張して、

• 他のすべてのconsole.logバリエーション（、、、、、）logdebuginfowarnerror
• タイムスタンプ文字列の柔軟性パラメータを含む（例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 14

Chromeバージョン89.0.4389.90（19.03.2021）

1. F12を押します。
2. 歯車のアイコンを見つけて押します。
   
3. チェックしてくださいShow timestamps。
   

Answer 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:49GMT]オブジェクト{テスト："ログ"}モンキー42

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