Есть ли какой-либо быстрый способ заставить Chrome выводить метки времени в console.log записи (например, Firefox). Или добавляет new Date().getTime() единственный вариант?
Временные метки console.log в Chrome?
Ответ 1
В Chrome есть опция "Настройки консоли" ("Инструменты разработчика" → "Консоль" → "Настройки" [верхний правый угол]) с именем "Показать метки времени", и это именно то, что мне нужно.
Я только что нашел это. Никакие другие грязные хаки не нужны, которые уничтожают заполнители и стирают место в коде, откуда сообщения были зарегистрированы.
Обновление для Chrome 68+
Параметр "Показать метки времени" был перемещен на панель "Настройки" раздела "Настройки DevTools", расположенного в верхнем правом углу панели DevTools:
Ответ 2
Попробуйте следующее:
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);
}
}
};
Выводит с этим:
P.S.: Протестировано только в Chrome.
P.P.S.: Array.prototype.slice здесь не идеальна, поскольку он будет регистрироваться как массив объектов, а не ряд из них.
Ответ 3
Вы можете использовать профилировщик dev tools.
console.time('Timer name');
//do critical time stuff
console.timeEnd('Timer name');
"Имя таймера" должно быть одинаковым. Вы можете использовать несколько экземпляров таймера с разными именами.
Ответ 4
Я конвертирую 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 ed, но я не знаю, может ли его изменение так хорошо идея/будет иметь другие побочные эффекты
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"]
Ответ 5
Первоначально я добавил это в качестве комментария, но я хотел добавить скриншот, так как по крайней мере один человек не мог найти эту опцию (или, возможно, она не была доступна в их конкретной версии по какой-то причине).
На Chrome 68.0.3440.106 (и теперь проверено в 72.0.3626.121) мне пришлось
- инструменты открытого разработчика (F12)
- щелкните трехточечное меню в правом верхнем углу
- нажмите настройки
- выберите Настройки в левом меню
- отметьте время показа в разделе консоли экрана настроек
Ответ 6
+new Date и Date.now() являются альтернативными способами получения временных меток
Ответ 7
Если вы используете браузер Google Chrome, вы можете использовать хром-консоль api:
- console.time: вызовите его в точке вашего кода, где вы хотите запустить таймер
- console.timeEnd: вызвать его, чтобы остановить таймер
Истекшее время между этими двумя вызовами отображается на консоли.
Подробную информацию см. в документации по doc: https://developers.google.com/chrome-developer-tools/docs/console
Ответ 8
Из Chrome 68:
"Показать метки времени" перенесено в настройки
Флажок Show timestamps ранее в Console Settings Настройки консоли был перенесен в Настройки.
Ответ 9
Попробуйте также:
this.log = console.log.bind( console, '[' + new Date().toUTCString() + ']' );
Эта функция помещает отметку времени, имя файла и номер строки как встроенную console.log.
Ответ 10
Это добавляет функцию "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
Ответ 11
Если вы хотите сохранить информацию о номере линии (каждое сообщение, указывающее на вызов .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...")
НО мы можем сделать первый вызов неявным, установив property с функцией 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); }
Ответ 12
расширен очень хорошее решение "с форматной строкой" от 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: /questions/46318/consolelog-timestamps-in-chrome/329930#329930 */
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'
Ответ 13
У меня есть это в большинстве приложений 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);
}
Ответ 14
Уточнение ответа 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