timestamps console.log no Chrome?

Existe alguma maneira rápida de fazer com que o Chrome produza registros de data e hora em console.loggravações (como o Firefox). Ou está anexando new Date().getTime()a única opção?

No Chrome, existe a opção Configurações do console (Ferramentas do desenvolvedor -> Console -> Configurações [canto superior direito]) chamado "Mostrar carimbos de data / hora", exatamente o que eu precisava.

Acabei de encontrar. Não são necessários outros hacks sujos que destruam espaços reservados e apaguem o código no qual as mensagens foram registradas.

Atualização para o Chrome 68 ou superior

A configuração "Mostrar timestamps" foi movida para o painel Preferences das "DevTools settings", localizado no canto superior direito da gaveta do DevTools:

Tente o seguinte:

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

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

Ou isso, caso você queira um carimbo de data / hora:

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

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

Para registrar mais de uma coisa e de uma maneira agradável (como a representação em árvore de objetos):

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

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

Com string de 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);
        }
    }
};

Saídas com isso:

PS: testado apenas no Chrome.

PPS: Array.prototype.slicenão é perfeito aqui, pois seria registrado como uma matriz de objetos e não como uma série.

Você pode usar o criador de ferramentas de ferramentas de desenvolvimento.

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

"Nome do temporizador" deve ser o mesmo. Você pode usar várias instâncias do timer com nomes diferentes.

Eu o adicionei originalmente como comentário, mas queria adicionar uma captura de tela porque pelo menos uma pessoa não conseguiu encontrar a opção (ou talvez ela não estivesse disponível em sua versão específica por algum motivo).

No Chrome 68.0.3440.106 (e agora registrada em 72.0.3626.121), tive que

• ferramentas de desenvolvimento abertas (F12)
• clique no menu de três pontos no canto superior direito
• clique em configurações
• selecione Preferências no menu esquerdo
• verifique mostrar os carimbos de hora na seção Console da tela de configurações

Eu converto argumentspara Matriz usando Array.prototype.slicepara que eu possa concatcom outra Matriz do que eu quero adicionar e depois a transmito 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"]

Parece que também argumentspode ser Array.prototype.unshifteditado, mas não sei se modificá-lo dessa maneira é uma boa ideia / terá outros efeitos colaterais

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()são formas alternativas de obter registros de data e hora

Se você estiver usando o navegador Google Chrome, poderá usar a API do console do Chrome:

• console.time: chame-o no ponto do código em que deseja iniciar o timer
• console.timeEnd: ligue para parar o cronômetro

O tempo decorrido entre essas duas chamadas é exibido no console.

Para informações detalhadas, consulte o link do documento: https://developers.google.com/chrome-developer-tools/docs/console

No Chrome 68:

"Mostrar timestamps" movido para configurações

A caixa de seleção Mostrar carimbos de data e hora anteriormente em Configurações do console Configurações do console mudou para Configurações .

Tente também:

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

Esta função coloca o carimbo de data / hora, o nome do arquivo e o número da linha iguais aos incorporados console.log.

Se você deseja preservar as informações do número da linha (cada mensagem apontando para sua chamada .log (), nem todas apontando para o nosso invólucro), é necessário usar .bind(). Você pode anexar um argumento extra de registro de data e hora, console.log.bind(console, <timestamp>)mas o problema é que você deve executá-lo novamente toda vez para vincular uma função a um registro de data e hora novo. Uma maneira estranha de fazer isso é uma função que retorna uma função vinculada:

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

que deve ser usado com uma chamada dupla:

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

MAS podemos tornar implícita a primeira chamada instalando uma propriedade com a função getter:

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

Agora você acabou de ligar console.log(...)e automagicamente ele precede um carimbo de data e hora!

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

Você pode até conseguir esse comportamento mágico com um simples, em log()vez de console.log()fazer Object.defineProperty(window, "log", ...).

Consulte https://github.com/pimterry/loglevel para obter um wrapper de console seguro bem-sucedido usando .bind(), com fallbacks de compatibilidade.

Consulte https://github.com/eligrey/Xccessors para obter fallbacks de compatibilidade da API defineProperty()herdada __defineGetter__. Se nenhuma API de propriedade funcionar, você deverá fazer o fallback para uma função de wrapper que receba um carimbo de data / hora novo sempre. (Nesse caso, você perde as informações do número da linha, mas os carimbos de data e hora ainda são exibidos.)

Boilerplate: Hora de formatar da maneira que eu gosto:

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

Isso adiciona uma função "log" ao escopo local (usando this) usando quantos argumentos você desejar:

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

Então você pode usá-lo:

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

Produz algo como isto:

[Seg, 11 de março de 2013 16:47:49 GMT] Objeto {test: "log"} macaco 42

estendeu a solução muito agradável "com string de formato" do JSmyth para também suportar

• todas as outras console.logvariações ( log, debug, info, warn, error)
• incluindo o parâmetro de flexibilidade da cadeia de data e hora (por exemplo, 09:05:11.518vs.2018-06-13T09:05:11.518Z )
• incluindo fallback no caso consoleou suas funções não existem nos navegadores

.

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'

Eu tenho isso na maioria dos aplicativos Node.JS. Também funciona no navegador.

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

Solução ES6:

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

onde timestamp()retorna o carimbo de data / hora realmente formatado e logadiciona um carimbo de hora e propaga todos os seus próprios argumentos paraconsole.log

Um refinamento na resposta de 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);
    }
};

Este:

• mostra registros de data e hora com milissegundos
• assume uma string de formato como primeiro parâmetro para .log