一行代碼禁止用戶調試前端代碼！
作者：CUGGZ
有時候不希望用戶去調試或復制前端代碼，那該如何禁止用戶調試前端代碼呢？今天就來分享一個開源的前端工具：Disable Devtool，一行代碼禁用 Web 開發(fā)者工具！
功能簡介
disable-devtool 可以禁用一切可以進入開發(fā)者工具的方法，阻止通過開發(fā)者工具進行的“代碼抓取”。
它具有以下特點：
- 支持可配置是否禁用右鍵菜單。
- 取消 f12 和 ctrl+shift+i 等快捷鍵。
- 支持識別從瀏覽器菜單欄打開開發(fā)者工具并關閉當前頁面。
- 開發(fā)者可以繞過拒絕（url參數(shù)使用tk配合md5加密）。
- 多種監(jiān)測模式，支持幾乎所有瀏覽器（IE,360,QQ瀏覽器,FireFox,Chrome,Edge...）。
- 高度可配置、使用極簡、體積緊湊。
- 支持npm引用和腳本標簽引用（屬性配置）。
- 識別真移動端與瀏覽器開發(fā)者工具設置插件格式化的移動端，為移動端節(jié)省性能。
- 支持識別開發(fā)者工具關閉事件。
- 支持可配置是否取消選擇、復制、剪切、粘貼功能。
- 支持識別eruda和vconsole調試工具。
- 支持掛起和恢復支架工作。
- 支持配置ignore屬性，默認自定義控制是否啟用。
- 支持配置 iframe 中所有父頁面的開發(fā)者工具禁用。
基本使用
推薦使用 npm 進行安裝（使用script腳本會被代理單獨攔截掉從而無法執(zhí)行），安裝 disable-devtool：
npm i disable-devtool基本使用：
import DisableDevtool from 'disable-devtool';
DisableDevtool(options);這里的 options 就是配置項。可配置參數(shù)如下：
interface IConfig {
md5?: string; // 繞過禁用的md5值，詳情見3.2，默認不啟用繞過禁用
url?: string; // 關閉頁面失敗時的跳轉頁面，默認值為localhost
tkName?: string; // 繞過禁用時的url參數(shù)名稱，默認為 ddtk
ondevtoolopen?(type: DetectorType, next: Function): void; // 開發(fā)者面板打開的回調，啟用時url參數(shù)無效，type 為監(jiān)測模式，詳見3.5， next函數(shù)是關閉當前窗口
ondevtoolclose?(): void; // 開發(fā)者面板關閉的回調
interval?: number; // 定時器的時間間隔 默認200ms
disableMenu?: boolean; // 是否禁用右鍵菜單 默認為true
stopIntervalTime?: number; // 在移動端時取消監(jiān)視的等待時長
clearIntervalWhenDevOpenTrigger?: boolean; // 是否在觸發(fā)之后停止監(jiān)控 默認為false， 在使用ondevtoolclose時該參數(shù)無效
detectors?: Array<DetectorType>; // 啟用的檢測器 檢測器詳情見 3.5 默認為全部，建議使用全部
clearLog?: boolean; // 是否每次都清除log
disableSelect?: boolean; // 是否禁用選擇文本 默認為false
disableCopy?: boolean; // 是否禁用復制 默認為false
disableCut?: boolean; // 是否禁用剪切 默認為false
disablePaste: boolean; // 是否禁用粘貼 默認為false
ignore?: (string|RegExp)[] | null | (()=>boolean); // 某些情況忽略禁用
disableIframeParents?: boolean; // iframe中是否禁用所有父窗口
timeOutUrl?: // 關閉頁面超時跳轉的url;
}DisableDevtool 的返回值類型如下：
interface IDDResult {
success: boolean; // 表示是否正常啟用
reason: string; // 未正常啟用的原因
}Disable-Devtool 有以下監(jiān)測模式，使用 detectors 定義：
enum DetectorType {
Unknown = -1,
RegToString = 0, // 根據正則檢測
DefineId, // 根據dom id檢測
Size, // 根據窗口尺寸檢測
DateToString, // 根據Date.toString 檢測
FuncToString, // 根據Function.toString 檢測
Debugger, // 根據斷點檢測，僅在ios chrome 真機情況下有效
Performance, // 根據log大數(shù)據性能檢測
DebugLib, // 檢測第三方調試工具 eruda 和 vconsole
};ondevtoolopen 事件的回調參數(shù)就是被觸發(fā)的監(jiān)測模式?？梢栽?nbsp;ondevtoolopen 里執(zhí)行業(yè)務邏輯，比如做數(shù)據上報、用戶行為分析等：
DisableDevtool({
ondevtoolopen(type, next){
alert('Devtool opened with type:' + type);
next();
}
});那么問題來了，如果把 Devtools 禁用了，那如果線上應用出了問題，作為應用的開發(fā)者，也是無法調試的，怎么辦呢？該工具的作者當然想到了這一點，它使用 key 與 md5 配合的方式使開發(fā)者可以在線上繞過禁用。
使用流程：指定一個 key a（該值不要記錄在代碼中），使用 md5 加密得到一個值 b，將 b 作為 md5 參數(shù)傳入，開發(fā)者在訪問 url 的時候只需要帶上url參數(shù) ?ddtk=a即可繞過禁用。
disableDevtool對象暴露了 md5 方法，可供開發(fā)者加密時使用：
DisableDevtool.md5('xxx');責任編輯：姜華
來源：
前端充電寶
