如何覆盖 Chrome 中的 console.log 函数？

Question

我正在开发一个使用许多不同框架和自定义脚本（jQuery、Backbone、Bootstrap、Less 等等）的 Web 应用程序，其中任何一个都可能随时打印控制台输出。一些输出来自我刚才提到的框架，其他输出来自之前从事产品工作的工程师在代码中留下的 console.log 调用。

这是一个问题，因为所有数十行额外输出与有效输出混合在一起，并且很难解析所有这些行以检查我的有效输出是否正常工作。我想要一个临时解决方案来覆盖 Chrome 中的 console.log 函数，以便我可以过滤掉某些消息并专注于我关心的输出。

如何用自己的函数覆盖 Chrome 中的 console.log 函数？

我已经尝试创建一个 Chrome 扩展程序并且它有点工作 - 就扩展程序而言，我能够覆盖 console.log，但原始源中对 console.log 的所有引用都没有改变。

编辑：为了清楚起见，我不是寻找另一个脚本来添加到网站。我正在寻找一种完全在网络浏览器中实现的解决方案，或者不涉及更改在网络应用程序中下载的源代码的其他技术。

Answer 1

不完全覆盖console.log，但如果您右键单击控制台输出中的任何行，您可以选择过滤器 > 隐藏来自 .js 的消息。它还可以让您过滤掉 404 等错误消息，即使您可以覆盖 console.log，您也可能无法做到。

Answer 2

Firefox 拥有来自 about:config 的 a way to change the console logging level for specific extensions。

Chrome 没有此功能。您的选择：

1. 通过右键单击控制台消息行的白色（空白）部分并选择Filter > Hide Messages from foo.js，过滤掉来自特定源文件的所有消息。
2. 覆盖一个或多个控制台方法（正如您已经完成的那样）。这种方法只影响当前的脚本上下文。 Chrome 扩展在它们自己的isolated worlds 中运行，带有它们自己的窗口对象、全局范围和控制台对象。您需要在每个扩展程序的执行上下文中粘贴并运行更改控制台的脚本，并且您的修改仅在页面卸载之前生效。您可以使用控制台底部显示 <page context> 的下拉菜单更改控制台的有效执行上下文。请注意，页面中的任何框架或 iframe 也有自己的执行上下文，可使用框架下拉菜单访问（最初设置为 <top frame>）。

Answer 3

log是console对象的一个​​函数，你可以这样覆盖它：

var logFn = console.log;  // save the original log function for later use
console.log = function(msg) {
    ...
    logFn.call(console, msg); // call original function if you want to
};

或者，使用闭包来保存旧的日志函数：

console.log = (function(logFn) {
    return function(msg) {
        ...
        logFn.call(console, msg); // call original function if you want to
    };
})(console.log);

您需要尽早执行此操作，因为您希望其他框架/库使用自定义日志功能。