horodatages console.log dans Chrome?

Existe-t-il un moyen rapide de faire en sorte que Chrome génère des horodatages en console.logécriture (comme le fait Firefox)? Ou le pré-paiement est-il new Date().getTime()la seule option?

Dans Chrome, il y a l'option Paramètres de la console (Outils de développement -> Console -> Paramètres [coin supérieur droit]) nommée "Afficher les horodatages", ce qui est exactement ce dont j'avais besoin.

Je viens de le trouver. Aucun autre piratage sale nécessaire qui détruit les espaces réservés et efface la place dans le code d'où les messages ont été enregistrés.

Mise à jour pour Chrome 68+

Le paramètre "Afficher les horodatages" a été déplacé vers le volet Préférences des "Paramètres DevTools", situé dans le coin supérieur droit du tiroir DevTools:

Essaye ça:

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

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

Ou ceci, au cas où vous voudriez un horodatage:

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

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

Pour enregistrer plus d'une chose et d'une manière agréable (comme la représentation d'arbre d'objets):

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

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

Avec chaîne de format ( 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);
        }
    }
};

Sorties avec ça:

PS: testé dans Chrome uniquement.

PPS: Array.prototype.slicen'est pas parfait ici car il serait consigné comme un tableau d'objets plutôt que comme une série de ceux de.

Vous pouvez utiliser le profileur d'outils de développement.

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

Le "nom du minuteur" doit être le même. Vous pouvez utiliser plusieurs instances de minuterie avec des noms différents.

J'ai initialement ajouté cela en tant que commentaire, mais je voulais ajouter une capture d'écran car au moins une personne n'a pas pu trouver l'option (ou peut-être qu'elle n'était pas disponible dans leur version particulière pour une raison quelconque).

Sur Chrome 68.0.3440.106 (et maintenant enregistré 72.0.3626.121), j'ai dû

• outils de développement ouverts (F12)
• cliquez sur le menu à trois points en haut à droite
• cliquez sur paramètres
• sélectionnez Préférences dans le menu de gauche
• cochez Afficher les horodatages dans la section Console de l'écran des paramètres

Je me convertis argumentsen tableau en utilisant Array.prototype.sliceafin que je puisse concatavec un autre tableau de ce que je veux ajouter, puis je le passe 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"]

Il semble que cela argumentspuisse être Array.prototype.unshiftédité aussi, mais je ne sais pas si le modifier comme ceci est une bonne idée / aura d'autres effets secondaires

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 Dateet Date.now()sont des moyens alternatifs pour obtenir des horodatages

Si vous utilisez le navigateur Google Chrome, vous pouvez utiliser l'API de la console Chrome:

• console.time: appelez-le à l'endroit de votre code où vous souhaitez démarrer le chronomètre
• console.timeEnd: appelez-le pour arrêter le chronomètre

Le temps écoulé entre ces deux appels s'affiche dans la console.

Pour des informations détaillées, veuillez consulter le lien doc: https://developers.google.com/chrome-developer-tools/docs/console

Depuis Chrome 68:

"Afficher les horodatages" déplacé vers les paramètres

La case à cocher Afficher les horodatages précédemment dans Paramètres de la console Paramètres de la console a été déplacée vers Paramètres .

Essayez aussi ceci:

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

Cette fonction met l'horodatage, le nom de fichier et le numéro de ligne identiques à ceux intégrés console.log.

Si vous souhaitez conserver les informations de numéro de ligne (chaque message pointant vers son appel .log (), pas tous pointant vers notre wrapper), vous devez utiliser .bind(). Vous pouvez ajouter un argument d'horodatage supplémentaire via console.log.bind(console, <timestamp>)mais le problème est que vous devez le réexécuter à chaque fois pour obtenir une fonction liée avec un nouvel horodatage. Une façon maladroite de le faire est une fonction qui renvoie une fonction liée:

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

qui doit ensuite être utilisé avec un double appel:

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

MAIS nous pouvons rendre le premier appel implicite en installant une propriété avec la fonction getter:

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

Maintenant, il vous suffit d'appeler console.log(...)et automatiquement, il ajoute un horodatage!

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

Vous pouvez même réaliser ce comportement magique avec un simple log()au lieu de le console.log()faire Object.defineProperty(window, "log", ...).

Voir https://github.com/pimterry/loglevel pour un wrapper de console sûr et bien fait utilisant .bind(), avec des solutions de secours de compatibilité.

Voir https://github.com/eligrey/Xccessors pour les solutions de secours de compatibilité de l' defineProperty()ancienne __defineGetter__API. Si aucune des API de propriété ne fonctionne, vous devez recourir à une fonction wrapper qui obtient un nouvel horodatage à chaque fois. (Dans ce cas, vous perdez les informations sur le numéro de ligne, mais les horodatages s'affichent toujours.)

Boilerplate: Formatage de l'heure comme je l'aime:

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

Cela ajoute une fonction "log" à la portée locale (en utilisant this) en utilisant autant d'arguments que vous le souhaitez:

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

Vous pouvez donc l'utiliser:

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

Produit quelque chose comme ceci:

[Lun. 11 mars 2013 16:47:49 GMT] Objet {test: "log"} singe 42

étendu la très belle solution "avec chaîne de format" de JSmyth pour prendre également en charge

• toutes les autres console.logvariations ( log, debug, info, warn, error)
• y compris le paramètre de flexibilité de la chaîne d'horodatage (par exemple, 09:05:11.518vs 2018-06-13T09:05:11.518Z)
• y compris repli dans le cas consoleou ses fonctions n'existent pas dans les navigateurs

.

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'

Je l'ai dans la plupart des applications Node.JS. Cela fonctionne également dans le navigateur.

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

Solution ES6:

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

où timestamp()renvoie l'horodatage réellement formaté et logajoute un horodatage et propage tous ses propres arguments àconsole.log

Un raffinement sur la réponse 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);
    }
};

Ce:

• affiche les horodatages en millisecondes
• suppose une chaîne de format comme premier paramètre .log