检测何时“检查元素"被检测到.开了 [英] Detect when "Inspect Element" is open
问题描述
Samy Kamkar的网站
这是如何工作的?
这需要一些挖掘.samy.pl在此代码的顶部具有多个间接和混淆级别.它使用的检测代码版本不同于JohanP找到的 GitHub存储库.与GitHub存储库不同，samy.pl中的代码可以在不停靠的情况下检测 devtools
它是通过使用一个简短的脚本来实现的，该脚本根据devtools是打开还是关闭而执行不同.
示例脚本
这是一个独立的例子；在浏览器中打开它，并注意打开和关闭devtools时输出的变化(无论是否停靠):
<！DOCTYPE html>< html><身体>< pre id ="output"></pre>< script type ="text/javascript">var element = new Image;var devtoolsOpen = false;element .__ defineGetter __("id"，function(){devtoolsOpen = true;//仅在打开devtools时执行.});setInterval(function(){devtoolsOpen = false;console.log(element);document.getElementById('output').innerHTML + =(devtoolsOpen?"dev工具已打开\ n":"dev工具已关闭\ n")；}，1000)；</script></body></html> 工作原理
setInterval每秒钟执行一次.无论devtools是打开还是关闭， console.log 始终执行:始终定义 console 对象.但是， log 方法仅在打开devtools时将输出写入控制台.如果devtools已关闭，则 console.log 是无操作的.这是让您检测devtools是否打开的关键:检测日志操作是否为空操作.
在将 element 写入控制台的过程中，它获取元素的ID.这将调用 __ defineGetter __ .因此， console.log(element)仅在devtools打开且 console.log 不是no-op时才调用该函数.在该函数中设置了该标志，使我们每秒都能获得关于devtools状态的更新视图.
samy.pl使用一些其他技巧来隐藏此内容:控制台也每秒被清除，并且此代码使用空格(！)编码进行混淆.
Samy Kamkar's website, http://samy.pl, knows when the console is being opened and wipes the source/console when it does open.
How does this work?
This took some digging. samy.pl has several levels of indirection and obfuscation on top of this code. It uses a different version of the detection code than the GitHub repository found by JohanP. The code in samy.pl, unlike the GitHub repository, can detect the devtools when they are not docked.
It does so by using a short script that executes differently depending on whether devtools is open or closed.
Example script
Here's a self-contained example; open it in a browser and notice how the output changes as the devtools are opened and closed (whether it is docked or not):
<!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>
How it works
The setInterval is executed every second. console.log always executes, whether the devtools are open or closed: The console object is always defined. However, the log method only writes output to the console when the devtools are open. If the devtools are closed, console.log is a no-op. That's the key that lets you detect if the devtools are open: detecting if the log operation is a no-op.
In the process of writing element to the console, it gets the id of the element. That calls the function attached with __defineGetter__. Therefore, console.log(element) only calls that function when the devtools are open and console.log is not a no-op. The flag is set in that function, giving us an updated view of the devtools state every second.
samy.pl uses some additional tricks to hide this: the console is also cleared every second, and this code is obfuscated with a whitespace (!) encoding.
这篇关于检测何时“检查元素"被检测到.开了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
