网站DevTools检测原理问询及DevToolDetect.js代码逻辑求解

现有脚本核心检测逻辑 #

• 定时轮询：脚本每间隔500毫秒执行一次检测逻辑，实时更新DevTools的状态。
• 停靠模式DevTools检测：通过计算window.outerWidth（浏览器窗口总宽度）和window.innerWidth（页面实际显示宽度）的差值、window.outerHeight（浏览器窗口总高度）和window.innerHeight（页面实际显示高度）的差值，只要任意一个差值超过设定的160px阈值，就判定DevTools处于停靠打开状态，同时根据差值对应的维度判断是垂直停靠还是水平停靠。
• 旧版Firebug调试插件检测：针对早期火狐浏览器的Firebug调试插件，检查全局window.Firebug相关对象是否存在且已初始化，满足条件则判定调试工具已打开。
• 状态同步：检测到状态变化后会触发自定义的devtoolschange事件，站点可以监听该事件执行弹出提示、关闭页面等操作。

脱离停靠（undocked）模式可被检测的原因 #

你提供的这份DevToolDetect.js本身不支持识别undocked模式的DevTools，因为脱离停靠后DevTools是独立窗口，不会占用浏览器本身的显示空间，outer和inner的宽高差不会触发阈值。如果该模式下仍被检测，说明站点还叠加了其他常见的DevTools检测逻辑：

• 时间差检测：插入debugger语句，打开DevTools时页面执行会在debugger位置产生明显停顿，通过计算语句执行耗时判定调试工具是否打开。
• 控制台特性检测：向控制台输出特殊的对象/getter方法，只有DevTools处于打开状态时，控制台才会触发对应方法的执行，以此判定状态。

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