JS 判断浏览器调试模式的三种方法及注意事项

在 JavaScript 中，判断浏览器是否打开了调试模式可以通过几种方法实现。以下是一些常见的实现方式及代码示例： 方法一：利用 `console.time` 和 `console.timeEnd` 时间差 这种方法的原理是，在调试模式下，`console.timeEnd` 的执行会有延迟，通过比较 `console.time` 和 `console.timeEnd` 的时间差来判断是否打开了调试模式。 ```javascript function isDebugMode1() { // 开始计时 console.time('debugCheck'); // 结束计时 console.timeEnd('debugCheck'); // 获取计时结果 const time = console.timeEnd('debugCheck'); // 判断时间差是否超过 100 毫秒，如果超过则认为打开了调试模式 return time > 100; } // 调用函数判断是否打开调试模式 const result1 = isDebugMode1(); console.log('方法一结果：', result1); ``` 方法二：监听窗口大小变化 在调试模式下，开发者工具的打开或关闭会导致窗口大小发生变化，通过监听窗口大小变化来判断是否打开了调试模式。 ```javascript function isDebugMode2() { let width = window.innerWidth; let height = window.innerHeight; // 监听窗口大小变化事件 window.addEventListener('resize', function() { const newWidth = window.innerWidth; const newHeight = window.innerHeight; // 判断窗口大小变化是否超过 100 像素，如果超过则认为打开了调试模式 if (Math.abs(newWidth - width) > 100 || Math.abs(newHeight - height) > 100) { console.log('方法二结果：', true); } width = newWidth; height = newHeight; }); } // 调用函数开始监听 isDebugMode2(); ``` 方法三：利用 `performance.now()` 时间差 这种方法和方法一类似，通过比较 `performance.now()` 的时间差来判断是否打开了调试模式。 ```javascript function isDebugMode3() { const start = performance.now(); console.log('test'); const end = performance.now(); // 判断时间差是否超过 100 毫秒，如果超过则认为打开了调试模式 return end - start > 100; } // 调用函数判断是否打开调试模式 const result3 = isDebugMode3(); console.log('方法三结果：', result3); ``` 我在以往的开发过程中，碰到过以下几点需要格外小心处理的地方： 1. 不同浏览器对调试模式的检测可能存在差异，需要在多种浏览器中进行测试。 2. 这些方法只是一种近似判断，不能保证 100% 准确，可能会出现误判的情况。 3. 频繁检测调试模式可能会影响页面性能，需要合理控制检测频率。 ######[AI写代码神器 | 669点数解答 | 2025-09-02 14:16:19]