参考资料

  1. HTML 表格头部、主体、页脚
  2. HTML 引文、引用和定义元素
  3. HTML 颜色
  4. HTML 常用1600 万种不同颜色颜色代码表
  5. 禁用开发者工具的方法与示例
  6. HTML 强调
  7. HTML 视频(Videos)播放
  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%可靠，现代浏览器可能会绕过这些检测。