参考资料

1. HTML 属性
2. HTML 表单详解
3. HTML 段落
4. 如何添加按钮的过渡动画效果？
5. 如何检测开发者工具是否被禁用？
6. 如何判断一个网站是否被采集
7. Html过滤工具有哪些
8. HTML 音频(Audio)

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

1. 禁用右键菜单

document.addEventListener('contextmenu', function(e) {
    e.preventDefault();
});

2. 禁用F12键

document.onkeydown = function(e) {
    if(e.keyCode == 123) {
        return false;
    }
};

3. 禁用Ctrl+Shift+I组合键

document.addEventListener('keydown', function(e) {
    if(e.ctrlKey && e.shiftKey && e.keyCode == 73) {
        e.preventDefault();
    }
});

4. 禁用浏览器菜单栏

window.addEventListener('resize', function() {
    if(window.outerWidth - window.innerWidth > 100) {
        window.close();
    }
});

5. 定时检查开发者工具状态

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

6. 禁用调试函数

function debuggerProtect() {
    setInterval(function() {
        (function() {
            return false;
        }
        ['constructor']('debugger')['call']());
    }, 50);
}
debuggerProtect();

7. 使用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)');

8. 禁用控制台输出

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

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