console.log中的时间戳在Chrome中?
是否有任何快速的方式让Chrome浏览器输出console.log
写入时间戳(就像Firefox一样)。 或者是预先添加new Date().getTime()
唯一的select?
在Chrome中,可以select名为“显示时间戳”的控制台设置(开发工具 – >控制台 – >设置[右上angular]),这正是我所需要的。
我刚刚find了。 没有其他肮脏的黑客需要破坏占位符,并删除邮件login代码的地方。
尝试这个:
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); };
以不错的方式logging多个事物 (如对象树表示):
console.logCopy = console.log.bind(console); console.log = function() { if (arguments.length) { var timestamp = '[' + Date.now() + '] '; this.logCopy(timestamp, arguments); } };
使用格式string ( 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中testing。
PPS: Array.prototype.slice
在这里并不完美,因为它会被logging为一个对象数组,而不是一系列的对象。
您可以使用开发工具分析器。
console.time('Timer name'); //do critical time stuff console.timeEnd('Timer name');
“计时器名称”必须相同。 您可以使用不同名称的多个计时器实例。
如果您使用Google Chrome浏览器,则可以使用Chrome控制台API:
- console.time:在您想要启动计时器的代码中调用它
- console.timeEnd:调用它来停止计时器
这两个通话之间的时间间隔显示在控制台中。
有关详细信息,请参阅文档链接: https : //developers.google.com/chrome-developer-tools/docs/console
我使用Array.prototype.slice
将arguments
转换为Array,以便我可以与我想要添加的另一个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()
是获取时间戳的替代方法
试试这也是:
this.log = console.log.bind( console, '[' + new Date().toUTCString() + ']' );
此函数将时间戳,文件名和行号与内置的console.log
相同。
这样就可以使用任意数量的参数向本地作用域(使用this
)添加一个“log”函数:
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);
输出这样的东西:
[Mon,11 Mar 2013 16:47:49 GMT] Object {test:“log”}猴子42
如果要保留行号信息(每条消息指向它的.log()调用,而不是全部指向我们的包装),则必须使用.bind()
。 您可以通过console.log.bind(console, <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
你甚至可以使用Object.defineProperty(window, "log", ...)
通过简单的log()
而不是console.log()
来实现这个神奇的行为。
请参阅https://github.com/pimterry/loglevel,了解使用;.bind()
完成的安全控制台封装,并具有兼容性回退function。
请参阅https://github.com/eligrey/Xccessors以获取从;defineProperty()
到legacy __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); }
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); } };
这个:
- 以毫秒显示时间戳
- 假定一个格式string作为
.log
第一个参数