推荐一款插件devtools-detector 前端实现控制台检测

山河故人z

已于 2024-06-04 14:24:15 修改

阅读量462

点赞数 5

文章标签：前端 vue javascript

于 2024-06-04 14:22:46 首次发布

本文链接：https://blog.csdn.net/weixin_42860683/article/details/139441337

版权

场景：公司需要实现一个前端锁屏功能，密码都缓存在前端页面，线上环境不可以让其打开控制台其实就限制部门基础用户

方案一：采用获取屏幕宽度、高度跟适口宽度、高度来判断是否打开了控制台此方案简单
放弃原因：
1、适用不了弹窗式控制台
2、在浏览器放大缩小展示的时候会出现宽度获取大于屏幕宽度问题

方案二：使用插件 devtools-detector （推荐）

效果图：f12 或者打开控制台
在这里插入图片描述

1、下载

npm i devtools-detector -S

2、使用方法（方法已抽离）

 //detector.ts
 // 引入
 import { addListener, launch, stop, setDetectDelay } from 'devtools-detector';
 /**
 * 监控控制台
 * @params isOpen | boolean  //这玩意是用来控制线上环境有些开发人员需要打开控制台用的 可以藏个小彩蛋 放在某按钮上 打开后 控制台就关闭了监控 这个看你自己使用
 * /
export const monitorLog = (isOpen:boolean) => {
  if (import.meta.env.VITE_NODE_ENV === 'production') {
    (() => {
      if (isOpen) {
        setDetectDelay(500);
        addListener((isOpen) => {
          if (isOpen) {
            document.body.innerHTML =
              '<h1 style="color: red;padding:30px">警告，检测到非法调试,请关闭控制台后刷新页面重试!</h1>';
          }
        });
        launch();
      } else {
        stop();
      }
    })();
  }
};

3、vue3使用例子

// App.vue

import { monitorLog } from '@/utils/monitor';

 monitorLog(true);

插件git地址 devtools-detector

这里贴一点中文方法教程

方法	解释
launch()	开始
isLaunch()	判断监听是否启动返回 true
addListener(listener: DevtoolsDetectorListener)	添加监听事件
removeListener(listener: DevtoolsDetectorListener)	删除监听事件
setDetectDelay(value: number)	设置监听间隔秒数类似于节流如果值=＜0，则停止检测

遇到使用问题，欢迎大家评论区交流