來自公眾號：前端充電寶

來自公眾號：前端充電寶

有時候不希望用戶去調(diào)試或復(fù)制前端代碼，那該如何禁止用戶調(diào)試前端代碼呢？今天就來分享一個開源的前端工具：Disable Devtool，一行代碼禁用 Web 開發(fā)者工具！

功能簡介

disable-devtool 可以禁用一切可以進入開發(fā)者工具的方法，阻止通過開發(fā)者工具進行的“代碼抓取”。

它具有以下特點：

支持可配置是否禁用右鍵菜單

取消 f12 和 ctrl+shift+i 等快捷鍵

支持識別從瀏覽器菜單欄打開開發(fā)者工具并關(guān)閉當前頁面

開發(fā)者可以繞過拒絕（url參數(shù)使用tk配合md5加密）

多種監(jiān)測模式，支持幾乎所有瀏覽器（IE,360,QQ瀏覽器,FireFox,Chrome,Edge...）

高度可配置、使用極簡、體積緊湊

支持npm引用和腳本標簽引用（屬性配置）

識別真移動端與瀏覽器開發(fā)者工具設(shè)置插件格式化的移動端，為移動端節(jié)省性能

支持識別開發(fā)者工具關(guān)閉事件

支持可配置是否取消選擇、復(fù)制、剪切、粘貼功能

支持識別eruda和vconsole調(diào)試工具

支持掛起和恢復(fù)支架工作

支持配置ignore屬性，默認自定義控制是否啟用

支持配置 iframe 中所有父頁面的開發(fā)者工具禁用

推薦使用 npm 進行安裝（使用腳本會被代理單獨攔截掉從而無法執(zhí)行），安裝 disable-devtool：

npm i disable-devtool

基本使用：

importDisableDevtool from'disable-devtool';

DisableDevtool(options);

這里的 options 就是配置項?？膳渲脜?shù)如下：

interfaceIConfig {

md5?:string;// 繞過禁用的md5值，詳情見3.2，默認不啟用繞過禁用

url?:string;// 關(guān)閉頁面失敗時的跳轉(zhuǎn)頁面，默認值為localhost

tkName?:string;// 繞過禁用時的url參數(shù)名稱，默認為 ddtk

ondevtoolopen?(type:DetectorType,next:Function):void;// 開發(fā)者面板打開的回調(diào)，啟用時url參數(shù)無效，type 為監(jiān)測模式，詳見3.5， next函數(shù)是關(guān)閉當前窗口

ondevtoolclose?:void;// 開發(fā)者面板關(guān)閉的回調(diào)

interval?:number;// 定時器的時間間隔 默認200ms

disableMenu?:boolean;// 是否禁用右鍵菜單 默認為true

stopIntervalTime?:number;// 在移動端時取消監(jiān)視的等待時長

展開全文

clearIntervalWhenDevOpenTrigger?:boolean;// 是否在觸發(fā)之后停止監(jiān)控 默認為false， 在使用ondevtoolclose時該參數(shù)無效

detectors?:ArrayDetectorType;// 啟用的檢測器 檢測器詳情見 3.5 默認為全部，建議使用全部

clearLog?:boolean;// 是否每次都清除log

disableSelect?:boolean;// 是否禁用選擇文本 默認為false

disableCopy?:boolean;// 是否禁用復(fù)制 默認為false

disableCut?:boolean;// 是否禁用剪切 默認為false

disablePaste:boolean;// 是否禁用粘貼 默認為false

ignore?:(string|RegExp)[]|null|(=boolean);// 某些情況忽略禁用

disableIframeParents?:boolean;// iframe中是否禁用所有父窗口

timeOutUrl?:// 關(guān)閉頁面超時跳轉(zhuǎn)的url;

}

DisableDevtool 的返回值類型如下：

interfaceIDDResult {

success:boolean;// 表示是否正常啟用

reason:string;// 未正常啟用的原因

}

Disable-Devtool 有以下監(jiān)測模式，使用 detectors定義：

enumDetectorType {

Unknown =-1,

RegToString =0,// 根據(jù)正則檢測

DefineId,// 根據(jù)dom id檢測

Size,// 根據(jù)窗口尺寸檢測

DateToString,// 根據(jù)Date.toString 檢測

FuncToString,// 根據(jù)Function.toString 檢測

Debugger,// 根據(jù)斷點檢測，僅在ios chrome 真機情況下有效

Performance,// 根據(jù)log大數(shù)據(jù)性能檢測

DebugLib,// 檢測第三方調(diào)試工具 eruda 和 vconsole

};

ondevtoolopen事件的回調(diào)參數(shù)就是被觸發(fā)的監(jiān)測模式?？梢栽?ondevtoolopen里執(zhí)行業(yè)務(wù)邏輯，比如做數(shù)據(jù)上報、用戶行為分析等：

DisableDevtool({

ondevtoolopen(type,next){

alert('Devtool opened with type:'+type);

next;

}

});

那么問題來了，如果把 Devtools 禁用了，那如果線上應(yīng)用出了問題，作為應(yīng)用的開發(fā)者，也是無法調(diào)試的，怎么辦呢？該工具的作者當然想到了這一點，它使用 key 與 md5 配合的方式使開發(fā)者可以在線上繞過禁用。

使用流程：指定一個 key a（該值不要記錄在代碼中），使用 md5 加密得到一個值 b，將 b 作為 md5 參數(shù)傳入，開發(fā)者在訪問 url 的時候只需要帶上url參數(shù) ?ddtk=a即可繞過禁用。

disableDevtool對象暴露了 md5 方法，可供開發(fā)者加密時使用：

DisableDevtool.md5('xxx');

---END---