如何禁止用户使用浏览器提供的隐藏元素设置？

首先你可以通过禁止打开控制台，防止别人进行代码调试,一般有以下方案1、禁止右键查看源码和F12

//禁止F12键盘事件
document.addEventListener('keydown', function(event){
   return 123 != event.keyCode || (event.returnValue = false)
});
//禁止右键、选择、复制
document.addEventListener(‘'contextmenu'’, function(event){
   return event.returnValue = false
})

2、通过页面宽度变化监测控制台浏览宽高变化监测主要是监测浏览器可视区域的宽高：window.innerWidth / window.innerHeight（滚动条和内容区）和浏览器宽高：window.outerWidth / window.outerHeight（inner的基础上加上工具条的宽高）之间的差值。

因为我们不知道浏览器是否开启了工具条及工具条的宽高，所以我们设置一个阈值如200，如果outer – inner 大于200，我们就认为开启了控制台。

function resize(){
    var threshold = 200;
    var widthThreshold = window.outerWidth - window.innerWidth > threshold;
    var heightThreshold = window.outerHeight - window.innerHeight > threshold;
    if(widthThreshold || heightThreshold){
        console.log('控制台打开了')
    }
}
window.addEventListener('resize', resize);
resize()

3、利用debugger的特性，无限递归这个方法不能监测控制台被打开，但是能达到不让别人浏览你代码的目的。

上面也说了：debugger 语句调用任何可用的调试功能，可以阻断代码执行，如果没有调试功能可用，则此语句不起作用。

另外：每个浏览器都有其最大调用栈，如果超出就会抛出Maximum call stack size exceeded的错误并终止程序。

利用上面讲的特性组合成下面的代码：

function check() {
    function doCheck(a) {
        (function() {}["constructor"]("debugger")()); //debugger
        doCheck(++a);
    }
    try {
        doCheck(0)
    } catch(err) {
        console.log(err)
    }
};

上面代码check运行时，如果控制台未开启，debugger 不会起作用，但是doCheck会不断循环，直至爆栈，抛出错误，中止本次check运行；如果控制台开启，则会不断的进行断点调试和循环doCheck的调用，直至爆栈；如果控制台开启，但是取消了debugger调式，虽然此时debugger 不会起作用，但递归是依然存在的，而且此时网页性能与未开启控制台相比会大幅度下降，严重的话，可能会卡死浏览器。

但是总有破解方案,个人建议也可以考虑给整体转换成图片,这样用户就没办法单独去掉