Javascript + Browser - How to detect when dev tools / firebug is open?

Question

Before anyone of you starts saying it's impossible, please navigate to facebook.com open the devtools, even in non attached mode , and it will tell you that dev tools is opened, right?

So how is facebook able to pull that off?

I am able to do it for attached windows

window.outerHeight - window.innerHeight > 200 || window.outerWidth - window.innerWidth > 200

But when the window is popped up, this doesn't work.

How is facebook able to pull this off?

Answer 1

I think what facebook has done is just logged the warning in Console. Below is the code that worked for me in Chrome. I disabled 3 ways I know to start Developer Tool in Chrome:

1. Right Click and select Inspect option: For this, I disabled Right Click
2. F12 Key Press: blocked this event's default behavior
3. Ctrl + Shift + I: blocked all Ctrl default behavior

See, if you can afford this.

document.onkeydown = function(event) {      
    if(event.code == "F12" || event.ctrlKey) {
        event.preventDefault();
    }
}
document.addEventListener('contextmenu', event => event.preventDefault());

Answer 2

As @ elpddev speculated in the comments, they are just using console.log to log it when the page loads, they are not detecting that you have opened the console.

If you examine the JS code on the page you should find this:

var j = i.stop || h._("Stop!")
  , k = i.text || h._("This is a browser feature intended for developers. If someone told you to copy-paste something here to enable a Facebook feature or \"hack\" someone's account, it is a scam and will give them access to your Facebook account.")
  , l = i.more || h._("See {url} for more information.", [h.param('url', 'https://www.facebook.com/selfxss')]);
if ((window.chrome || window.safari) && !i.textonly) {
    var m = 'font-family:helvetica; font-size:20px; ';
    [[j, i.c1 || m + 'font-size:50px; font-weight:bold; ' + 'color:red; -webkit-text-stroke:1px black;'], [k, i.c2 || m], [l, i.c3 || m], ['', '']].map(function(s) {
        setTimeout(console.log.bind(console, '\n%c' + s[0], s[1]));
    });
} else {
    var n = ['', ' .d8888b.  888                       888', 'd88P  Y88b 888                       888', 'Y88b.      888                       888', ' "Y888b.   888888  .d88b.  88888b.   888', '    "Y88b. 888    d88""88b 888 "88b  888', '      "888 888    888  888 888  888  Y8P', 'Y88b  d88P Y88b.  Y88..88P 888 d88P', ' "Y8888P"   "Y888  "Y88P"  88888P"   888', '                           888', '                           888', '                           888']
      , o = ('' + k).match(/.{35}.+?\s+|.+$/g)
      , p = Math.floor(Math.max(0, (n.length - o.length) / 2));
    for (var q = 0; q < n.length || q < o.length; q++) {
        var r = n[q];
        n[q] = r + new Array(45 - r.length).join(' ') + (o[q - p] || '');
    }
    console.log('\n\n\n' + n.join('\n') + '\n\n' + l + '\n');
    return;
}

It's a little hard to read since it is minified, even with pretty printing. The j = i.stop || h._("Stop!") j = i.stop || h._("Stop!") type stuff appears to be trying to load localized text, falling back to English. It then test to see if they have detected the browser as Chrome or Safari and i.textonly is not set, if so it appears to be displaying it with the fancy styling you get when viewing it in Chrome/Safari. The else clause is harder to follow but it appears to create the ASCII art banner you get in text mode or non-Chrome/Safari browsers:

 .d8888b.  888                       888    
d88P  Y88b 888                       888    
Y88b.      888                       888    This is a browser feature intended for 
 "Y888b.   888888  .d88b.  88888b.   888    developers. If someone told you to copy-paste 
    "Y88b. 888    d88""88b 888 "88b  888    something here to enable a Facebook feature 
      "888 888    888  888 888  888  Y8P    or "hack" someone's account, it is a 
Y88b  d88P Y88b.  Y88..88P 888 d88P         scam and will give them access to your 
 "Y8888P"   "Y888  "Y88P"  88888P"   888    Facebook account.
                           888              
                           888              
                           888              

See https://www.facebook.com/selfxss for more information.