<!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> html, body { padding: 0; margin: 0; } .main { position: absolute; width: 700px; height: 250px; top: 50%; left: 50%; margin-top: -170px; /* negative number 1/2 height, increased it a bit to push it upwards */ margin-left: -350px; /* negative number 1/2 width */ } .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; } .twitter-btn { position: fixed; bottom: 20px; left: 0; width: 100%; text-align: center; } </style> </head> <body> <a href="https://github.com/sindresorhus/devtools-detect"> <img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"> </a> <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> <footer> <div class="twitter-btn"> <a href="https://twitter.com/share" class="twitter-share-button" data-url="https://github.com/sindresorhus/devtools-detect" data-via="sindresorhus">Tweet</a> </div> </footer> </div> <script type="module"> import devtools from './index.js'; const stateElement = document.querySelector('#devtools-state'); const orientationElement = document.querySelector('#devtools-orientation'); stateElement.textContent = devtools.isOpen ? 'yes' : 'no'; orientationElement.textContent = devtools.orientation ? devtools.orientation : ''; window.addEventListener('devtoolschange', event => { stateElement.textContent = event.detail.isOpen ? 'yes' : 'no'; orientationElement.textContent = event.detail.orientation ? event.detail.orientation : ''; }); </script> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-25562592-5', 'sindresorhus.com'); ga('send', 'pageview'); </script> </body> </html>