最佳答案
这需要一些挖掘。 samy.pl 在此代码之上有几个级别的间接和混淆。它使用与 the GitHub repository 不同版本的检测代码由 JohanP 发现。 samy.pl 中的代码与 GitHub 存储库不同，可以检测到 devtools当它们没有停靠时。
它通过使用一个简短的脚本来实现这一点，该脚本根据 devtools 是打开还是关闭而执行不同。
示例脚本
这是一个独立的例子；在浏览器中打开它并注意随着开发工具打开和关闭(无论是否停靠)输出如何变化:
<!DOCTYPE html>
<html>
<body>
<pre id="output"></pre>
<script type="text/javascript">
var element = new Image;
var devtoolsOpen = false;
element.__defineGetter__("id", function() {
devtoolsOpen = true; // This only executes when devtools is open.
});
setInterval(function() {
devtoolsOpen = false;
console.log(element);
document.getElementById('output').innerHTML += (devtoolsOpen ? "dev tools is open\n" : "dev tools is closed\n");
}, 1000);
</script>
</body>
</html>
工作原理
setInterval 每秒执行一次。 console.log 始终执行，无论开发工具是打开还是关闭:console 对象始终已定义。但是，log 方法仅在开发工具打开时将输出写入控制台。如果 devtools 关闭，console.log 是空操作。这是让您检测开发工具是否打开的关键:检测日志操作是否为空操作。
在向控制台写入element的过程中，获取元素的id。这会调用 __defineGetter__ 附带的函数.因此，console.log(element) 仅在开发工具打开且 console.log 不是空操作时调用该函数。该标志在该函数中设置，每秒为我们提供 devtools 状态的更新 View 。
samy.pl 使用了一些额外的技巧来隐藏这一点:控制台也会每秒被清除一次，并且这段代码使用空格 (!) 编码进行了混淆处理。
关于javascript - 检测 "Inspect Element"何时打开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42193700/