为什么在 Chrome 的某些网站上 console.log 是一个空函数？答案

【问题标题】：Why is console.log an empty function on some sites in Chrome?为什么在 Chrome 的某些网站上 console.log 是一个空函数？
【发布时间】：2012-09-26 23:09:21
【问题描述】：

转到 Twitter 的登录页面并在控制台中输入以下内容：

window.addEventListener('keypress', function(e){console.log('hello')}, true)

（注意：如何将第三个参数设置为true 以启用事件捕获。这会导致事件在被子元素消费之前首先被窗口拦截。）

尝试按一些键。注意hello 没有输出到控制台。为keydown 或keyup 添加事件监听器不会改变任何事情。

hello 将在大多数网站上获得输出，但不会在 Twitter 或 Gmail 等网站上获得输出。

为什么？是什么阻止了事件侦听器？

编辑：似乎在 Firefox 上按预期工作。但不是铬。为什么 Chrome 没有按预期触发事件侦听器？

编辑 2：正如下面一些人所推断的，console.log 是 Chrome 上的一个空函数，用于 Twitter 和 Gmail 等网站。这是为什么呢？

【问题讨论】：

你不应该把它添加到document而不是window吗？
他们可能正在使用keydown 取消某些键的事件。
为什么？（这仍然不能解决问题。）
呃，在 cmets 上有点竞争条件（我正在回复 Bergi 的原始评论。）
我没有这个问题。在 Gmail 和 Twitter 的登录页面中都正确调用了处理函数。确保您在测试中专注于 firebug（或您正在使用的任何开发控制台）。

标签： javascript events event-handling dom-events

【解决方案1】：

因为那些网站已经专门设置了（显然是针对 webkit）：

console.log = function(){};

但是，在 Chrome 中，您可以通过在控制台中发出以下命令来恢复原始 log() 功能：

console.log = console.__proto__.log

那么你可以这样做：

window.addEventListener('keypress', function(e){console.log('hello')}, true)

它应该按预期工作。

【讨论】：

这似乎不是问题。我对原始帖子进行了编辑以澄清 - 即使打开了事件捕获，仍然没有调用监听器。
已经在另一篇文章中问过这个问题：但是为什么 console.log 在 Chrome 上是一个空函数，而在 Firefox 上却不是？
但这并不是在所有网站上都可以重现的。例如，Google.com（在 Chrome 中）每次点击都会输出hello。
啊。所以 Twitter 只清空了 Webkit 上的功能。奇怪。
但是为什么？为什么网站会故意破坏开发工具？

【解决方案2】：

从 iframe 中获取：

function setConsole() {
  var iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  document.body.appendChild(iframe);
  console = iframe.contentWindow.console;
  window.console = console;
}

（然后调用它）

setConsole()

来源：https://gist.github.com/cowlicks/a3bc662b38c36483b35f74b2b54e37c0

【讨论】：

【解决方案3】：

开发人员喜欢将console.log() 语句放入他们的代码中以进行故障排除/调试。有时，他们在签入生产代码时忘记将它们全部取出。一个简单的预防措施是在生产代码中将console.log()重新定义为一个不执行任何操作的空函数，因此即使开发人员不小心将其留在其中，它也不会导致任何输出或在没有console时抛出异常不运行调试器时的对象（如在 IE 中）。

某些浏览器可能会通过将其设为只读以防止以这种方式覆盖该函数来防止替换该函数，但如果他们这样做，则控制台对象必须存在，因此仍然没有任何危害偶尔console.log() 声明。这些剩余的console.log() 语句的主要危害在于在 IE 中，它会导致抛出异常，因为除非正在运行调试器，否则 console 对象不存在。

【讨论】：

除了我可以在 Firefox 上手动覆盖 console.log 也很好。所以它不能是特定于浏览器的东西 - 它必须是专门针对 Webkit 的 Twitter（如佳能所述）
他们可以在生产代码中添加一个空函数，但他们不能删除日志语句？这些是一些愚蠢的开发人员。你认为这真的是原因吗？

【解决方案4】：

console.log 有问题。试试这个：

window.addEventListener('keypress', function(e){alert('hello')}, true)

【讨论】：

有趣。在这种情况下，console.log 是否永远被淹没？有没有办法找回它的原始功能？
这仍然让我感到困惑。为什么在 Chrome 上 console.log 是一个空函数，而在 Firefox 上却不是？

【解决方案5】：

Firefox 不会出现此问题。

我在 Chrome 上进行了检查，显然由于某种原因，Gmail 和 Twitter 页面最终将 console.log 重新分配给了一个空函数 function () {}，所以你的处理程序被调用但它什么也没做。如果您尝试使用alert() 而不是console.log，您会看到它工作正常。

有趣。

【讨论】：

@jfriend00，这听起来像是正确的答案。
@Matm - 好的，我将该评论放入答案并删除了我的评论。
@jfriend00，呃，除了我也可以在 Firefox 上手动覆盖 console.log。它不能是特定于浏览器的东西 - 它必须是专门针对 Webkit 的 Twitter（如 canon 所述）。