禁止調試，阻止瀏覽器F12開發者工具
寫在前面
這兩天突然想看看文心一言的http通信請求接口，於是想着用F12看看。
誰知道剛打開開發者工具，居然被動debugger了。
直接被JS寫死的debugger關鍵字下了斷點。行吧，不讓調試就不讓調試吧，關閉開發者工具之後，直接跳到了空白頁。
其實幾年之前就碰到過類似的情況，不過當時才學疏淺，也沒當回事，就沒研究過。這次又碰到了，畢竟已經不是當年的我了，於是便來研究研究。
分析
大家都知道瀏覽器的開發者工具能幹啥，正經的用法：開發時調試代碼邏輯，修改佈局樣式；不正經的用法：改改元素騙騙人，找找網站接口寫爬蟲，逆向js破解加密等等，所以說前端不安全，永遠不要相信用戶的輸入。
而這次碰到的這個情況確實可以在用戶端做一些防禦操作，但是也可以繞過。 （PS：感謝評論區大佬指教：開發者工具Ctrl+F8可以禁用斷點調試，學到了）
先做一波分析。
首先，防止你用F12調試，先用debugger關鍵字阻止你進行任何操作。隨後，在你關閉之後，又直接跳轉到空白頁，不讓你接着操作。
這就需要一個開發者工具檢測的機制了，發現你打開了開發者工具，就給你跳走到空白頁。
所以，關鍵就是要實現開發者工具的檢測。
實現
經過查閱一番，發現原來這個debugger可能並不僅僅是阻止你進行調試的功能，同時還兼具判斷開發者工具是否打開的作用。怎麼實現？
debugger本身只是調試，阻止你繼續對前端進行調試，但是代碼中並不知道用戶是否打開了開發者工具，所以就無法進行更進一步的操作，例如文心一言的跳轉到空白頁。
但是，有一點，你打開開發者工具之後，debugger下了斷點，程序就停到那裏了，如果你不打開開發者工具，程序是不會停止到斷點的。沒錯，這就是我們可以判斷的方式，時間間隔。正常情況下debugger前後的時間間隔可以忽略不計。但是，當你打開開發者工具之後，這個時間間隔就產生了，判斷這個時間間隔，就可以知道是否打開了開發者工具。
直接上示例代碼
<!DOCTYPE html>
<html>
<header>
<title>test</title>
</header>
<body>
<h1>test</h1>
</body>
<script>
setInterval(function() {
var startTime = performance.now();
// 設置斷點
debugger;
var endTime = performance.now();
// 設置一個閾值，例如100毫秒
if (endTime - startTime > 100) {
window.location.href = 'about:blank';
}
}, 100);
</script>
</html>通過設置一個定時循環任務來進行檢測。
在不打開發者工具的情況下，debugger是不會執行將頁面卡住，而恰恰是利用debugger的這一點，如果你打開開發者工具一定會被debugger卡住，那麼上下文時間間隔就會增加，在對時間間隔進行判斷，就能巧妙的知道絕對開了開發者工具，隨後直接跳轉到空白頁，一氣呵成。
測試
現在來進行測試，打開F12
關閉開發者工具。
完美！
寫在後面
這樣確實可以阻擋住通過在開發者工具上獲取信息，但是僅僅是瀏覽器場景。我想要拿到對話的api接口也不是隻有這一種方法。
感謝評論區大佬指教：開發者工具Ctrl+F8可以禁用斷點調試
或者說，開個代理抓包不好嗎？hhh
