¿Las marcas de tiempo de console.log en Chrome?

¿Hay alguna forma rápida de hacer que Chrome muestre marcas de tiempo en console.logescrituras (como lo hace Firefox)? ¿O es anteponer new Date().getTime()la única opción?

En Chrome, existe la opción Configuración de la consola (Herramientas para desarrolladores -> Consola -> Configuración [esquina superior derecha]) llamada "Mostrar marcas de tiempo", que es exactamente lo que necesitaba.

Lo acabo de encontrar. No se necesitan otros trucos sucios que destruyan los marcadores de posición y borren el lugar en el código desde donde se registraron los mensajes.

Actualización para Chrome 68+

La configuración "Mostrar marcas de tiempo" se ha movido al panel de Preferencias de la "Configuración de DevTools", que se encuentra en la esquina superior derecha del cajón DevTools:

Prueba esto:

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

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

O esto, en caso de que desee una marca de tiempo:

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

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

Para registrar más de una cosa y de una manera agradable (como la representación del árbol de objetos):

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

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

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

Salidas con eso:

PD: Probado solo en Chrome.

PPS: Array.prototype.sliceno es perfecto aquí porque se registraría como una matriz de objetos en lugar de una serie de los de.

Puedes usar herramientas de desarrollo de perfil.

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

El "nombre del temporizador" debe ser el mismo. Puede usar varias instancias de temporizador con diferentes nombres.

Originalmente agregué esto como un comentario, pero quería agregar una captura de pantalla ya que al menos una persona no pudo encontrar la opción (o tal vez no estaba disponible en su versión particular por alguna razón).

En Chrome 68.0.3440.106 (y ahora registrado en 72.0.3626.121) tuve que

• abrir herramientas de desarrollo (F12)
• haz clic en el menú de tres puntos en la esquina superior derecha
• haga clic en configuración
• seleccione Preferencias en el menú de la izquierda
• marque mostrar marcas de tiempo en la sección Consola de la pantalla de configuración

Me convierto argumentsa Array usando Array.prototype.slicepara poder concatcon otro Array de lo que quiero agregar, luego lo paso 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 también argumentsse puede Array.prototype.unshifteditar, pero no sé si modificarlo así es una buena idea / tendrá otros efectos secundarios

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 Datey Date.now()son formas alternativas de obtener marcas de tiempo

Si está utilizando el navegador Google Chrome, puede usar la API de la consola de Chrome:

• console.time: llámelo al punto en su código donde desea iniciar el temporizador
• console.timeEnd: llámalo para detener el temporizador

El tiempo transcurrido entre estas dos llamadas se muestra en la consola.

Para obtener información detallada, consulte el enlace del documento: https://developers.google.com/chrome-developer-tools/docs/console

Desde Chrome 68:

"Mostrar marcas de tiempo" movido a la configuración

La casilla de verificación Mostrar marcas de tiempo previamente en Configuración de la consola Configuración de la consola se ha movido a Configuración .

Prueba esto también:

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

Esta función coloca la marca de tiempo, el nombre de archivo y el número de línea como los mismos que los incorporados console.log.

Si desea preservar la información del número de línea (cada mensaje apunta a su llamada .log (), no todos apuntan a nuestro contenedor), debe usar .bind(). Puede anteponer un argumento de marca de tiempo adicional a través de, console.log.bind(console, <timestamp>)pero el problema es que necesita volver a ejecutar esto cada vez para obtener una función vinculada con una nueva marca de tiempo. Una forma incómoda de hacerlo es una función que devuelve una función enlazada:

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 luego debe usarse con una doble llamada:

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

PERO podemos hacer la primera llamada implícita instalando una propiedad con la función getter:

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

¡Ahora solo llama console.log(...)y automágicamente antepone una marca de tiempo!

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

Incluso puede lograr este comportamiento mágico con un simple en log()lugar de console.log()hacerlo Object.defineProperty(window, "log", ...).

Consulte https://github.com/pimterry/loglevel para obtener una envoltura de consola segura bien hecha, con fallos de .bind()compatibilidad.

Consulte https://github.com/eligrey/Xccessors para ver los retrocesos de compatibilidad de la API defineProperty()heredada __defineGetter__. Si ninguna de las API de propiedades funciona, debería recurrir a una función de contenedor que obtenga una nueva marca de tiempo cada vez. (En este caso, pierde la información del número de línea, pero aún se mostrarán las marcas de tiempo).

Boilerplate: Formateo de tiempo como a mí me gusta:

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

Esto agrega una función "log" al ámbito local (usando this) usando tantos argumentos como desee:

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

Para que pueda usarlo:

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

Produce algo como esto:

[Lunes, 11 de marzo de 2013 16:47:49 GMT] Objeto {prueba: "log"} mono 42

extendió la muy buena solución "con formato de cadena" de JSmyth para admitir también

• todas las otras console.logvariaciones ( log, debug, info, warn, error)
• incluyendo el parámetro de flexibilidad de cadena de marca de tiempo (p. ej 09:05:11.518.2018-06-13T09:05:11.518Z )
• incluido el respaldo en caso de que consolesus funciones no existan en los 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'

Tengo esto en la mayoría de las aplicaciones Node.JS. También funciona en el navegador.

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

Solución ES6:

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

donde timestamp()devuelve loguna marca de tiempo formateada y agrega una marca de tiempo y propaga todos los argumentos propios aconsole.log

Un refinamiento en la respuesta 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);
    }
};

Esta:

• muestra marcas de tiempo con milisegundos
• asume una cadena de formato como primer parámetro para .log