php中文网 | cnphp.com

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 759|回复: 0

js检测开发者工具是否被打开防调试使用devtools-detector插件

[复制链接]

3138

主题

3148

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

UID
1
威望
0
积分
7946
贡献
0
注册时间
2021-4-14
最后登录
2024-11-21
在线时间
763 小时
QQ
发表于 2022-1-14 08:22:55 | 显示全部楼层 |阅读模式
实现效果:

image.png
经测试在谷歌 火狐 ie9 微信浏览器 支付宝浏览器 safari opera都可以检测到开发者工具是否被打开,并且清空所有console.log。

网上好多检测屏幕可视范围和检测f12按键的各有各的弊端,不能检测到用户提前打开开发者工具然后输入对应地址,或者用户改键位,微信开发者工具公众号调试也是自动打开开发者工具的。

所以我推荐一个github上的一个小插件devtools-detector

vue中可以直接在main.js引入

import { addListener, launch } from 'devtools-detector';
在main.js中直接插入下方代码即可
[mw_shl_code=applescript,true]addListener(

    isOpen => (isOpen ? location.href = 'https://www.baidu.com' : '')

  )

  launch();[/mw_shl_code]
为了防止别人访问时篡改代码,所以做了跳转,当打开开发者工具调试时跳转其它网站。

如果不是vue环境,js中可以直接在入口文件引入
[mw_shl_code=applescript,true]<script src="static/devtools-detector.js"></script>


<script>
devtoolsDetector.addListener(function(isOpen) {
    if(isOpen){
        window.location.href = "https://www.baidu.com";
    }
});
</script>[/mw_shl_code]





上一篇:什么是前端开发?什么是后端开发?
下一篇:angular 实现表格的自滚动
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|php中文网 | cnphp.com ( 赣ICP备2021002321号-2 )

GMT+8, 2024-11-22 05:15 , Processed in 0.278205 second(s), 37 queries , Gzip On.

Powered by Discuz! X3.4 Licensed

Copyright © 2001-2020, Tencent Cloud.

申明:本站所有资源皆搜集自网络,相关版权归版权持有人所有,如有侵权,请电邮(fiorkn@foxmail.com)告之,本站会尽快删除。

快速回复 返回顶部 返回列表