Временные метки console.log в Chrome?

Есть ли какой-нибудь быстрый способ заставить Chrome выводить метки времени при console.logзаписи (как это делает Firefox). Или предваряет new Date().getTime()единственный вариант?

В Chrome есть опция «Настройки консоли» («Инструменты разработчика» -> «Консоль» -> «Настройки» [верхний правый угол]) с именем «Показать метки времени», и это именно то, что мне нужно.

Я только что нашел это. Никакие другие грязные хаки не нужны, которые уничтожают заполнители и стирают место в коде, откуда сообщения были зарегистрированы.

Обновление для Chrome 68+

Параметр «Показать метки времени» был перемещен на панель «Настройки» раздела «Настройки DevTools», расположенного в верхнем правом углу панели DevTools:

Попробуй это:

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

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

Или это, если вам нужна временная метка:

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

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

Для регистрации более чем одной вещи и хорошим способом (например, представление дерева объектов):

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

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

С форматной строкой ( 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);
        }
    }
};

Выходы с этим:

PS: проверено только в Chrome.

PPS: Array.prototype.sliceздесь не идеально, так как он будет записан как массив объектов, а не как ряд объектов.

Вы можете использовать профилировщик Dev Tools.

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

«Имя таймера» должно быть одинаковым. Вы можете использовать несколько экземпляров таймера с разными именами.

Первоначально я добавил это в качестве комментария, но я хотел добавить скриншот, так как по крайней мере один человек не мог найти эту опцию (или, возможно, она не была доступна в их конкретной версии по какой-то причине).

На Chrome 68.0.3440.106 (и теперь проверено в 72.0.3626.121) мне пришлось

• инструменты открытого разработчика (F12)
• щелкните меню из трех точек в правом верхнем углу
• нажмите настройки
• выберите Настройки в левом меню
• отметьте время показа в разделе консоли экрана настроек.

Преобразовать argumentsв массив , используя Array.prototype.sliceтак , что я могу concatс другим массивом того , что я хочу добавить, а затем передать его в 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"]

Кажется, это argumentsтоже можно Array.prototype.unshiftотредактировать, но я не знаю, хорошая ли это модификация, если это так, / будет иметь другие побочные эффекты

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 Dateи Date.now()альтернативные способы получить метки времени

Если вы используете браузер Google Chrome, вы можете использовать API консоли Chrome:

• console.time: вызовите его в том месте кода, где вы хотите запустить таймер
• console.timeEnd: вызвать его, чтобы остановить таймер

Истекшее время между этими двумя вызовами отображается в консоли.

Для получения подробной информации, пожалуйста, смотрите ссылку на документ: https://developers.google.com/chrome-developer-tools/docs/console

Из Chrome 68:

«Показать метки времени» перенесено в настройки

Флажок Show timestamps ранее в Console Settings Настройки консоли был перенесен в Настройки .

Попробуйте это также:

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

Эта функция помещает метку времени, имя файла и номер строки как встроенные console.log.

Если вы хотите сохранить информацию о номере строки (каждое сообщение указывает на свой вызов .log (), а не все указывает на нашу оболочку), вы должны использовать .bind() . Вы можете добавить дополнительный аргумент timestamp через, console.log.bind(console, <timestamp>)но проблема в том, что вам нужно повторять это каждый раз, чтобы получить функцию, связанную с новой меткой времени. Неловкий способ сделать это - функция, которая возвращает связанную функцию:

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

который затем должен использоваться с двойным вызовом:

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

НО мы можем сделать первый вызов неявным, установив свойство с помощью функции getter:

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

Теперь вы просто позвоните console.log(...) и автоматически добавляете метку времени!

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

Вы можете даже достигнуть этого волшебного поведения с простым log()вместоconsole.log() , чтобы делать Object.defineProperty(window, "log", ...).

Видеть Https://github.com/pimterry/loglevel для хорошо выполненного безопасного использования оболочки консоли .bind()с ошибками совместимости.

См. Https://github.com/eligrey/Xccessors, чтобы узнать о возможностях восстановления совместимости сdefineProperty() устаревшим __defineGetter__API. Если ни одно из свойств API не работает, вам следует вернуться к функции-оболочке, которая каждый раз получает новую метку времени. (В этом случае вы потеряете информацию о номере строки, но отметки времени все равно будут отображаться.)

Boilerplate: форматирование времени так, как мне нравится:

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

Это добавляет функцию «log» в локальную область (используя this), используя столько аргументов, сколько вы хотите:

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

Так что вы можете использовать это:

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

Выводит что-то вроде этого:

[Пн, 11 марта 2013 16:47:49 GMT] Object {test: "log"} monkey 42

расширил очень хорошее решение "с форматной строкой" от JSmyth, чтобы также поддерживать

• все другие console.logварианты ( log, debug, info, warn, error)
• включая параметр гибкости строки метки времени (например, 09:05:11.518против2018-06-13T09:05:11.518Z )
• включая запасной вариант в случае, если consoleего функции не существуют в браузерах

,

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'

У меня есть это в большинстве приложений Node.JS. Это также работает в браузере.

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

Решение ES6:

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

где timestamp()возвращает фактически отформатированную временную метку, logдобавляет временную метку и передает все собственные аргументыconsole.log

Уточнение ответа 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);
    }
};

Это:

• показывает метки времени с миллисекундами
• принимает строку формата в качестве первого параметра .log