网页如何实现打开开发者工具就自动关闭页面的功能？
2025-06-08
0
0网页实现“打开开发者工具自动关闭页面”的功能，主要通过以下技术手段组合实现：1. 检测开发者工具打开的核心逻辑（1）窗口尺寸变化监听开发者工具打开时（如Chrome的F12），会默认以侧
网页实现“打开开发者工具自动关闭页面”的功能，主要通过以下技术手段组合实现：
1. 检测开发者工具打开的核心逻辑
（1）窗口尺寸变化监听
开发者工具打开时（如Chrome的F12），会默认以侧边栏形式嵌入，导致页面可视区域宽度/高度缩小（通常减少约300px）。通过监听 resize 事件，判断窗口是否“非满屏”：
let isDevToolsOpen = false;
const originalHeight = window.innerHeight;
window.addEventListener('resize', () => {
if (window.innerHeight < originalHeight - 100) { // 经验值，工具条高度差异
isDevToolsOpen = true;
closePage(); // 触发关闭
}
});（2）性能检测（大数组打印延迟）
利用开发者工具控制台的“对象展开”特性：未打开工具时，console.log 打印大数组不会展开，性能无明显延迟；打开工具后，数组会自动展开，导致打印耗时增加。通过递归检测耗时判断：
function detectDevTools() {
const start = Date.now();
console.log(new Array(1000000).fill(0)); // 强制打印大数组
return Date.now() - start > 50; // 经验阈值，工具打开时耗时更长
}
setInterval(() => {
if (detectDevTools()) closePage();
}, 1000);（3）异步断点触发（高版本Chrome）
Chrome v121+ 支持通过异步递归 debugger 检测工具打开，无需刷新页面：
async function checkDevTools() {
while (true) {
await new Promise(resolve => setTimeout(resolve, 100));
debugger; // 打开工具时会在此处暂停，触发检测
if (isDevToolsOpen) closePage();
}
}
checkDevTools();2. 关闭页面的实现方式
（1）重定向空白页（绕过 window.close 限制）
由于 window.close() 仅能关闭通过 window.open 打开的窗口，直接调用无效。改用重定向：
function closePage() {
window.open('about:blank', '_self').close(); // 先打开空白页再关闭
// 或直接跳转空白（部分浏览器有效）
window.location.href = 'about:blank';
}（2）模拟页面崩溃（极端手段）
通过死循环或内存泄漏迫使浏览器关闭标签页（体验差，慎用）：
function closePage() {
while (true) {
new Array(10000000).fill(0); // 占用大量内存
}
}3. 禁用快捷键防止工具打开
拦截 F12、Ctrl+Shift+I 等快捷键，阻止用户手动唤起工具：
document.addEventListener('keydown', (e) => {
// 禁用F12
if (e.key === 'F12') e.preventDefault();
// 禁用Ctrl+Shift+I（Chrome）
if (e.ctrlKey && e.shiftKey && e.key === 'I') e.preventDefault();
});4. 增强防御：第三方库辅助（如 disable-devtool）
通过引入开源库（如 disable-devtool），封装上述逻辑并增强兼容性：
import DisableDevtool from 'disable-devtool';
new DisableDevtool({
onDetect: () => {
window.location.href = 'about:blank'; // 检测到工具打开即关闭
},
disableShortcuts: true, // 禁用快捷键
detectMenuOpen: true // 检测从浏览器菜单打开的工具
});5. 局限性与绕过方法
局限性：无法阻止浏览器菜单手动打开工具（如“更多工具”→“开发者工具”），但通过尺寸监听仍可触发关闭。
绕过方法：使用无痕模式、分离工具窗口（尺寸不变），或通过插件（如
DevTools Detach）规避检测。
总结
该网页通过窗口尺寸监听+性能检测+快捷键拦截的组合策略，实现了“打开开发者工具自动关闭页面”的效果。核心逻辑是利用前端间接手段（非API）检测工具状态，并通过重定向或内存操作强制关闭页面，本质是一种“反调试”防御措施，旨在保护页面内容不被轻易分析。
本文由 微wx笑 创作，采用 署名-非商业性使用-相同方式共享 4.0 许可协议，转载请附上原文出处链接及本声明。
原文链接：https://www.ivu4e.cn/blog/web/2025-06-08/2080.html
