产品经理：能不能禁止用户打开F12开发者工具？

Posted 2021-12-29 SHERlocked93

作者：MasterTang

链接：https://www.zhihu.com/question/340109086/answer/785160782

把你想到的启动它的方式都禁止就行了

禁止F12

判断是否按下F12并覆盖

window.onkeydown = window.onkeyup = window.onkeypress = function (event) 
    // 判断是否按下F12，F12键码为123
    if (event.keyCode = 123) 
        event.preventDefault(); // 阻止默认事件行为
        window.event.returnValue = false;
    

禁止右键

为右键添加自定义事件

// 为右键添加自定义事件，可以禁用
window.oncontextmenu = function() 
    event.preventDefault(); // 阻止默认事件行为
    return false;

禁止预先调试和快捷键组合

判断是否打开控制台，打开了就重新加载 😂

1. 提前打开调试窗口，然后在地址中输入网址，这样就算不用右键和F12也是打开调试窗口的；

2. 通过浏览器菜单打开开发者工具 来开启调试窗口，还有诸如 shift+ctrl+i 的快捷键打开控制台

对于这种预先打开调试窗口的方法，我们可以通过比较屏幕 window.outerWidth 和页面可见内容区域 window.innerWidth 的差距判断是否打开控制台

var threshold = 160; // 打开控制台的宽或高阈值
// 每秒检查一次
window.setInterval(function() 
    if (window.outerWidth - window.innerWidth > threshold ||
    window.outerHeight - window.innerHeight > threshold) 
        // 如果打开控制台，则刷新页面
        window.location.reload();
    
, 1e3);

最后

如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：

1. 点个「在看」，让更多的人也能看到这篇内容（喜欢不点在看，都是耍流氓 -_-）

2. 欢迎加我微信「qianyu443033099」拉你进技术群，长期交流学习...

3. 关注公众号「前端下午茶」，持续为你推送精选好文，也可以加我为好友，随时聊骚。

点个在看支持我吧，转发就更好了