divtools checker

Testen ob devtools ( Browserkonsole ) geöffnet ist

Der hier verwendete 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>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!