确定是否在页面的任何位置调用了 Firebug 的 console.log()答案

【问题标题】：Determine if Firebug's console.log() was called anywhere on a page确定是否在页面的任何位置调用了 Firebug 的 console.log()
【发布时间】：2010-11-04 04:56:15
【问题描述】：

如果在页面的任何位置调用了 Firebug 的 console.log()，我希望能够以编程方式将 console 类添加到 <body> 标记。然后我可以在屏幕上放一些讨厌的信息来提醒我不要部署仍然在其中的语句的代码。

与 Eric Meyer 的 Diagnostic CSS 非常相似。

有可能吗？

【问题讨论】：

标签： javascript css debugging firebug

【解决方案1】：

嘿嘿嘿。这是一个容易犯的错误，不是吗。

选项 1：总是写 if(window.console) console.log(...); 而不仅仅是 console.log(..);

选项 2：

function mydebug(thingtodebug) {
    if(window.console) console.log(thingtodebug);
}

..那么请始终使用mydebug() 而不是console.log();。如果未定义控制台，您可以包含一个 else 子句，该子句会抛出一个警告框。

选项 3：

if(!window.console) {
    var console={
        log : function() {alert("Don't call console.log");}
    }
}

...这几乎完全符合您的要求。

问题在于，所有这些选项都涉及在您的实时系统中包含额外的代码，只是为了帮助您避免尴尬。（当然，如果你错过了那个警告框，那就更尴尬了！）

如果您想避免这种情况，更好的解决方案可能是使用单独的脚本来扫描您的代码中是否出现 console.log。您可以将此脚本作为部署过程的一部分运行。

希望对您有所帮助。

【讨论】：

if (console)如果没有加载会抛出错误，使用if (window.console)
这些是可以接受的解决方案，但不要忘记您将失去像 line-reporting (console.debug, console.error) 这样的功能，因为该行将始终作为第 2 行（或任何行）出现它在函数中打开）。您也无法传递可变数量的参数，例如：console.log(var1, var2, var3);

【解决方案2】：

这对我有用（使用 jQuery）：

$(document).ready(function() {
  var body = $('body'),
      console = window.console;

  console.debug = function() {
    if (!body.hasClass('console')) {
      body.addClass('console');
      console.debug = oldDebug;
    }
  }

  console.debug('foo');
});

它只会在第一次调用我们的自定义函数时添加类。然后将 console.debug 设置为原始函数。这就是 javascript 最酷的地方，您几乎可以覆盖所有内容 :)

【讨论】：

值得指出的是这段代码使用了 jQuery。没问题，但值得知道以防有人尝试但它不起作用。
当然。将其添加到我的答案中。有时我只是忘记了;-)
添加了一个纯javascript方法的问题：stackoverflow.com/questions/4091538/…
让我提醒您，这种方法只有在您在测试时执行每条代码路径时才会对您有所帮助。这不是很健壮，您很可能会从客户端执行您未测试的操作时收到错误。我会运行 grep 来寻找控制台。在将代码签入源代码控制之前，在 js 和 html 文件中，（或者如果您不使用源代码控制，则部署它）。同样，为什么要使用纯 js 方法？运行“在文件中查找”。

【解决方案3】：

这很简单。只需用您自己的覆盖默认控制台对象：

<!DOCTYPE html>
<html>
    <head>
        <title>Console Test</title>
        <script>
            var oldConsole = (typeof window.console === "object") ? window.console : null;
            var console = {
                log: function() {
                    oldConsole.log(arguments);
                    document.body.className = "console";
                    alert('applied class');
                }
            };
        </script>
    </head>
    <body>
        <input type="button" value="click me" onclick="console.log('this is a test');">
    </body>
</html&gt

Live example.

【讨论】：