2

I have been reading through the source code here which detects when the console is open and if so plays an audio element.

I am confused by a couple of things.

Firstly, I cannot figure out how it detects that the console is open.

if( audioCheck === true || (window.Firebug && window.Firebug.chrome && window.Firebug.chrome.isInitialized)) {
   play();
}

The lines below return undefined so it is audioCheck === true that triggers the play() function.

window.Firebug && window.Firebug.chrome && window.Firebug.chrome.isInitialized

It is the following line that sets audioCheck to true. I have done some research on __defineGetter__ but it remains unclear for me.

audioElement.__defineGetter__('id', function() {
   audioCheck = true;
});

Can anyone explain what this does? I cannot figure it out after much research.

And finally what completely throws me is that if I remove this line the audio doesn't play:

console.log("Check the console: ", audioElement);

This is really strange as I would have though this should only log the info to the console, and not have any effect on whether or not the sound is played, but I guess this must tie back in with the __defineGetter__

There are a number of questions in here so any light that could be shed on these would be greatly appreciated.

1 Answer 1

1

I don't know of any sources to confirm this1, but most likely the behavior you are experiencing is an effect of what modern browsers' consoles usually do — if you issue console.log() and pass an HTML element as its argument, the console will attempt to display its details such as the ID. And the __defineGetter__ line ensures that when the browser accesses the ID, the fake getter function gets invoked (__defineGetter__() is just a non-standard way of setting — or replacing — a getter property on an object2). Quite smart, isn't it?

1Probably analysis of the source code of various browsers would be required to fully understand and validate the issue.
2Read more on getters at MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get (note that the standard way, as described therein, is to call Object.defineProperty()).

3
  • you're dead right, I also asked the author and he just responded. Thanks! Apr 3, 2016 at 21:33
  • Wow, that sounds like a bug if the console runs getters on DOM elements only to find out their id…
    – Bergi
    Apr 4, 2016 at 0:24
  • @Bergi I successfully more or less reproduced the issue in latest stable versions of Chrome and Opera, and also in IE11. It doesn't seem to affect Firefox (which does display extra data about HTML elements as well).
    – rhino
    Apr 4, 2016 at 1:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.