巧用代码：当用户打开 F12 调试模式，网页内容一键清空！

以下是一个使用 JavaScript 实现当用户打开 F12 调试模式时清空网页内容的代码示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Detect DevTools and Clear Page</title> </head> <body>  <h1>这是一个示例</h1> <p>这是一些示例文本。</p> <script> // 定义一个函数来检测开发者工具是否打开 function detectDevTools() { // 记录当前时间 const startTime = new Date().getTime(); // 强制重新计算样式，这会消耗一些时间 const style = window.getComputedStyle(document.body); // 再次记录时间 const endTime = new Date().getTime(); // 计算时间差 const timeDiff = endTime - startTime; // 如果时间差超过一定值，认为开发者工具是打开的 if (timeDiff > 5) { // 清空网页内容 document.body.innerHTML = ''; } } // 每隔一段时间检测一次开发者工具是否打开 setInterval(detectDevTools, 1000); </script> </body> </html> ``` 代码解释： 1. `detectDevTools` 函数：该函数用于检测开发者工具是否打开。通过记录两次时间戳，计算 `window.getComputedStyle` 方法执行的时间差。在开发者工具打开时，`getComputedStyle` 方法的执行时间会明显增加。如果时间差超过 5 毫秒，就认为开发者工具是打开的。 2. `setInterval` 函数：每隔 1 秒调用一次 `detectDevTools` 函数，实现持续检测开发者工具的状态。 3. 如果检测到开发者工具打开，使用 `document.body.innerHTML = ''` 清空网页的所有内容。我在以往的开发过程中，碰到过以下几点需要格外小心处理的地方： 1. 不同浏览器和设备的性能可能不同，时间差的阈值（这里是 5 毫秒）可能需要根据实际情况调整。 2. 这种检测方法并不是 100% 准确，一些高级用户可能会绕过这种检测。 3. 频繁调用 `detectDevTools` 函数可能会对页面性能产生一定影响，需要根据实际情况调整检测的时间间隔。 ######[AI写代码神器 | 584点数解答 | 2025-08-25 17:19:50]

服务商

更多选项

快捷项

自定义