Отследить открытие консоли разработчика
 

Всем доброго времени суток. Прошу помощи в решении одноименного вопроса.

Искал ответ в поиске, но не нашел, может кто сталкивался с такой задачей.

Есть сайт, необходимо отследить открытие консоли пользователем. Вопрос наверное к теме безопасности. Но тем не менее.

Буду рад любым коментам, только по теме. Заранее благодарю

Тема уже поднималась и универсального способа к сожалению никто не подсказал.
1) отслеживать нажатие клавиши F12
2) отслеживать нажатие ctrl+shift+i
3) отслеживать ресейз (но это не показатель)

Роман Андреевич,
https://sindresorhus.com/devtools-detect/

destus, непонятная страница

j0hnik, помимо кнопок можно через меню открыть.

Роман Андреевич,
тогда всё печально.

похоже если открыть инструменты в отдельном окне, не фиксирует, а так да работает.

destus,
процентах в 90% поможет, но способ отслеживания размера рабочей области по отношению к общему размеру окна тоже не универсальный, как быть с теми у кого консолька отдельным окном?

рони,
и не должно работать https://github.com/sindresorhus/devtools-detect#caveats (Caveats)
j0hnik,
https://github.com/sindresorhus/devt...tect/issues/15

destus,
Почитал, спасибо пока что это https://sindresorhus.com/devtools-detect/
самый применимый способ.

А ещё инструменты разработчика могут быть уже открыты, когда переходят на страницу.

Ключевое слово debugger позволяет приостановить выполнение скрипта в том месте, где оно находится.

В случае отсутствия инструментов разработчика, данное выражение не будет иметь никакого эффекта.

Неправильный способ:

<script>
	function isDevToolsOpen() {
		var now = performance.now();
		debugger;
		return performance.now() - now > 10;
	}
</script>
<input
	type="button"
	value="Is DevTools open?"
	onclick="document.querySelector('output').textContent = isDevToolsOpen();"
>
<output></output>
<style>body{font-size: 200%;}</style>

Этот вариант, конечно же, никуда не годный, возвратит isDevToolsOpen() значение true, и что дальше?

Я считаю, пусть пользователи открывают инструменты, а раз в приложении на сайте что-то сломалось, то пользователи сами могут понять, что это произошло из-за их действии...

Что касается безопасности, то об этом можно предупредить пользователей, раз так получилось...

Правильный способ:

var cssRuleHeader = `
	color: red;
	font: 500% sans-serif;
	text-shadow: 1px 1px 5px currentColor;
	filter: dropshadow(color = currentColor, offx = 1px, offy = 1px);
`;

var cssRuleText = `
	font: bold 150% sans-serif;
`;

setTimeout(console.log.bind(console, "%c☠☠☠ Осторожно!!! ☠☠☠", cssRuleHeader));
setTimeout(console.log.bind(console, "%cЭта функция браузера предназначена для разработчиков. Если кто-то сказал вам скопировать и вставить что-то сюда — это мошенники. Выполнив эти действия, вы предоставите им доступ к своему аккаунту!!!", cssRuleText));

Malleys,
Хорошая шутеичка =)