一行代码禁止用户调试前端代码！

有时候不希望用户去调试或复制前端代码，那该如何禁止用户调试前端代码呢？今天就来分享一个开源的前端工具：Disable Devtool，一行代码禁用 Web 开发者工具！

功能简介

disable-devtool 可以禁用一切可以进入开发者工具的方法，阻止通过开发者工具进行的“代码抓取”。

它具有以下特点：

支持可配置是否禁用右键菜单
取消 f12 和 ctrl+shift+i 等快捷键
支持识别从浏览器菜单栏打开开发者工具并关闭当前页面
开发者可以绕过拒绝（url参数使用tk配合md5加密）
多种监测模式，支持几乎所有浏览器（IE,360,QQ浏览器,FireFox,Chrome,Edge...）
高度可配置、使用极简、体积紧凑
支持npm引用和脚本标签引用（属性配置）
识别真移动端与浏览器开发者工具设置插件格式化的移动端，为移动端节省性能
支持识别开发者工具关闭事件
支持可配置是否取消选择、复制、剪切、粘贴功能
支持识别eruda和vconsole调试工具
支持挂起和恢复支架工作
支持配置ignore属性，默认自定义控制是否启用
支持配置 iframe 中所有父页面的开发者工具禁用

基本使用

推荐使用 npm 进行安装（使用 script脚本会被代理单独拦截掉从而无法执行），安装 disable-devtool：

<pre data-line="25" data-style="color: rgb(248, 248, 242); font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; word-spacing: normal; word-break: normal; overflow-wrap: normal; line-height: 1.5; tab-size: 4; hyphens: none; margin-top: 0.5em; margin-bottom: 0.5em; overflow: auto; border-radius: 0.3em; background: rgb(43, 43, 43);" class="js_darkmode__3"><section></section><code data-line="25">npm i disable-devtool </code></pre>

基本使用：

<pre data-line="31" data-style="color: rgb(248, 248, 242); font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; word-spacing: normal; word-break: normal; overflow-wrap: normal; line-height: 1.5; tab-size: 4; hyphens: none; margin-top: 0.5em; margin-bottom: 0.5em; overflow: auto; border-radius: 0.3em; background: rgb(43, 43, 43);" class="js_darkmode__7"><section></section><code data-line="31">import DisableDevtool from 'disable-devtool'; DisableDevtool(options); </code></pre>

这里的 options 就是配置项。可配置参数如下：

<pre data-line="54" data-style="color: rgb(248, 248, 242); font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; word-spacing: normal; word-break: normal; overflow-wrap: normal; line-height: 1.5; tab-size: 4; hyphens: none; margin-top: 0.5em; margin-bottom: 0.5em; overflow: auto; border-radius: 0.3em; background: rgb(43, 43, 43);" class="js_darkmode__11"><section></section><code data-line="54">interface IConfig { md5?: string; // 绕过禁用的md5值，详情见3.2，默认不启用绕过禁用 url?: string; // 关闭页面失败时的跳转页面，默认值为localhost tkName?: string; // 绕过禁用时的url参数名称，默认为 ddtk ondevtoolopen?(type: DetectorType, next: Function): void; // 开发者面板打开的回调，启用时url参数无效，type 为监测模式，详见3.5， next函数是关闭当前窗口 ondevtoolclose?(): void; // 开发者面板关闭的回调 interval?: number; // 定时器的时间间隔默认200ms disableMenu?: boolean; // 是否禁用右键菜单默认为true stopIntervalTime?: number; // 在移动端时取消监视的等待时长 clearIntervalWhenDevOpenTrigger?: boolean; // 是否在触发之后停止监控默认为false，在使用ondevtoolclose时该参数无效 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; } </code></pre>

DisableDevtool 的返回值类型如下：

<pre data-line="61" data-style="color: rgb(248, 248, 242); font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; word-spacing: normal; word-break: normal; overflow-wrap: normal; line-height: 1.5; tab-size: 4; hyphens: none; margin-top: 0.5em; margin-bottom: 0.5em; overflow: auto; border-radius: 0.3em; background: rgb(43, 43, 43);" class="js_darkmode__15"><section></section><code data-line="61">interface IDDResult { success: boolean; // 表示是否正常启用 reason: string; // 未正常启用的原因 } </code></pre>

Disable-Devtool 有以下监测模式，使用 detectors 定义：

<pre data-line="75" data-style="color: rgb(248, 248, 242); font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; word-spacing: normal; word-break: normal; overflow-wrap: normal; line-height: 1.5; tab-size: 4; hyphens: none; margin-top: 0.5em; margin-bottom: 0.5em; overflow: auto; border-radius: 0.3em; background: rgb(43, 43, 43);" class="js_darkmode__19"><section></section><code data-line="75">enum DetectorType { Unknown = -1, RegToString = 0, // 根据正则检测 DefineId, // 根据dom id检测 Size, // 根据窗口尺寸检测 DateToString, // 根据Date.toString 检测 FuncToString, // 根据Function.toString 检测 Debugger, // 根据断点检测，仅在ios chrome 真机情况下有效 Performance, // 根据log大数据性能检测 DebugLib, // 检测第三方调试工具 eruda 和 vconsole }; </code></pre>

ondevtoolopen 事件的回调参数就是被触发的监测模式。可以在 ondevtoolopen 里执行业务逻辑，比如做数据上报、用户行为分析等：

<pre data-line="84" data-style="color: rgb(248, 248, 242); font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; word-spacing: normal; word-break: normal; overflow-wrap: normal; line-height: 1.5; tab-size: 4; hyphens: none; margin-top: 0.5em; margin-bottom: 0.5em; overflow: auto; border-radius: 0.3em; background: rgb(43, 43, 43);" class="js_darkmode__23"><section></section><code data-line="84">DisableDevtool({ ondevtoolopen(type, next){ alert('Devtool opened with type:' + type); next(); } }); </code></pre>

那么问题来了，如果把 Devtools 禁用了，那如果线上应用出了问题，作为应用的开发者，也是无法调试的，怎么办呢？该工具的作者当然想到了这一点，它 使用 key 与 md5 配合的方式使开发者可以在线上绕过禁用 。

使用流程 ：指定一个 key a（该值不要记录在代码中），使用 md5 加密得到一个值 b，将 b 作为 md5 参数传入，开发者在访问 url 的时候只需要带上url参数 ?ddtk=a即可绕过禁用。

disableDevtool对象暴露了 md5 方法，可供开发者加密时使用：

<pre data-line="92" data-style="color: rgb(248, 248, 242); font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; word-spacing: normal; word-break: normal; overflow-wrap: normal; line-height: 1.5; tab-size: 4; hyphens: none; margin-top: 0.5em; margin-bottom: 0.5em; overflow: auto; border-radius: 0.3em; background: rgb(43, 43, 43);" class="js_darkmode__29"><section></section><code data-line="92">DisableDevtool.md5('xxx'); </code></pre>