有没有办法过滤谷歌浏览器控制台中的输出？

Posted 2023-03-07

【中文标题】有没有办法过滤谷歌浏览器控制台中的输出？

【英文标题】：Is there a way to filter output in Google Chrome's console?

【发布时间】：2011-10-03 07:28:19

【问题描述】：

我目前正在玩的第 3 方页面的输出中有很多噪音，我想知道是否有办法过滤控制台上的输出。类似于 Logcat 的标志。有没有办法做到这一点？

编辑

我找到了一种方法来禁用导致最大噪音的输出。我在控制台上单击鼠标右键，然后禁用XMLHttpRequest Logging 选项。这不是我想要的，但这是我需要的。

【问题讨论】：

以什么方式过滤？喜欢按网站？

我正在开发一个输出到控制台的扩展，页面也输出到控制台...我想做类似console.log('extension', 'The message'); 并过滤输出所以我只看到用“扩展名”而不是整个输出标记的东西。编辑或按级别过滤：console.warn()、console.error()

我明白了。我认为 Chrome 中不存在该功能...

至于警告和错误，如果您正在运行开发通道，我在底部窗格中有过滤器按钮：i.imgur.com/0VN67.png

您可以使用控制台右上角的搜索框在错误消息中搜索特定文本。

【参考方案1】：

您可以使用正则表达式。

例如要排除单词browser-sync 我使用^((?!browser-sync).)*$。

另见here

---

Chrome 44.0.2403.125

【讨论】：

由于复选框Regex已经从最新的chrome中去掉了，我用/^((?!browser-sync).)*$/表示它是一个正则表达式。取自this answer。

在最近的版本中，您可以在要否定的单词前加上-，参见developers.google.com/web/updates/2017/08/…

【参考方案2】：

比上面的答案更进一步cmets..

进入控制台模式（Windows 上的 Control Shift J），输入：

console.nativeLog = console.log;

然后输入这个

console.log = function( a, b ) if(a=="extension") console.nativeLog( b ) 

第一行将本机实现保持在安全位置。 第二行几乎可以满足您的要求。

为我工作。

【参考方案3】：

我刚刚在博客上介绍了我的解决方案。我修改了 Ben Alman 的“ba-debug”库并制作了一个模块化的“Trace”对象，旨在用于不同的模块或代码区域（由您定义）。

基本用法：

   var _trace = new Trace('ModuleName');

然后，当您想要追踪任何级别的诊断时，您可以：

   _trace.error('error level message');
   _trace.warn('warning level message');
   _trace.info('information level message');
   _trace.log('log level message');
   _trace.debug('debug level message');

然后，在您的页面或控制台中，您可以这样做：

   Trace.traceLevel('ModuleName', Trace.Levels.warn); 

这是我的博客post 了解更多详细信息和 javascript 文件：

【参考方案4】：

如果您可以同时控制页面和扩展脚本，那么您可以通过自己的函数运行这两者。在该函数中，您现在可以控制输出。

var pageErrors = true;
var extErrors = true;

function outputToConsole(message, sender) 
   if (sender == 'page' && pageErrors)  console.write(message); 
   if (sender == 'ext' && extErrors)  console.write(message); 

你想记录的任何地方都用 outputToConsole() 替换 console.log

【讨论】：

很遗憾，我无法控制页面。

嗯，让我思考。在 SO 上检查一下。这家伙打开和关闭登录，甚至有一个例子。 ***.com/questions/1215392/…

感谢我的第一次赏金！您没有将我的帖子标记为答案的任何原因？

【参考方案5】：

这是我刚刚为解决相同问题而写的。与之前的答案相比，它的好处是可以正确处理console.log 的多个参数，并防止没有window.console.log 引发未捕获的异常。

(function()
    window.console = window.console||log:0;
    var nativeLog = window.console.log;
    window.console.log = function()  
        try 
            // these conditions find all console.log output
            // from bitcoinjs-0.1.3 but not much else
            // (who else ends an extremely short first parameter with a space?)
            if ((arguments.length == 2) 
              && (arguments[0].length <= 5) 
              && (arguments[0].slice(-2) === ': ')
            ) 
                return;
            ;
            nativeLog.apply(window.console, arguments);
         catch(e) ;
    ;
)();

【讨论】：

我不知道为什么有人贬低你，根据你的回答，我能够为向控制台发送垃圾邮件的过于冗长的第三方库创建一个很好的过滤器。当然，try-catch 块可能更清楚它的作用，但它的其余部分是金色的。

您可以省略异常处理（try 和 catch 行），但存在意外破坏代码的风险。如果您插入的任何代码（例如匹配本身）遇到了 console.log 的调用者看到的异常，那么您所做的事情是调用代码未按预期编写的。