timestamp console.log in Chrome?

Esiste un modo rapido per far sì che Chrome emetta timestamp nelle console.logscritture (come fa Firefox). O anteporre è new Date().getTime()l'unica opzione?

In Chrome, c'è l'opzione Impostazioni console (Strumenti per gli sviluppatori -> Console -> Impostazioni [angolo in alto a destra]) denominata "Mostra timestamp" che è esattamente ciò di cui avevo bisogno.

L'ho appena trovato. Non sono necessari altri hack sporchi che distruggono i segnaposto e cancellano la posizione nel codice da cui sono stati registrati i messaggi.

Aggiornamento per Chrome 68+

L'impostazione "Mostra timestamp" è stata spostata nel riquadro Preferenze di "Impostazioni DevTools", che si trova nell'angolo in alto a destra del cassetto DevTools:

Prova questo:

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

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

O questo, nel caso tu voglia un timestamp:

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

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

Per registrare più di una cosa e in modo piacevole (come la rappresentazione ad albero di oggetti):

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

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

Con stringa di formato ( 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);
        }
    }
};

Output con quello:

PS: testato solo su Chrome.

PPS: Array.prototype.slicequi non è perfetto perché verrebbe registrato come una matrice di oggetti piuttosto che una serie di quelli di.

È possibile utilizzare il profiler degli strumenti di sviluppo.

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

"Nome timer" deve essere lo stesso. È possibile utilizzare più istanze di timer con nomi diversi.

Inizialmente l'ho aggiunto come commento, ma volevo aggiungere uno screenshot in quanto almeno una persona non riusciva a trovare l'opzione (o forse non era disponibile nella loro versione particolare per qualche motivo).

Su Chrome 68.0.3440.106 (e ora verificato in 72.0.3626.121) ho dovuto

• strumenti open dev (F12)
• fai clic sul menu a tre punti in alto a destra
• fai clic su impostazioni
• seleziona Preferenze nel menu a sinistra
• seleziona mostra timestamp nella sezione Console della schermata delle impostazioni

Mi converto argumentsin Array usando in Array.prototype.slicemodo che io possa concatcon un altro Array di ciò che voglio aggiungere, quindi lo passo 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"]

Sembra che argumentspossa essere modificato Array.prototype.unshiftanche, ma non so se modificarlo in questo modo sia una buona idea / avrà altri effetti collaterali

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 Datee Date.now()sono modi alternativi per ottenere i timestamp

Se stai utilizzando il browser Google Chrome, puoi utilizzare l'API Chrome Console:

• console.time: chiamalo nel punto del codice in cui desideri avviare il timer
• console.timeEnd: chiamalo per fermare il timer

Il tempo trascorso tra queste due chiamate viene visualizzato nella console.

Per informazioni dettagliate, consultare il link del documento: https://developers.google.com/chrome-developer-tools/docs/console

Da Chrome 68:

"Mostra timestamp" è stato spostato nelle impostazioni

La casella di controllo Mostra timestamp precedentemente in Impostazioni console Impostazioni console è stata spostata in Impostazioni .

Prova anche questo:

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

Questa funzione inserisce il timestamp, il nome file e il numero di riga come gli stessi del built-in console.log.

Se vuoi conservare le informazioni sul numero di linea (ogni messaggio che punta alla sua chiamata .log (), non tutti che puntano al nostro wrapper), devi usare .bind(). È possibile anteporre un argomento timestamp aggiuntivo tramite console.log.bind(console, <timestamp>)ma il problema è che è necessario rieseguirlo ogni volta per ottenere una funzione associata con un nuovo timestamp. Un modo imbarazzante per farlo è una funzione che restituisce una funzione associata:

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

che quindi deve essere utilizzato con una doppia chiamata:

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

MA possiamo rendere implicita la prima chiamata installando una proprietà con la funzione getter:

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

Ora chiami console.log(...)e automagicamente si antepone un timestamp!

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

Puoi persino ottenere questo comportamento magico con un semplice log()invece di console.log()farlo Object.defineProperty(window, "log", ...).

Vedi https://github.com/pimterry/loglevel per un wrapper di console sicuro ben fatto utilizzando .bind(), con fallback di compatibilità.

Consulta https://github.com/eligrey/Xccessors per i fallback di compatibilità dall'API defineProperty()legacy __defineGetter__. Se nessuna delle API delle proprietà funziona, è necessario eseguire il fallback a una funzione wrapper che ottiene ogni volta un nuovo timestamp. (In questo caso perdi le informazioni sul numero di riga, ma i timestamp verranno comunque visualizzati.)

Boilerplate: formattazione del tempo come mi piace:

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

Questo aggiunge una funzione "log" all'ambito locale (usando this) usando tutti gli argomenti che vuoi:

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

Quindi puoi usarlo:

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

Emette qualcosa del genere:

[Lun, 11 Mar 2013 16:47:49 GMT] Oggetto {test: "log"} scimmia 42

esteso anche la soluzione molto bella "con stringa di formato" da JSmyth per supportare

• tutte le altre console.logvarianti ( log, debug, info, warn, error)
• incluso il parametro di flessibilità della stringa data / ora (ad es. 09:05:11.518vs. 2018-06-13T09:05:11.518Z)
• incluso fallback nel caso in cui le consolesue funzioni non esistano nei browser

.

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'

Ho questo nella maggior parte delle app Node.JS. Funziona anche nel browser.

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

Soluzione ES6:

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

dove timestamp()restituisce il timestamp effettivamente formattato e logaggiunge un timestamp e propaga a tutti i propri argomenticonsole.log

Un affinamento sulla risposta di 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);
    }
};

Questo:

• mostra i timestamp con millisecondi
• assume una stringa di formato come primo parametro di .log