Chrome'da console.log zaman damgaları?

Chrome'a console.logyazma işlemlerinde zaman damgalarının çıkmasını sağlamanın hızlı bir yolu var mı (Firefox gibi). Yoksa new Date().getTime()tek seçenek önermek mi?

Chrome'da, tam olarak ihtiyacım olan şey olan "Zaman damgalarını göster" adlı Konsol Ayarları (Geliştirici Araçları -> Konsol -> Ayarlar [sağ üst köşe]) seçeneği vardır.

Az önce buldum. Yer tutucuları yok eden ve iletilerin günlüğe kaydedildiği koddaki yeri silen başka bir kirli saldırıya gerek yok.

Chrome 68+ için güncelleme

"Zaman damgalarını göster" ayarı, DevTools çekmecesinin sağ üst köşesinde bulunan "DevTools ayarları" nın Tercihler bölmesine taşındı:

Bunu dene:

console.logCopy = console.log.bind(console);

console.log = function(data)
{
    var currentDate = '[' + new Date().toUTCString() + '] ';
    this.logCopy(currentDate, data);
};

Veya bir zaman damgası istemeniz durumunda:

console.logCopy = console.log.bind(console);

console.log = function(data)
{
    var timestamp = '[' + Date.now() + '] ';
    this.logCopy(timestamp, data);
};

Birden fazla şeyi ve güzel bir şekilde günlüğe kaydetmek için (nesne ağacı gösterimi gibi):

console.logCopy = console.log.bind(console);

console.log = function()
{
    if (arguments.length)
    {
        var timestamp = '[' + Date.now() + '] ';
        this.logCopy(timestamp, arguments);
    }
};

Biçim dizesiyle ( 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);
        }
    }
};

Bununla çıktılar:

PS: Yalnızca Chrome'da test edildi.

PPS: Array.prototype.sliceMükemmel değil burada bir dizi yerine nesnelerin bir dizi olarak kaydedilecekti.

Dev araçları profiler kullanabilirsiniz.

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

"Zamanlayıcı adı" aynı olmalıdır. Farklı adlara sahip birden fazla zamanlayıcı örneği kullanabilirsiniz.

Başlangıçta bunu bir yorum olarak ekledim, ancak en az bir kişi seçeneği bulamadığı için bir ekran görüntüsü eklemek istedim (veya belki de belirli bir nedenle belirli sürümlerinde mevcut değildi).

Chrome 68.0.3440.106'da (ve şimdi 72.0.3626.121'de kontrol edildi)

• açık dev araçları (F12)
• sağ üstteki üç nokta menüsünü tıklayın
• tıklama ayarları
• soldaki menüden Tercihler'i seçin
• ayarlar ekranının Konsol bölümündeki zaman damgalarını göster'i kontrol edin

Ben dönüştürmek argumentsiçin Array kullanarak Array.prototype.sliceelimden böylece concatbirbirleriyle Array Sonra, eklemek, geçirmek istediğiniz şeyin 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"]

Görünüşe göre argumentsedinebilir Array.prototype.unshift, ancak bunu değiştirmenin iyi bir fikir olup olmadığını bilmiyorum / başka yan etkileri olacak

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

+new Dateve Date.now()zaman damgaları almanın alternatif yollarıdır

Google Chrome tarayıcı kullanıyorsanız, Chrome konsol API'sını kullanabilirsiniz:

• console.time: kodunuzda zamanlayıcıyı başlatmak istediğiniz noktada arayın
• console.timeEnd: zamanlayıcıyı durdurmak için onu arayın

Bu iki arama arasında geçen süre konsolda görüntülenir.

Ayrıntılı bilgi için lütfen doküman bağlantısına bakın: https://developers.google.com/chrome-developer-tools/docs/console

Chrome 68'den:

"Zaman damgalarını göster" ayarlara taşındı

Zaman damgalarını göstermek taşındı Konsol Ayarları Konsol Ayarları daha önce onay kutusunu Ayarlar .

Bunu da deneyin:

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

Bu işlev, zaman damgası, dosya adı ve satır numarasını yerleşikle aynı şekilde koyar console.log.

Satır numarası bilgilerini (her biri sarıcımıza değil, .log () çağrısına işaret eden her mesaj) korumak istiyorsanız, kullanmanız gerekir .bind(). Fazladan bir zaman damgası bağımsız değişkenini başa ekleyebilirsiniz, console.log.bind(console, <timestamp>)ancak sorun, yeni bir zaman damgasıyla ilişkili bir işlev elde etmek için her seferinde bunu yeniden çalıştırmanız gerekir. Bunu yapmanın garip bir yolu, bağlı bir işlev döndüren bir işlevdir:

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

daha sonra çift çağrı ile kullanılması gerekir:

logf()(object, "message...")

ANCAK getter işlevli bir özellik yükleyerek ilk çağrıyı örtük yapabiliriz :

var origLog = console.log;
// TODO: fallbacks if no `defineProperty`...
Object.defineProperty(console, "log", {
  get: function () { 
    return Function.prototype.bind.call(origLog, console, yourTimeFormat()); 
  }
});

Şimdi sadece arayın console.log(...)ve otomatik olarak bir zaman damgası öneriyor!

> console.log(12)
71.919s 12 VM232:2
undefined
> console.log(12)
72.866s 12 VM233:2
undefined

Bu büyülü davranışı, yapmak log()yerine basit bir şeyle bile gerçekleştirebilirsiniz .console.log()Object.defineProperty(window, "log", ...)

İyi yapılmış güvenli bir konsol sarıcısı için https://github.com/pimterry/loglevel adresine bakın..bind()Uyumluluk yedekleriyle birlikte, .

Eski API'dan uyumluluk yedekleri için bkz. Https://github.com/eligrey/Xccessors . Her iki özellik API'sı işe yaramazsa, her seferinde yeni bir zaman damgası alan bir sarıcı işlevine geri dönmelisiniz. (Bu durumda satır numarası bilgilerini kaybedersiniz, ancak zaman damgaları yine de gösterilir.)defineProperty()__defineGetter__

Boilerplate: Sevdiğim şekilde biçimlendirme zamanı:

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

Bu, thisistediğiniz kadar bağımsız değişken kullanarak yerel kapsama (kullanma ) bir "günlük" işlevi ekler :

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

Böylece kullanabilirsiniz:

this.log({test: 'log'}, 'monkey', 42);

Bunun gibi bir çıktı verir:

[Pzt, 11 Mar 2013 16:47:49 GMT] Object {test: "log"} maymun 42

çok güzel bir çözümü "biçim dizesi ile" JSmyth'den de destekledi

• Diğer tüm console.logvaryasyonları ( log, debug, info, warn, error)
• zaman damgası dize esnekliği parametresi dahil (ör. 09:05:11.518vs. 2018-06-13T09:05:11.518Z)
• dahil durumunda geri dönüş consoleveya fonksiyonları yoktur tarayıcılarda

.

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'

Bunu çoğu Node.JS uygulamasında var. Ayrıca tarayıcıda da çalışır.

function log() {
  const now = new Date();
  const currentDate = `[${now.toISOString()}]: `;
  const args = Array.from(arguments);
  args.unshift(currentDate);
  console.log.apply(console, args);
}

ES6 çözümü:

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

burada timestamp()gerçekten biçimlendirilmiş zaman damgası döndürür ve logbir zaman damgası ekler ve tüm kendi bağımsız değişkenleriniconsole.log

JSmyth'in cevabı hakkında bir ayrıntılandırma:

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

Bu:

• milisaniye ile zaman damgalarını gösterir
• biçim parametresini ilk parametre olarak varsayar: .log