大家好，我是前端西瓜哥。

作為一名前端開(kāi)發(fā)，在瀏覽一些網(wǎng)頁(yè)時(shí)，有時(shí)會(huì)在意一些交互效果的實(shí)現(xiàn)，會(huì)打開(kāi)開(kāi)發(fā)者工具查看源碼實(shí)現(xiàn)。

但有些網(wǎng)站做了防窺探處理，打開(kāi)開(kāi)發(fā)者工具后，會(huì)無(wú)法再正常進(jìn)行網(wǎng)頁(yè)的操作。

它是怎么做到的呢？

debugger

首先是給代碼加 debugger。

debugger 是 JavaScript 中的關(guān)鍵字，用于在代碼中設(shè)置斷點(diǎn)。

在代碼執(zhí)行到 debugger 所在位置時(shí)會(huì)停止，此時(shí)上下文還保留著。此時(shí)我們可以查看一些變量的值，以及一點(diǎn)點(diǎn)地往下執(zhí)行，看看是否進(jìn)入正確的條件分支、變量是否正確等。

但前提是已經(jīng)打開(kāi)了開(kāi)發(fā)者工具。

所以我們用一個(gè)定時(shí)器不停地執(zhí)行 debugger 就行。

setInterval(() => {
  debugger;
}, 4000);

如果用戶不打開(kāi)開(kāi)發(fā)者工具，debugger 會(huì)被瀏覽器忽略。

如果打開(kāi)了，就會(huì)正常執(zhí)行 debugger 給你的頁(yè)面打一個(gè)斷點(diǎn)，導(dǎo)致你無(wú)法操作頁(yè)面。即使你跳過(guò)，因?yàn)槎〞r(shí)器的存在，等下還會(huì)給你打上斷點(diǎn)。

考慮到定時(shí)器不停執(zhí)行可能會(huì)影響性能，所以不要設(shè)置太短，4s 應(yīng)該差不多。

一個(gè)使用了該方案的動(dòng)漫網(wǎng)站。

函數(shù)調(diào)用棧的始端使用了 setInterval 定時(shí)器。

發(fā)現(xiàn)一個(gè)有趣的點(diǎn)，就是我用蘋果筆記本打開(kāi)開(kāi)發(fā)者工具，再關(guān)閉后，光標(biāo)會(huì)變成默認(rèn)樣式，并再也無(wú)法改變光標(biāo)樣式了。大概是瀏覽器的 bug？不知道有沒(méi)有讀者知道是為什么。

結(jié)尾

這是一個(gè)比較簡(jiǎn)單的方案。另外推薦看看 disable-devtool 庫(kù)，支持比較多的配置，也可以看看它是怎么檢測(cè)用戶打開(kāi)開(kāi)發(fā)者工具行為的發(fā)生的。