Znaczniki czasu console.log w Chrome?

Czy istnieje jakiś szybki sposób, aby Chrome wyświetlał znaczniki czasu podczas console.logzapisywania (podobnie jak Firefox). Czy też new Date().getTime()przygotowywanie jedynej opcji?

W Chrome dostępna jest opcja Ustawienia konsoli (Narzędzia dla programistów -> Konsola -> Ustawienia [prawy górny róg]) o nazwie „Pokaż znaczniki czasu”, co jest dokładnie tym, czego potrzebowałem.

Właśnie to znalazłem. Nie są potrzebne żadne inne brudne włamania, które niszczą symbole zastępcze i usuwają miejsce w kodzie, z którego wiadomości zostały zarejestrowane.

Aktualizacja dla Chrome 68+

Ustawienie „Pokaż znaczniki czasu” zostało przeniesione do panelu Preferencje w „Ustawieniach DevTools”, znajdującym się w prawym górnym rogu szuflady DevTools:

Spróbuj tego:

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

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

Lub to, jeśli chcesz znacznik czasu:

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

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

Aby zarejestrować więcej niż jedną rzecz i ładnie (np. Reprezentacja drzewa obiektów):

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

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

Z ciągiem formatu ( 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);
        }
    }
};

Wytwarza z tym:

PS: Testowane tylko w Chrome.

PPS: Array.prototype.slicenie jest tutaj idealny, ponieważ byłby rejestrowany jako tablica obiektów, a nie szereg.

Możesz użyć narzędzia do tworzenia profilów dla programistów.

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

„Nazwa timera” musi być taka sama. Możesz użyć wielu wystąpień timera o różnych nazwach.

Pierwotnie dodałem to jako komentarz, ale chciałem dodać zrzut ekranu, ponieważ co najmniej jedna osoba nie mogła znaleźć opcji (a może z jakiegoś powodu nie była dostępna w ich konkretnej wersji).

W Chrome 68.0.3440.106 (a teraz zalogowany w 72.0.3626.121) musiałem

• narzędzia open dev (F12)
• kliknij menu z trzema kropkami w prawym górnym rogu
• kliknij ustawienia
• wybierz Preferencje w menu po lewej stronie
• zaznacz opcję pokaż znaczniki czasu w sekcji Konsola na ekranie ustawień

Konwertuję argumentsna Array za pomocą, Array.prototype.sliceaby móc concatz innym Array tego, co chcę dodać, a następnie przekazać do 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"]

Wydaje się, że argumentsmożna to Array.prototype.unshiftrównież edytować, ale nie wiem, czy modyfikowanie go w ten sposób jest dobrym pomysłem / będzie miało inne skutki uboczne

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 Datei Date.now()są alternatywnymi sposobami uzyskiwania znaczników czasu

Jeśli używasz przeglądarki Google Chrome, możesz użyć interfejsu API konsoli Chrome:

• console.time: wywołaj go w punkcie kodu, w którym chcesz uruchomić stoper
• console.timeEnd: wywołaj go, aby zatrzymać stoper

Czas, jaki upłynął między tymi dwoma połączeniami, jest wyświetlany w konsoli.

Aby uzyskać szczegółowe informacje, zobacz link do dokumentu: https://developers.google.com/chrome-developer-tools/docs/console

Z Chrome 68:

„Pokaż znaczniki czasu” przeniesiono do ustawień

Pole wyboru Pokaż znaczniki czasu poprzednio w Ustawieniach konsoli Ustawienia konsoli zostały przeniesione do Ustawień .

Spróbuj również:

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

Ta funkcja umieszcza znacznik czasu, nazwę pliku i numer wiersza tak samo jak wbudowany console.log.

Jeśli chcesz zachować informacje o numerze linii (każdy komunikat wskazujący na jego wywołanie .log (), a nie wszystkie wskazujące na nasze opakowanie), musisz użyć .bind(). Możesz wstawić dodatkowy argument znacznika czasu za pomocą, console.log.bind(console, <timestamp>)ale problem polega na tym, że musisz go ponownie uruchomić za każdym razem, aby uzyskać funkcję związaną ze świeżym znacznikiem czasu. Niezręcznym sposobem na to jest funkcja, która zwraca funkcję powiązaną:

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

który następnie musi być użyty z podwójnym wywołaniem:

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

ALE możemy wykonać pierwsze połączenie niejawnie, instalując właściwość z funkcją getter:

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

Teraz po prostu zadzwoń console.log(...)i automatycznie przygotuje znacznik czasu!

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

Możesz nawet osiągnąć to magiczne zachowanie za pomocą prostego log()zamiast console.log()robić Object.defineProperty(window, "log", ...).

Zobacz https://github.com/pimterry/loglevel, aby zapoznać się z dobrze wykonanym bezpiecznym owijaniem konsoli .bind()z obsługą błędów zgodności.

Zobacz https://github.com/eligrey/Xccessors, aby zapoznać się z awariami zgodności z defineProperty()wcześniejszymi __defineGetter__interfejsami API. Jeśli żaden interfejs API właściwości nie działa, należy powrócić do funkcji opakowania, która za każdym razem otrzymuje nowy znacznik czasu. (W takim przypadku tracisz informacje o numerze linii, ale znaczniki czasu będą nadal wyświetlane).

Boilerplate: Formatowanie czasu tak, jak lubię:

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

Dodaje to funkcję „logowania” do zakresu lokalnego (przy użyciu this) przy użyciu dowolnej liczby argumentów:

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

Możesz więc z niego korzystać:

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

Wyprowadza coś takiego:

[Pon, 11 marca 2013 16:47:49 GMT] Obiekt {test: "log"} małpa 42

rozszerzyło bardzo przyjemne rozwiązanie „z ciągiem formatu” z JSmyth o obsługę

• Wszystkie inne console.logzmiany ( log, debug, info, warn, error)
• w tym parametr elastyczności ciągu znacznika czasu (np. 09:05:11.518vs. 2018-06-13T09:05:11.518Z)
• w tym awaryjne w przypadku, gdy consolejego funkcje nie istnieją w przeglądarkach

.

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'

Mam to w większości aplikacji Node.JS. Działa również w przeglądarce.

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

Rozwiązanie ES6:

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

gdzie timestamp()zwraca faktycznie sformatowany znacznik czasu i logdodaje znacznik czasu i propaguje wszystkie własne argumentyconsole.log

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

To:

• pokazuje znaczniki czasu z milisekundami
• przyjmuje ciąg formatu jako pierwszy parametr do .log