Why is console.log an empty function on some sites in Chrome?

Question

Go to Twitter's login page and type the following in the console:

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

(NOTE: how the third parameter is set to true which enables event capture. This causes events to be intercepted first by the window before being consumed by a child element.)

Try pressing some keys. Notice how hello isn't output to the console. Adding an event listener for keydown or keyup doesn't change anything.

hello will get output on most websites, but not on sites like Twitter or Gmail.

Why? What's stopping the event listener?

EDIT: Seems to work as expected on Firefox. But not Chrome. Why isn't Chrome firing the event listener as expected?

EDIT 2: As deduced by a few people below, console.log is an empty function on Chrome for sites like Twitter and Gmail. Why is that?

Answer 1

Because those sites have specifically set (for webkit apparently):

console.log = function(){};

However, in Chrome you can restore the original log() functionality by issuing this command in console:

console.log = console.__proto__.log

Then you can do this:

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

And it should work as expected.

Answer 2

Developers like to put console.log() statements in their code for troubleshooting/debugging. Sometimes, they forget to take them all out when checking in production code. A simple safeguard against this is to redefine console.log() in production code to be an empty function that does nothing so even if a developer accidentally leaves one in, it won't cause any output or throw an exception when there is no console object when not running the debugger (like in IE).

Some browsers may protect against the replacing of that function by making it read-only such that it can't be overwritten in this way, but if they do that, then the console object must exist so there's still no harm from an occasional console.log() statement. The main harm of these leftover console.log() statements is in IE where it causes an exception to be thrown because the console object doesn't exist unless the debugger is being run.

Answer 3

Get it from an iframe:

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

(and then call it)

setConsole()

source: https://gist.github.com/cowlicks/a3bc662b38c36483b35f74b2b54e37c0

Answer 4

It's a problem with console.log. try this instead:

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

Answer 5

This problem doesn't occur on Firefox.

I've checked on Chrome and apparently for some reason the Gmail and Twitter pages end up reassigning console.log to an empty function function () {}, so your handler gets called but it does nothing. If you try alert() instead of console.log, you'll see it working.

Interesting.