часові позначки 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тут не є ідеальним, тому що він би записувався як масив об'єктів, а не як ряд цих.

Можна скористатися інструментами для розробників.

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

"Назва таймера" має бути однаковою. Ви можете використовувати кілька примірників таймера з різними іменами.

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

На Chrome 68.0.3440.106 (а зараз це зареєстровано у 72.0.3626.121) мені довелося

• відкриті інструменти для розробників (F12)
• натисніть на триточне меню вгорі праворуч
• натисніть Налаштування
• виберіть Налаштування в лівому меню
• перевірте показ часових позначок у розділі Консоль на екрані налаштувань

Я перетворюю argumentsв Array, використовуючи 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:

• console.time: зателефонуйте їй у точку коду, де ви хочете запустити таймер
• console.timeEnd: зателефонуйте, щоб зупинити таймер

Пройдений час між цими двома дзвінками відображається на консолі.

Щоб отримати детальну інформацію, перегляньте посилання на документ: https://developers.google.com/chrome-developer-tools/docs/console

З Chrome 68:

"Показати часові позначки" переміщено до налаштувань

Поставити прапорець Показувати часові позначки раніше в налаштуваннях консолі Налаштування консолі переміщено до Налаштування .

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

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

Ця функція ставить часові позначки, ім'я файлу та номер рядка як однакові вбудовані console.log.

Якщо ви хочете зберегти інформацію про номер рядка (кожне повідомлення, що вказує на його .log () виклик, не все вказує на нашу обгортку), вам потрібно скористатися .bind(). Ви можете додати додатковий аргумент часової позначки через, 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 власності не працює, вам слід повернутись до функції обгортки, яка щоразу отримує свіжу мітку часу. (У цьому випадку ви втрачаєте інформацію про номер рядка, але часові позначки все одно відображатимуться.)

Бойлер: Час форматування так, як мені подобається:

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] Об’єкт {test: "log"} мавпа 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

Уточнення відповіді Дж. Сміта:

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