网页如何禁止F12用户访问开发者工具？分享5段优质JS代码片段！

Hi，这里是前端后花园，每天学习一个 JS 片段，涨涨知识🧀！今天带来的是如何禁止F12用户访问开发者工具。

在网页中完全禁止用户访问开发者工具（如通过 F12 键或右键菜单）是不可能的，因为这些功能是由用户的浏览器控制的，而不是由网页本身控制的。以下方法并不能完全阻止有技术能力的用户。

1. 禁用右键菜单

通过 JavaScript 禁用右键菜单，但这并不能阻止用户通过键盘快捷键（如 F12）打开开发者工具。

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

2. 监控键盘F12事件

尝试监控键盘事件来检测 F12 键的按下。

document.addEventListener('keydown', function(event) {
    // F12 的 keyCode 是 123
    if (event.keyCode === 123) {
        event.preventDefault();
        console.warn('F12 键被按下，但已被阻止！');
    }
}, false);

3. 无限 debugger

通过在代码中无限执行debugger语句，不打开开发者工具时，debugger 不会执行的；在打开开发者工具时，会执行到 debugger 语句，无法进一步查看元素。

(function anonymous(
) {
  function ban() {
    setInterval(() => { debugger; }, 500);
  }
  try {
    ban();
  } catch (err) { }
})

4. 利用 debugger 断点计时

利用打开开发者工具时，会执行到 debugger 语句特性，通过计算断点前后时间差，超过阈值（100ms）则一定是打开了开发者工具，直接重定向到空白页。

setInterval(function () {
  var startTime = performance.now();
  // 设置断点
  debugger;
  var endTime = performance.now();
  // 设置一个阈值，例如100毫秒
  if (endTime - startTime > 100) {
    window.location.href = 'about:blank';
  }
}, 100);

5. 使用第三方库

第三方库 devtools-detector 通过监听界面尺寸变化、时间戳差异等方式**，**检测开发者工具是否被打开。使用示例：

import { addListener, launch } from 'devtools-detector';

const view = document.createElement('div');
document.body.appendChild(view);

addListener((isOpen) => {
  view.innerText = isOpen ? 'DevTools status: open' : 'DevTools status: closed';
});

launch();

第三方库 disable-devtool，声称可以禁用所有一切可以进入开发者工具的方法，防止通过开发者工具进行的 ‘代码搬运’，支持F12按钮、右键点击和浏览器菜单中禁用网页开发者工具。使用示例：

import DisableDevtool from 'disable-devtool';

DisableDevtool();

以上总结了常见的五种方法来增加用户访问开发者工具的难度，但完全阻止是不可能的，仍然有技术方案可以破解。

---

这里是JS代码片段系列，记录开发过程常见代码片段，往期精选JS代码片段：

四个初始化 JavaScript Array数组方法及性能对比

JS片段：如何将文本复制到剪贴板

JS片段：如何计算 SHA-256 hash值

如何获取字符串的字节长度？分享1段优质JS代码片段！

如何用JS实现sleep函数？分享1段优质JS代码片段！

JS执行长任务时如何让出控制权？分享1段优质JS代码片段！

JS如何校验日期是否合法？分享1段优质JS代码片段！