如何检测Firefox DevTools是否打开？已找到Chrome、Firebug检测方法

其实Firefox并没有提供官方的API来直接检测开发者工具的状态，不过社区里总结了几个实用的hack方法，虽然不是完美的，但大部分场景下都能生效：

方法一：利用窗口尺寸差异（适用于内嵌式DevTools） #

当DevTools以侧边栏或底部面板的形式打开时，浏览器的outerWidth/outerHeight和innerWidth/innerHeight会产生明显的差值。我们可以通过这个差值来判断：

function isFirefoxDevToolsOpen() {
    // 检测侧边或底部打开的情况（阈值可以根据实际调整）
    const hasSizeDiff = window.outerWidth - window.innerWidth > 160 || 
                       window.outerHeight - window.innerHeight > 100;
    // 结合独立窗口的检测逻辑
    return hasSizeDiff || checkConsoleExecutionDelay();
}

// 检测独立窗口形式的DevTools
function checkConsoleExecutionDelay() {
    const startTime = performance.now();
    // 执行一个空的console.log，DevTools打开时渲染日志会有额外开销
    console.log('');
    console.clear();
    const endTime = performance.now();
    // 当延迟超过10ms时，大概率DevTools是打开的
    return endTime - startTime > 10;
}

注意：这个方法的局限性在于，如果用户把DevTools拖成独立窗口，尺寸差值就会消失，这时候就需要依赖控制台执行延迟的检测逻辑——因为DevTools打开时，浏览器需要把日志渲染到控制台，执行时间会比关闭时慢很多。

方法二：利用debugger语句的执行特性 #

这个方法利用了DevTools打开时debugger语句会触发断点暂停的特性：

let devToolsStatus = false;

function checkDevToolsState() {
    devToolsStatus = false;
    debugger; // DevTools打开时会在此暂停，后续代码不会执行
    devToolsStatus = true;
}

// 定时检测，比如每1秒执行一次
setInterval(() => {
    checkDevToolsState();
    console.log(devToolsStatus ? "DevTools 已关闭" : "DevTools 已打开");
}, 1000);

局限性：如果用户在DevTools中关闭了“断点自动暂停”的功能，这个方法就会失效，而且每次检测都会触发断点标记，体验不太友好，适合一些临时调试场景。

方法三：CSS媒体查询辅助检测（仅适用于侧边打开的情况） #

我们可以创建一个隐藏元素，通过媒体查询监听窗口宽度变化，当DevTools侧边打开压缩窗口宽度时，改变元素的样式，从而判断状态：

function isDevToolsSideOpen() {
    const testElement = document.createElement('div');
    // 设置隐藏样式
    Object.assign(testElement.style, {
        width: '100px',
        height: '100px',
        position: 'absolute',
        top: '-9999px',
        left: '-9999px',
        visibility: 'hidden'
    });
    // 添加媒体查询规则：当窗口宽度小于800px时，隐藏元素
    testElement.setAttribute('style', testElement.style.cssText + '; @media (max-width: 800px) { display: none; }');
    document.body.appendChild(testElement);
    
    const computedStyle = window.getComputedStyle(testElement);
    const isOpen = computedStyle.display === 'none';
    document.body.removeChild(testElement);
    
    return isOpen;
}

注意：这个方法只能检测DevTools在侧边打开且窗口宽度被压缩到阈值以下的情况，局限性比较大，适合作为补充手段。

需要说明的是，这些方法都是非官方的hack，随着Firefox版本的更新可能会失效，而且无法完全阻止有经验的开发者绕过检测。如果是用于防止调试，这些方法只能起到基础的防护作用。

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