Testen ob devtools ( Browserkonsole ) geöffnet ist
Code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Detect if DevTools is open">
<meta name="author" content="Sindre Sorhus">
<meta name="viewport" content="width=device-width">
<title>devtools-detect • Detect if DevTools is open</title>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<style>
* {
padding: 0;
margin: 0;
}
.main h1 {
font-size: 60px;
font-weight: 100;
}
#devtools-state {
margin: 50px 0 36px 0;
font-size: 100px;
font-weight: 200;
}
#devtools-orientation {
margin-bottom: 40px;
font-size: 28px;
height: 28px;
font-weight: 100;
}
.instruction {
font-weight: 200;
color: #666;
}
#raus {
background: rgba(2,2,2,0.8);
width: 100%;
position: fixed;
display: none;
top: 0;
height: 100vh;
color: red;
overflow: hidden;
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
align-items: center;
justify-content: space-around;
}
#raus h1{
line-height: 50px;
font-size:300%;
}
</style>
</head>
<body>
<div class="container">
<section class="main span12 text-center">
<h1>Is DevTools open?</h1>
<h2 id="devtools-state"></h2>
<h3 id="devtools-orientation"></h3>
<div class="instruction">Try it out by opening DevTools</div>
</section>
</div>
<div id="raus">
<h1>Devtool nutzung verboten<br>You go to Google.<br>Bye,Bye...</h1>
</div>
<script>
const devtools = {
isOpen: false,
orientation: undefined,
};
const threshold = 160;
const emitEvent = (isOpen, orientation) => {
globalThis.dispatchEvent(new globalThis.CustomEvent('devtoolschange', {
detail: {
isOpen,
orientation,
},
}));
};
const main = ({emitEvents = true} = {}) => {
const widthThreshold = globalThis.outerWidth - globalThis.innerWidth > threshold;
const heightThreshold = globalThis.outerHeight - globalThis.innerHeight > threshold;
const orientation = widthThreshold ? 'vertical' : 'horizontal';
if (
!(heightThreshold && widthThreshold)
&& ((globalThis.Firebug && globalThis.Firebug.chrome && globalThis.Firebug.chrome.isInitialized) || widthThreshold || heightThreshold)
) {
if ((!devtools.isOpen || devtools.orientation !== orientation) && emitEvents) {
emitEvent(true, orientation);
}
devtools.isOpen = true;
devtools.orientation = orientation;
} else {
if (devtools.isOpen && emitEvents) {
emitEvent(false, undefined);
}
devtools.isOpen = false;
devtools.orientation = undefined;
}
};
main({emitEvents: false});
setInterval(main, 500);
var weg=document.getElementById('raus');
const stateElement = document.querySelector('#devtools-state');
const orientationElement = document.querySelector('#devtools-orientation');
stateElement.textContent = devtools.isOpen ? 'yes' : 'no';
orientationElement.textContent = devtools.orientation ? devtools.orientation : '';
if(stateElement.textContent=='yes'){
weg.style.display='block';
}else{
weg.style.display='none';
}
window.addEventListener('devtoolschange', event => {
stateElement.textContent = event.detail.isOpen ? 'yes' : 'no';
if(stateElement.textContent=='yes'){
weg.style.display='block';
}else{
weg.style.display='none';
}
orientationElement.textContent = event.detail.orientation ? event.detail.orientation : '';
});
</script>
</body>
</html>