掃二維碼與項目經(jīng)理溝通
我們在微信上24小時期待你的聲音
解答本文疑問/技術(shù)咨詢/運營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流
大家好，我是前端西瓜哥。
成都創(chuàng)新互聯(lián)始終堅持【策劃先行，效果至上】的經(jīng)營理念，通過多達十載累計超上千家客戶的網(wǎng)站建設總結(jié)了一套系統(tǒng)有效的全網(wǎng)營銷推廣解決方案，現(xiàn)已廣泛運用于各行各業(yè)的客戶，其中包括：成都陽臺護欄等企業(yè)，備受客戶贊許。
作為一名前端開發(fā)，在瀏覽一些網(wǎng)頁時，有時會在意一些交互效果的實現(xiàn)，會打開開發(fā)者工具查看源碼實現(xiàn)。
但有些網(wǎng)站做了防窺探處理，打開開發(fā)者工具后，會無法再正常進行網(wǎng)頁的操作。
它是怎么做到的呢？
首先是給代碼加 debugger。
debugger 是 JavaScript 中的關鍵字，用于在代碼中設置斷點。
在代碼執(zhí)行到 debugger 所在位置時會停止，此時上下文還保留著。此時我們可以查看一些變量的值，以及一點點地往下執(zhí)行，看看是否進入正確的條件分支、變量是否正確等。
但前提是已經(jīng)打開了開發(fā)者工具。
所以我們用一個定時器不停地執(zhí)行 debugger 就行。
setInterval(() => {
debugger;
}, 4000);如果用戶不打開開發(fā)者工具，debugger 會被瀏覽器忽略。
如果打開了，就會正常執(zhí)行 debugger 給你的頁面打一個斷點，導致你無法操作頁面。即使你跳過，因為定時器的存在，等下還會給你打上斷點。
考慮到定時器不停執(zhí)行可能會影響性能，所以不要設置太短，4s 應該差不多。
一個使用了該方案的動漫網(wǎng)站。
函數(shù)調(diào)用棧的始端使用了 setInterval 定時器。
發(fā)現(xiàn)一個有趣的點，就是我用蘋果筆記本打開開發(fā)者工具，再關閉后，光標會變成默認樣式，并再也無法改變光標樣式了。大概是瀏覽器的 bug？不知道有沒有讀者知道是為什么。
這是一個比較簡單的方案。另外推薦看看 disable-devtool 庫，支持比較多的配置，也可以看看它是怎么檢測用戶打開開發(fā)者工具行為的發(fā)生的。
我們在微信上24小時期待你的聲音
解答本文疑問/技術(shù)咨詢/運營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流
微信二維碼
微信二維碼
移動版官網(wǎng)