禁用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