Обнаруживать, когда открыт "Проверить элемент"

Сайт Samy Kamkar, http://samy.pl, знает, когда консоль открывается и вытирает источник/консоль, когда она открывается.

Как это работает?

Ответ 1

Это потребовало некоторого рытья. samy.pl имеет несколько уровней косвенности и обфускации поверх этого кода. Он использует другую версию кода обнаружения, чем репозиторий GitHub, найденный JohanP. Код в samy.pl, в отличие от репозитория GitHub, может обнаружить devtools, когда они не состыкованы.

Это делается с помощью короткого script, который выполняется по-разному в зависимости от того, открыт или закрыт devtools.

Пример script

Здесь - самодостаточный пример; откройте его в браузере и обратите внимание на то, как результат изменяется, когда 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 всегда выполняется независимо от того, открыты или закрыты devtools: объект console всегда определен. Однако метод log записывает вывод только на консоль, когда devtools открыты. Если devtools закрыты, console.log не работает. Это ключ, который позволяет вам обнаружить, открыты ли devtools: обнаружение отсутствия операции журнала.

В процессе написания element на консоли он получает идентификатор элемента. Это вызывает функцию, прикрепленную с помощью __defineGetter__. Поэтому console.log(element) вызывает эту функцию только тогда, когда devtools открыты, а console.log не является no-op. Флаг установлен в этой функции, давая нам обновленный вид состояния devtools каждую секунду.

samy.pl использует некоторые дополнительные трюки, чтобы скрыть это: консоль также очищается каждую секунду, и этот код обфускается пробельной (!) кодировкой.