禁用f12键 开发者工具 右键菜单

 

分享一款插件库disable-devtool 可以禁用所有一切可以进入开发者工具的方法，防止通过开发者工具进行的 ‘代码搬运’，亲测有效哦！！！

该库有以下特性:

1. 支持可配置是否禁用右键菜单
2. 禁用 f12 和 ctrl+shift+i 快捷键
3. 支持识别从浏览器菜单栏打开开发者工具并关闭当前页面
4. 开发者可以绕过禁用 (url参数使用tk配合md5加密)
5. 支持几乎所有浏览器（IE,360,qq浏览器,FireFox,Chrome,Edge...）
6. 高度可配置
7. 使用极简、体积小巧 (仅7kb)
8. 支持npm引用和script标签引用(属性配置)
9. 识别真移动端与浏览器开发者工具设置插件伪造的移动端，为移动端节省性能

安装 disable-devtool

import disableDevtool from 'disable-devtool';

disableDevtool();

 属性配置

disableDevtool(options);

options中的参数与说明如下：

declare interface optionStatic {
    md5?: string; // 绕过禁用的md5值，详情见3.2，默认不启用绕过禁用
    url?: string; // 关闭页面失败时的跳转页面，默认值为localhost
    tkName?: string; // 绕过禁用时的url参数名称，默认为 ddtk
    ondevtoolopen?(): void; // 开发者面板打开的回调，启用时url参数无效
    interval?: number; // 定时器的时间间隔 默认200ms
    disableMenu?: boolean; // 是否禁用右键菜单 默认为true
    stopIntervalTime?: number; // 在移动端时取消监视的等待时长
}

也可以直接script方式引入

<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'></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'
></script>

注：

1. 如希望自动禁用，属性配置时必须要带上 disable-devtool-auto 属性
2. 属性配置都是可选的，字段与上面options参数一致，区别是将驼峰形式改成横线分割
3. 该script标签建议放在body最底部

以下是该库官方文档：

English | 在线试用/文档 | 更新日志 | Gitee