参考资料

1. HTML 图像
2. 网页防采集有哪几种方式
3. HTML 强调
4. 不同浏览器的禁用方法
5. HTML 折行
6. HTML 注释详解
7. HTML 使用 Class 与 ID 的差异
8. HTML 段落格式化标签

如何检测开发者工具是否被禁用？

检测开发者工具是否被禁用的方法及示例

1. 检查console对象是否被修改

if (!window.console || !console.log) {
    console.log('开发者工具可能被禁用');
} else {
    console.log('开发者工具可用');
}

2. 尝试调用console方法并捕获错误

try {
    console.log('测试');
    console.log('开发者工具可用');
} catch (e) {
    console.log('开发者工具可能被禁用');
}

3. 检测debugger语句是否被阻止

let devtoolsOpen = false;
function detectDevTools() {
    const start = Date.now();
    debugger;
    if (Date.now() - start > 100) {
        devtoolsOpen = true;
    }
}
detectDevTools();
console.log('开发者工具状态:', devtoolsOpen ? '打开' : '关闭');

4. 检查Function.prototype.toString是否被修改

const isDevToolsDisabled = (function() {
    const dummyFn = function() {};
    return dummyFn.toString() !== 'function() {}';
})();

console.log('开发者工具状态:', isDevToolsDisabled ? '可能被修改' : '正常');

5. 监听窗口大小变化（开发者工具会影响布局）

let devToolsOpen = false;
const threshold = 160; // 检测阈值

window.addEventListener('resize', () => {
    if (window.outerWidth - window.innerWidth > threshold || 
        window.outerHeight - window.innerHeight > threshold) {
        devToolsOpen = true;
    } else {
        devToolsOpen = false;
    }
    console.log('开发者工具状态:', devToolsOpen ? '打开' : '关闭');
});

注意：这些方法都不是100%可靠，现代浏览器可能会绕过这些检测。