寫在前面
這兩天突然想看看文心一言的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
作者：銀空飛羽
連結：https://juejin.cn/post/7337188759055663119