数据大屏项目开发完成上线后，为了尽可能的保护我们的代码不被调试，我们可能会需要禁用浏览器的调试工具，今天我们来推荐一款插件：
disable-devtool
disable-devtool是一个开源的JavaScript库，通过禁用开发者工具来防止代码被篡改或查看。这个库提供了一种简单的方法来禁用所有可以进入开发者工具的方式，以此来防止通过开发者工具进行“代码处理”。
说明文档
快速使用
通过npm引入
首先，你需要通过npm安装disable-devtool：
npm i disable-devtool
然后，在你的项目中引入并使用它：
import disableDevtool from 'disable-devtool';
disableDevtool();
通过script标签引入
你也可以直接在HTML文件中通过script标签引入disable-devtool：
<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'></script>
或者使用特定版本的CDN链接：
<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool@x.x.x/disable-devtool.min.js'></script>
功能特点
disable-devtool库具有以下特点：
- 支持配置是否禁用右键菜单。
- 禁用F12和Ctrl+Shift+I快捷键。
- 支持识别从浏览器菜单栏打开开发者工具，并关闭当前页面。
- 开发者可以通过URL参数（使用tk和md5加密）绕过禁用。
- 支持多种监控模式，几乎支持所有浏览器（IE、360、QQ浏览器、Firefox、Chrome、Edge等）。
- 高度可配置。
- 使用简单，体积小（仅7kb）。
- 支持npm引用和script标签引用（属性配置）。
- 识别真实的移动终端和浏览器开发者工具设置插件伪造的移动终端，为移动终端节省性能。
- 支持识别开发者工具关闭事件。
通过md5和tk绕过禁用
库中的key和md5的组合允许开发者在线绕过禁用。首先指定一个key a（值不应记录在代码中），使用md5加密获得值b，并将b作为md5参数传入。开发者只需在访问URL时带上URL参数ddtk=a即可绕过禁用。
script标签使用属性配置
你可以在script标签中使用属性配置来自动禁用开发者工具，例如：
<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js' md5='xxx' url='xxx' tk-name='xxx' interval='xxx' disable-menu='xxx' detectors='xxx'></script>
注意：
- 如果你想自动禁用，必须在配置属性时带上
disable-devtool-auto属性。 - 属性配置是可选的，字段与上文中的3.1节相同，不同之处在于驼峰形式改为横线分隔。
- 建议将script标签放在body的底部。
disable-devtool提供了一种有效的方法来防止通过开发者工具对代码进行篡改或查看，适用于希望保护其网页内容不被轻易查看或修改的开发者.
