参考资料

  1. 隐形水印嵌入技术详解
  2. cache-control 浏览器缓存行为
  3. HTML 内联元素
  4. HTML 表格高度和宽度
  5. HTML/UBB互转有哪些
  6. html链接标签详细说明以及案例
  7. html列表标签详细说明以及案例
  8. HTML 标签

禁用开发者工具的多种方法

  1. 禁用右键菜单

document.addEventListener('contextmenu', function(e) {
    e.preventDefault();
});
  1. 禁用F12键

document.onkeydown = function(e) {
    if(e.keyCode == 123) {
        return false;
    }
};
  1. 禁用Ctrl+Shift+I组合键

document.addEventListener('keydown', function(e) {
    if(e.ctrlKey && e.shiftKey && e.keyCode == 73) {
        e.preventDefault();
    }
});
  1. 禁用浏览器菜单栏

window.addEventListener('resize', function() {
    if(window.outerWidth - window.innerWidth > 100) {
        window.close();
    }
});
  1. 定时检查开发者工具状态

setInterval(function() {
    if(window.outerWidth - window.innerWidth > 100) {
        document.body.innerHTML = "禁止使用开发者工具";
    }
}, 1000);
  1. 禁用调试函数

function debuggerProtect() {
    setInterval(function() {
        (function() {
            return false;
        }
        ['constructor']('debugger')['call']());
    }, 50);
}
debuggerProtect();
  1. 使用Web Worker检测

const worker = new Worker('data:text/javascript,setInterval(()=>{if(window.outerWidth-window.innerWidth>100||window.outerHeight-window.innerHeight>100){window.location.href="about:blank"}},1000)');
  1. 禁用控制台输出

console.log = function() {};
console.warn = function() {};
console.error = function() {};

注意:这些方法只能增加调试难度,不能完全阻止开发者工具的使用。