Javascript +瀏覽器-如何檢測何時打開開發工具/ firebug？

Question

在任何人開始說這不可能之前，請導航至facebook.com， 即使在非附加模式下也打開devtools，它會告訴您dev工具已打開，對嗎？

那么，Facebook如何實現這一目標呢？

我可以在連接的窗戶上做

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

但是，當窗口彈出時，這是行不通的。

Facebook如何做到這一點？

Answer 1

我認為Facebook所做的只是在控制台中記錄了警告。 以下是適用於Chrome的代碼。 我停用了我知道的在Chrome中啟動開發者工具的3種方法：

1. 右鍵單擊並選擇檢查選項：為此，我禁用了右鍵單擊
2. F12鍵按下：阻止了此事件的默認行為
3. Ctrl + Shift + I：阻止所有Ctrl默認行為

看，如果您負擔得起。

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

Answer 2

正如@ elpddev在評論中推測的那樣，他們只是在頁面加載時使用console.log記錄日志，他們沒有檢測到您已打開控制台。

如果檢查頁面上的JS代碼，則應找到以下代碼：

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;
}

由於它已經縮小，因此即使閱讀精美，也有點難以閱讀。 j = i.stop || h._("Stop!") j = i.stop || h._("Stop!")類型的東西似乎正在嘗試加載本地化的文本，回落為英語。 然后，它進行測試以查看他們是否已將瀏覽器檢測為Chrome或Safari，並且未設置i.textonly ，如果設置為i.textonly ，則該瀏覽器似乎以您在Chrome / Safari中瀏覽時獲得的精美樣式顯示。 else子句較難遵循，但它似乎會創建您在文本模式或非Chrome / Safari瀏覽器中獲得的ASCII藝術標語：

 .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.