javascript - 包装 `console.log` 并保留调用堆栈

Question

在我的日志记录助手类中，我有以下内容:

this.myInfo = console.info.bind(console);

当我从其他地方调用 myInfo 函数时，调用对象和行号会正确保留并记录在 Chrome 开发工具中。

当我运行 myInfo 时，除了 console.info 之外，我还想运行另一个本地函数。因此，我想我可以把上面的内容包装起来就可以了。我提出了以下建议:

var obj = this;
this.myInfo = (function() {
    console.info.apply(this, arguments);
    myOtherFunc.apply(obj, arguments);
}).bind(console);

问题是，与我的第一个示例不同，我丢失了 console.info 的调用上下文，并且在 devTools 中记录了错误的行号和文件。

如何包装第一个示例并保留 console.info 的正确上下文？

Answer 1

您可以使用 setter/getter 。在 getter 中，您调用其他函数，然后将 console.info.bind(console) 返回给调用者。

Object.defineProperty(this, "myInfo", { get: function () { 
  myOtherFunc();
  return console.info.bind(console); 
}});

如果传递参数。您可以定义以下函数:

this.myInfo = function()
{
  myOtherFunc.apply(null, arguments);
  return console.bind.apply(console, arguments);
}
// example of call
this.myInfo(1,2,3)();

我有新的解决方案。您可以在单独的 JS 文件中实现 console.log 包装器，或者使用 sourceURL 对其进行评估，然后转到 Chrome DevTools 设置并将“console-wrapper.js”url 添加到黑盒模式或在第一条消息到达控制台时通过链接将此脚本黑盒。 当脚本被黑盒化时，所有消息都将在源代码中具有正确的位置。 它可以在最新的 Google Chrome Canary 版本中运行，并将在大约两个月内提供稳定版。

eval("\
function myAwesomeConsoleLogWrapper() {\
  console.log.call(console, arguments);\
  makeAnotherWork();\
}\
//# sourceURL=console-wrapper.js");