WEB 项目如何禁用 F12 等功能

一、前言

作为Web项目开发的程序员，我们调试Web前端代码的时候离不开的就是浏览器的F12功能，他是开发者的利器，但是项目上线后，基于安全方面的考虑，往往很多平台会想办法禁用F12功能，哪怕不能绝对，也想提高别人研究的门槛。本文将通过几种能打开F12功能的方式，逐一讲解。

二、禁用右键

打开F12的方式可以通过右键的方式打开，那么想禁用F12的功能，禁用右键就必须要实现的。

document.addEventListener('contextmenu',function(event){
    event = window.event || event
    event.returnValue = false
})

三、禁用 F12 按键

document.addEventListener('keydown',function(event){
    event = window.event || event
    if(window.event && window.event.keyCode == 123) {
        // event.keyCode =0;
        event.returnValue = false
    }
})

四、禁止任何键盘敲击事件

防止 F12 和 shift+ctrl+i 调起开发者工具

window.onkeydown = window.onkeyup = window.onkeypress = function () {
    window.event.returnValue = false;
    return false;
}

五、监控页面宽高

如果用户在工具栏调起开发者工具，那么判断浏览器的可视高度和可视宽度是否有改变，如有改变则关闭本页面

var h = window.innerHeight,w=window.innerWidth;
window.onresize = function () {
    if (h!= window.innerHeight||w!=window.innerWidth){
        window.close();
        window.location = "about:blank";
    }
}

六、写在最后

关于禁用 F12 我相信远不止本文上面的几个方法，欢迎大家在下方留言你们是怎么做的。