Question

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

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

如何使用自己的功能覆盖Chrome中的console.log功能？

我已尝试创建Chrome扩展程序并且它有用 - 我可以覆盖console.log就扩展程序而言，但原始来源中对console.log的所有引用都没有改变。

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

Answer 1

不完全覆盖console.log，但如果您右键单击控制台输出中的任何一行，则可以选择过滤器＆gt;隐藏.js中的消息。它还允许您过滤掉404s等错误消息，即使您可以覆盖console.log，也可能无法执行此操作。

Answer 2

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

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

通过右键单击控制台消息行的白色（空白）部分并选择过滤器＆gt;来过滤掉特定源文件中的所有消息。隐藏来自foo.js的消息。
覆盖一个或多个控制台方法（就像您已经完成的那样）。此方法仅影响当前脚本上下文。 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);

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

如何覆盖Chrome中的console.log功能？

3 个答案: