JS实现禁止打开控制台/禁止F12/禁止ctrl+shift+i/禁止鼠标右键

需求

要求用户不能在网页上打开控制台查看源代码(禁止右键、禁止F12等打开方式)
要求在控制台打开的状态下不能进行操作(防止控制台打开后的备用操作)

功能实现

function hm() {
    document.onkeydown = () => {
        //禁用F12
        if (window.event && window.event.keyCode == 123) {
            return false;
            //禁用ctrl+shift+i,
        } else if (window.event.ctrlKey && window.event.shiftKey && window.event.keyCode == 73) {
            return false;
            //屏蔽Shift+F10
        } else if (window.event.shiftKey && window.event.keyCode == 121) {
            return false;
        }

    }
    //禁用鼠标右键
    document.oncontextmenu = new Function("event.returnValue=false");
    //打开控制台后无限debugger
    setInterval(function () { check() }, 1000);
    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();

}

hm()

使用

直接在html文件中使用,引入JS文件

 <script type="module" src="/hm.js"></script>

二编:有看到更好用的插件\使用方法更简便
disable-devtool的使用

### 如何利用 F12 开发者工具进行调试和检查 #### 基本操作与打开方式 测试工程师可以通过多种方式启动浏览器的开发者工具。常见的开启方法包括按下 `F12` 键(对于部分笔记本电脑可能需要组合按键 `Fn + F12`),或者通过鼠标右键点击页面任意位置并选择“检查”选项,快捷键为 `Ctrl + Shift + I` 或 `Cmd + Option + I`(Mac 系统)。这些方法均能迅速调出开发者工具面板[^1]。 #### 主要功能模块及其用途 开发者工具有多个核心功能区域,以下是几个常用的功能模块以及它们在测试中的应用: - **元素(Elements)** 这一部分允许用户实时查看当前网页上的 HTML 和 CSS 结构。测试人员可以在此处验证 DOM 的正确性、调整样式以观察变化效果,并设置断点来监控特定节点的变化情况。例如,在动态加载的内容场景下,可借助此功能确认数据渲染是否符合预期[^3]。 - **控制台(Console)** 控制台提供了一个交互式的 JavaScript 执行环境,可用于运行脚本来模拟用户的某些行为或获取变量状态信息。它还能够显示错误日志和其他警告消息,这对于发现潜在问题非常有帮助[^2]。 - **网络(Network)** 此标签页记录了所有的 HTTP 请求详情,包括响应时间、返回码、请求头/体等内容。这对分析性能瓶颈特别有用——比如找出哪些资源耗时较长从而影响整体速度;同时也便于检测跨域访问权限等问题是否存在异常状况发生的情况[^4]。 - **源代码(Sources)** 在这里可以看到项目实际部署后的文件列表及具体内容。支持单步执行语句、暂停程序流程等功能,非常适合深入探究逻辑实现细节之处是否有误漏现象存在。另外还可以添加条件断点以便更精准地捕捉目标时刻的行为表现形式等等. - **应用程序(Application)** 对于本地存储(LocalStorage), SessionStorage, Cookies等持久化机制管理方面有着不可替代的作用; 同样也适用于审查服务端推送过来的消息队列长度之类的指标参数设定合理与否等方面考虑因素较多时候需要用到该板块来进行全方位考量评估工作进展程度如何达到最佳实践标准水平线之上才行哦! #### 实际案例演示 假设我们需要排查某个按钮点击后未触发相应弹窗的问题,则可通过如下步骤完成诊断过程: 1. 利用 Elements 查找对应按钮所在的位置; 2. 设置合适的断点等待事件被激活后再继续下一步骤动作序列安排计划表制定方案设计图稿绘制等工作环节紧密相连相互配合才能取得理想成果展示出来供大家欣赏学习借鉴参考价值极高呢! ```javascript // 示例代码片段:简单模拟一个按钮点击处理函数 document.querySelector('#testButton').addEventListener('click', function() { alert('Button clicked!'); }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值