如何使用JavaScript阻止Inspect Element（审查元素）功能？

首先得明确：没有任何方法能完全阻止用户打开开发者工具，但可以通过一些手段提高门槛，增加普通用户的操作难度。以下是几种实用的方案：

1. 禁用右键菜单 #

你之前用的oncontextmenu='return false'可以用，但更推荐事件监听的方式，兼容性更好：

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

2. 拦截开发者工具快捷键 #

针对常见的打开开发者工具/查看源码的快捷键，直接阻止默认行为：

document.addEventListener('keydown', function(e) {
    // 拦截 Ctrl+Shift+I/J/C、F12
    if ((e.ctrlKey && e.shiftKey && ['I', 'J', 'C'].includes(e.key)) || e.key === 'F12') {
        e.preventDefault();
    }
    // 拦截 Ctrl+U（查看页面源码）
    if (e.ctrlKey && e.key === 'U') {
        e.preventDefault();
    }
    // 拦截 Ctrl+Shift+K（Firefox控制台快捷键）
    if (e.ctrlKey && e.shiftKey && e.key === 'K') {
        e.preventDefault();
    }
});

3. 检测开发者工具是否打开 #

当用户通过浏览器菜单手动打开开发者工具时，可以通过窗口尺寸变化检测，然后做相应处理：

let isDevToolsOpen = false;
const checkDevToolsStatus = () => {
    // 开发者工具打开时，窗口内外尺寸差会超过阈值
    const sizeThreshold = 160;
    const widthDiff = window.outerWidth - window.innerWidth;
    const heightDiff = window.outerHeight - window.innerHeight;
    
    if ((widthDiff > sizeThreshold || heightDiff > sizeThreshold) && !isDevToolsOpen) {
        isDevToolsOpen = true;
        // 自定义处理逻辑，比如隐藏页面或弹出提示
        document.body.style.visibility = 'hidden';
        alert('禁止使用开发者工具');
    } else if ((widthDiff <= sizeThreshold && heightDiff <= sizeThreshold) && isDevToolsOpen) {
        isDevToolsOpen = false;
        document.body.style.visibility = 'visible';
    }
};

// 定时检测+窗口 resize 时检测
setInterval(checkDevToolsStatus, 500);
window.addEventListener('resize', checkDevToolsStatus);

重要提醒 #

这些方法只能防普通用户，懂技术的人完全可以绕过：比如禁用浏览器JavaScript、修改浏览器快捷键设置、使用第三方调试工具等。

对于游戏场景来说，不要依赖前端保护核心逻辑或数据，关键计算（比如分数判定、道具解锁）一定要放在后端做验证，前端的限制只是辅助手段。

内容的提问来源于stack exchange，提问作者Toy Fan