Konsolen.log-Zeitstempel in Chrome?

Gibt es eine schnelle Möglichkeit, Chrome dazu zu bringen, Zeitstempel in console.logSchreibvorgängen auszugeben (wie es Firefox tut) ? Oder ist das Voranstellen new Date().getTime()die einzige Option?

In Chrome gibt es die Option "Konsoleneinstellungen" (Entwicklertools -> Konsole -> Einstellungen [obere rechte Ecke]) mit dem Namen "Zeitstempel anzeigen", die genau das ist, was ich brauchte.

Ich habe es gerade gefunden. Es sind keine weiteren schmutzigen Hacks erforderlich, die Platzhalter zerstören und die Stelle im Code löschen, von dem aus die Nachrichten protokolliert wurden.

Update für Chrome 68+

Die Einstellung "Zeitstempel anzeigen" wurde in den Bereich "Einstellungen" der "DevTools-Einstellungen" in der oberen rechten Ecke der DevTools-Schublade verschoben:

Versuche dies:

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

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

Oder dies, falls Sie einen Zeitstempel wünschen:

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

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

Um sich einzuloggen mehr als eine Sache und in einer netten Art und Weise (wie Objektbaumdarstellung):

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

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

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

Ausgaben damit:

PS: Nur in Chrome getestet.

PPS: Array.prototype.sliceist hier nicht perfekt, da es als Array von Objekten und nicht als Serie von Objekten protokolliert wird.

Sie können den Dev Tools Profiler verwenden.

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

"Timername" muss identisch sein. Sie können mehrere Instanzen von Timern mit unterschiedlichen Namen verwenden.

Ich habe dies ursprünglich als Kommentar hinzugefügt, wollte aber einen Screenshot hinzufügen, da mindestens eine Person die Option nicht finden konnte (oder sie aus irgendeinem Grund in ihrer jeweiligen Version nicht verfügbar war).

Auf Chrome 68.0.3440.106 (und jetzt in 72.0.3626.121 eingecheckt) musste ich

• offene Entwicklungswerkzeuge (F12)
• Klicken Sie oben rechts auf das Dreipunktmenü
• Klicken Sie auf Einstellungen
• Wählen Sie im linken Menü Einstellungen
• Aktivieren Sie im Abschnitt "Konsole" des Einstellungsbildschirms die Option "Zeitstempel anzeigen"

Ich konvertiere argumentsin Array mit, Array.prototype.slicedamit ich concatmit einem anderen Array von dem, was ich hinzufügen möchte, es dann übergeben kann 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"]

Es scheint, dass argumentsdies auch Array.prototype.unshiftbearbeitet werden kann, aber ich weiß nicht, ob eine solche Änderung eine gute Idee ist / andere Nebenwirkungen haben wird

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 Dateund Date.now()sind alternative Möglichkeiten, um Zeitstempel zu erhalten

Wenn Sie den Google Chrome-Browser verwenden, können Sie die Chrome Console-API verwenden:

• console.time: Rufen Sie es an der Stelle in Ihrem Code auf, an der Sie den Timer starten möchten
• console.timeEnd: Rufen Sie es auf, um den Timer zu stoppen

Die zwischen diesen beiden Anrufen verstrichene Zeit wird in der Konsole angezeigt.

Weitere Informationen finden Sie unter dem Link zum Dokument: https://developers.google.com/chrome-developer-tools/docs/console

Aus Chrome 68:

"Zeitstempel anzeigen" wurde in die Einstellungen verschoben

Die anzeigen Zeitstempel Checkbox zuvor in Konsoleneinstellungen Konsoleneinstellungen werden verschoben Einstellungen .

Versuchen Sie dies auch:

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

Mit dieser Funktion werden Zeitstempel, Dateiname und Zeilennummer mit dem integrierten Wert identisch console.log.

Wenn Sie die Zeilennummerninformationen beibehalten möchten (jede Nachricht, die auf ihren .log () -Aufruf verweist, nicht alle auf unseren Wrapper), müssen Sie verwenden .bind(). Sie können ein zusätzliches Zeitstempel-Argument über voranstellen. console.log.bind(console, <timestamp>)Das Problem besteht jedoch darin, dass Sie dieses Argument jedes Mal erneut ausführen müssen, um eine Funktion mit einem neuen Zeitstempel zu verknüpfen. Ein umständlicher Weg, dies zu tun, ist eine Funktion, die eine gebundene Funktion zurückgibt:

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

was dann mit einem doppelten Aufruf verwendet werden muss:

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

ABER wir können den ersten Aufruf implizit machen, indem wir eine Eigenschaft mit der Getter-Funktion installieren :

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

Jetzt rufen Sie einfach an console.log(...)und es wird automatisch ein Zeitstempel vorangestellt!

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

Sie können dieses magische Verhalten sogar mit einem einfachen log()statt console.log()durch Tun erreichen Object.defineProperty(window, "log", ...).

Unter https://github.com/pimterry/loglevel finden Sie einen gut gemachten sicheren Konsolen-Wrapper .bind()mit Kompatibilitäts-Fallbacks.

Unter https://github.com/eligrey/Xccessors finden Sie Kompatibilitätsrückschläge von defineProperty()der Legacy- __defineGetter__API. Wenn keine der Eigenschaften-APIs funktioniert, sollten Sie auf eine Wrapper-Funktion zurückgreifen, die jedes Mal einen neuen Zeitstempel erhält. (In diesem Fall verlieren Sie die Zeilennummerninformationen, aber die Zeitstempel werden weiterhin angezeigt.)

Boilerplate: Zeitformatierung nach meinen Wünschen:

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

Dadurch wird dem lokalen Bereich eine "Protokoll" -Funktion hinzugefügt (unter Verwendung this), wobei so viele Argumente verwendet werden, wie Sie möchten:

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

So können Sie es verwenden:

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

Gibt ungefähr so ​​aus:

[Mon, 11 Mar 2013 16:47:49 GMT] Objekt {test: "log"} Affe 42

erweiterte die sehr schöne Lösung "mit Formatzeichenfolge " von JSmyth auf Unterstützung

• alle anderen console.logVariationen ( log, debug, info, warn, error)
• einschließlich Zeitstempel-String-Flexibilitätsparameter (z. B. 09:05:11.518vs. 2018-06-13T09:05:11.518Z)
• einschließlich Fallback für den Fall consoleoder seine Funktionen sind in Browsern nicht vorhanden

.

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'

Ich habe dies in den meisten Node.JS-Apps. Es funktioniert auch im Browser.

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

ES6-Lösung:

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

Dabei werden timestamp()tatsächlich formatierte Zeitstempel zurückgegeben log, ein Zeitstempel hinzugefügt und alle eigenen Argumente an weitergegebenconsole.log

Eine Verfeinerung der Antwort von 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);
    }
};

Dies:

• zeigt Zeitstempel mit Millisekunden
• nimmt eine Formatzeichenfolge als ersten Parameter an .log