為什么在 Chrome 中的某些站點上，console.log 是一個空函數？

Question

轉到 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 等網站的一個空函數。 這是為什么？

Answer 1

因為這些網站已經專門設置（顯然是針對 webkit）：

console.log = function(){};

但是，在 Chrome 中，您可以通過在控制台中發出以下命令來恢復原始log()功能：

console.log = console.__proto__.log

然后你可以這樣做：

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

它應該按預期工作。

Answer 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

Answer 3

開發人員喜歡將console.log()語句放在他們的代碼中以進行故障排除/調試。 有時，他們在檢查生產代碼時忘記將它們全部取出。 一個簡單的保護措施是將生產代碼中的console.log()重新定義為一個不做任何事情的空函數，因此即使開發人員不小心留下了一個，它也不會在沒有console的情況下導致任何輸出或拋出異常不運行調試器時的對象（如在 IE 中）。

一些瀏覽器可能會通過將其設置為只讀來防止替換該函數，這樣它就不能以這種方式被覆蓋，但如果他們這樣做，那么控制台對象必須存在，這樣偶爾出現的console.log()仍然沒有危害console.log()語句。 這些剩余的console.log()語句的主要危害是在 IE 中，它會導致拋出異常，因為除非正在運行調試器，否則console對象不存在。

Answer 4

這是console.log 的問題。 試試這個：

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

Answer 5

這個問題在 Firefox 上不會發生。

我已經檢查了 Chrome，顯然由於某種原因，Gmail 和 Twitter 頁面最終將 console.log 重新分配給一個空函數function () {} ，因此您的處理程序被調用但它什么也不做。 如果您嘗試使用alert()而不是console.log，您會看到它在工作。

有趣的。