Кажется, что атрибут charset для тега скрипта не устарел в HTML5 (он устарел только для тегов a и link).
В Chrome есть опция «Настройки консоли» («Инструменты разработчика» -> «Консоль» -> «Настройки» [верхний правый угол]) с именем «Показать метки времени», и это именно то, что мне нужно.
Я только что нашел это. Никакие другие грязные хаки не нужны, которые уничтожают заполнители и стирают место в коде, откуда сообщения были зарегистрированы.
Параметр «Показать метки времени» был перемещен на панель «Настройки» раздела «Настройки DevTools», расположенного в верхнем правом углу панели DevTools:
Вы можете использовать профилировщик Dev Tools.
console.time('Timer name');
//do critical time stuff
console.timeEnd('Timer name');
«Имя таймера» должно быть одинаковым. Вы можете использовать несколько экземпляров таймера с разными именами.
Первоначально я добавил это в качестве комментария, но я хотел добавить скриншот, так как по крайней мере один человек не мог найти эту опцию (или, возможно, она не была доступна в их конкретной версии по какой-то причине).
В Chrome 68.0.3440.106 (и теперь проверено в 72.0.3626.121) мне пришлось
Я конвертирую arguments
в Array , используя Array.prototype.slice
, чтобы я мог concat
с другим Array того, что я хочу добавить, затем передать его в 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, вы можете использовать chrome console api:
Истекшее время между этими двумя вызовами отображается в консоли.
Для получения подробной информации см. Ссылку на документацию: https://developers.google.com/chrome-developer-tools/docs/console
.Из Chrome 68:
«Показать метки времени» перенесено в настройки
Ранее флажок «Показать метки времени» в «Настройки консоли» Настройки консоли был перенесен в Настройки .
Попробуйте также:
this.log = console.log.bind( console, '[' + new Date().toUTCString() + ']' );
Эта функция помещает метку времени, имя файла и номер строки в то же самое из встроенного console.log
.
Это добавляет функцию «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.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
Попробуйте:
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);
}
}
};
[1112]
Выходы с что:
PS: протестировано только в Chrome.
П.П.С .: Array.prototype.slice
здесь не идеален, поскольку она будет записана как массив объектов, а не как ряд объектов.
У меня это есть в большинстве приложений 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);
}
Если вы хотите сохранить информацию о номере строки (каждое сообщение указывает на свой вызов .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 не работает, вам следует вернуться к функции-оболочке, которая каждый раз получает новую метку времени. (В этом случае вы потеряете информацию о номере строки, но отметки времени все равно будут отображаться.)
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); }
расширили очень хорошее решение «с форматной строкой» из 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'