js检测开发者工具Devtools是否打开防调试

JavaScript检测是否开启了控制台(调试工具)

测试后在chrome有效

不少人防止别人趴源码,一般采用检测按键F12之类的,但是这些基本没什么用

现在介绍一个方法,非常管用,可以检测到你是否开启了控制台程序,可以算是JavaScript的一些奇淫巧技

将这段代码加入你的网站即可,原理不明 = -

(function () {
var re = /x/;
var i = 0;
console.log(re);
 
re.toString = function () {
alert("请关闭控制台");
return '第 ' + (++i) + ' 次打开控制台';
};
})();

上面主要是讲如何通过js来检测开发者工具是否打开,防止别人恶意调试我们的代码,那段代码也是查了蛮多资料整理出来的,当时可以兼容chrome,firefox,ie,但是随着浏览器版本的更新,已经基本上没有作用了,最近我发现还是有蛮多人去浏览那篇文章,所以这里再放出一段代码,算是个升级版吧,之前的版本里在firefox上还有有限制的,下面提供的这个版本我测试过通杀现在的chrome 69,firefox,IE,也不存在之前firefox上存在的问题了,下面直接贴出代码:

setInterval(function() {
    check()
}, 4000);
var check = function() {
    function doCheck(a) {
        if (("" + a / a)["length"] !== 1 || a % 20 === 0) {
            (function() {}
            ["constructor"]("debugger")())
        } else {
            (function() {}
            ["constructor"]("debugger")())
        }
        doCheck(++a)
    }
    try {
        doCheck(0)
    } catch (err) {}
};
check();

本文地址: https://www.deanhan.cn/js-detect-devtool.html

版权声明: 本文为原创文章,版权归 逐梦个人博客 所有,欢迎分享本文,转载请保留出处!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: DevTools开发者工具)是一组工具,可以帮助开发者更轻松地构建、调试和优化网络应用程序。它们可以帮助开发者更快地识别和解决问题。DevTools还可以让开发者实现更多的功能,比如实时预览和检查网页布局,查看网络请求和资源,以及更快地调试 JavaScript 代码。 ### 回答2: 开发者工具DevTools)是现代浏览器提供的一个功能强大的工具集,用于在开发和调试网页时进行查看、分析和修改。 DevTools的工作原理可以大致分为以下几个步骤: 1. 嵌入到浏览器中:开发者工具是以插件或扩展的形式嵌入到浏览器中的,提供给开发人员使用。用户可以通过浏览器的菜单或快捷键打开开发者工具。 2. 与浏览器建立通信:开发者工具与浏览器建立通信渠道,通过该通道获取当前页面的DOM结构、CSS样式和JavaScript运行情况等信息。 3. 查看页面结构:开发者工具中的“元素”面板可以显示当前页面的DOM结构,开发者可以在该面板中查看并编辑HTML标签、属性和样式。 4. 调试JavaScript代码:开发者工具中的“控制台”面板可以提供一个JavaScript的运行环境,开发者可以在该面板中编写和调试JavaScript代码,查看代码执行的结果和错误信息。 5. 分析网络请求:开发者工具中的“网络”面板可以查看当前页面发送的网络请求,包括请求的URL、请求方法、请求头和响应内容等信息,方便开发者分析页面加载和数据传输的性能问题。 6. 性能分析和优化:开发者工具中的“性能”面板可以用于分析页面的加载性能,并提供诸如JavaScript性能和内存使用情况的详细报告,帮助开发者进行优化。 7. 其他功能:开发者工具还提供了诸如查看和调试页面的样式、查找和替换文本、模拟设备和网络等功能,帮助开发者进行更全面和高效的调试和开发。 总之,开发者工具通过与浏览器建立通信渠道,获取并展示当前页面的各种信息,为开发者提供了丰富的调试和分析功能,帮助他们更好地开发和优化网页。 ### 回答3: 开发者工具DevTools)是一种集成在浏览器中的工具,用于帮助开发人员在开发和调试网页时进行分析、监控和修改。DevTools的原理涉及以下几个方面。 首先,DevTools与浏览器紧密集成,可以直接访问浏览器中的内部数据结构和功能接口。通过与渲染引擎(如WebKit或Chromium)的通信,DevTools能够获取DOM树结构、CSS样式表、JavaScript堆栈信息等页面相关的数据信息。 其次,DevTools利用浏览器的调试接口(如Chrome的Chrome DevTools Protocol)与浏览器进行通信。这些接口提供了许多底层功能,例如获取网络请求的详细信息、监测性能指标、执行JavaScript代码、模拟用户行为等。DevTools可以通过发送命令和接收响应来与浏览器进行交互,以实现对页面的分析和修改。 还有一些与开发者工具密切相关的技术,例如断点调试和代码审查。开发者工具可以在页面中设置断点,当特定条件满足时,自动中断JavaScript的执行,并提供调试信息和堆栈跟踪,帮助开发人员定位问题。此外,开发者工具还提供了代码审查功能,用于分析和修改页面的HTML、CSS和JavaScript代码。 总之,开发者工具的原理是通过与浏览器内部通信,获取页面的各种数据信息,并提供操作界面和调试功能,以帮助开发人员进行网页开发和调试开发者工具的实现依赖于浏览器的内部结构和接口,以及相关的调试和审查技术。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值