Chromeの一部のサイトでconsole.logが空の機能となるのはなぜですか？

Question

ゴーTwitterのログインページに、コンソールに次のように入力します。

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

は（注：どのように三番目のパラメータは、イベントのキャプチャを可能にするtrueに設定されている。これは、ウィンドウで最初にインターセプトされるイベントが発生します。子要素で消費される前に）

いくつかのキーを押してみてください。 helloがコンソールにどのように出力されていないかに注目してください。​​またはkeyupのイベントリスナーを追加しても何も変更されません。

helloは、ほとんどのウェブサイトでは出力されますが、TwitterやGmailなどのサイトでは出力されません。

なぜですか？何がイベントリスナーを停止していますか？

編集：Firefoxで期待どおりに動作するようです。しかし、Chromeはありません。 Chromeがイベントリスナーを期待どおりに起動しないのはなぜですか？

編集2：下記のように推測されるように、console.logは、TwitterやGmailなどのサイトではChromeの空の機能です。何故ですか？

Answer 1

これらのサイトは、具体的には（明らかにwebkitのために）設定されているので：

console.log = function(){}; 

しかし、Chromeでコンソールで次のコマンドを発行して、元のlog()の機能を復元することができます。そして、

console.log = console.__proto__.log 

あなたをこれを行うことができます：

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

期待どおりに動作するはずです。

Answer 2

console.logに問題があります。代わりにこれを試してください：

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

Answer 3

この問題はFirefoxでは発生しません。

Chromeでチェックしたところ、何らかの理由でGmailとTwitterのページがconsole.logを空の関数function() {}に再割り当てしてしまうので、ハンドラが呼び出されても何もしません。 console.logの代わりにalert()を試してみると、正常に動作しています。

興味深い。

Answer 4

開発者は、トラブルシューティングやデバッグのためにコードにconsole.log()ステートメントを入れることが好きです。時々、彼らは生産コードをチェックインするときにそれらをすべて忘れることを忘れます。これに対する単純な防護策は、生産コードのconsole.log()を何もしない空の関数に再定義することです。たとえ開発者が間違って1を残したとしても、実行されていないときにはconsoleオブジェクトがないときには出力が発生せず例外がスローされますデバッガ（IEのような）。

一部のブラウザでは、このような方法で上書きできないように読み取り専用にすることでその機能を置き換えることができますが、そうした場合、コンソールオブジェクトが存在していない必要があります場合によってはconsole.log()声明。これらの残されたconsole.log()ステートメントの主な害は、デバッガが実行されていない限り、consoleオブジェクトが存在しないため例外がスローされるIEにあります。

Answer 5

の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