javascript - javascript 中 console.log 的实际拦截器

Question

对于 js console.log 拦截器的通常建议 ( Capturing javascript console.log? ) 在两个方面都有不足，都很严重:

(i) 实际浏览器控制台中的所有调用现在似乎来自同一行 - 定义新函数的地方 - 而不是调用完成的地方

(ii) 截获的参数尚未按照 console.log 的方式格式化(即 % 替换好东西，%o，特别是):

(function() {
  function send_stuff(){ /* Deal with console arguments. */ }
  
  var oldLog=console.log;
  console.log=function(msg) {
    oldLog.apply(this,arguments);
    send_stuff(Array.prototype.slice.call(arguments).join());
  }
}())

console.log("test");
console.log("Hello %s", "Bob");
console.log("Here is an object %o", { stuff: "thing" });

也许已经设计出更好的东西(例如，能够捕获 console.log 的实际缓冲区内容的东西)。

编辑: 为了澄清多参数失败:除了扩展文件/行信息之外，console.log 还对 % 序列进行了一些巧妙的替换 - a-la-printf。特别感兴趣的是 %o 序列，其中扩展了后续对象的深度转储，并被浏览器的控制台窗口充分利用。这是无法复制的，除非有人愿意从根本上重新实现其逻辑(不必要并且很可能是低效的)

干杯，

Answer 1

看起来 console.log 的行为发生了一点变化，现在掩码正在工作，但您仍然得到 oldLog.apply(this,arguments); 在控制台中。您可以做的一件事是改用 console.error，这将显示调用堆栈，您可以使用它来查看最初调用修改后的日志方法的行。

另一种解决方案是抛出错误以从调用堆栈中获取行号，如下所示

(function () {

  function origin() {
    try {
      throw Error('');
    } catch (err) {
      return err.stack.split('\n').slice(-1)[0];
    }
  }

  function send_stuff() { /* Deal with console arguments. */ }

  var oldLog = console.log;
  console.log = function (msg) {
    oldLog.call(this, ...arguments, origin());
    send_stuff(Array.prototype.slice.call(arguments).join());
  };

})();

console.log("test");
console.log("Hello %s", "Bob");
console.log("Here is an object %o", {
  stuff: "thing"
});