Skip to content

Instantly share code, notes, and snippets.

@ranaroussi

ranaroussi/demo.html

Last active November 25, 2022 15:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ranaroussi/2079b286e348eed100cf73a3eb39e74d to your computer and use it in GitHub Desktop.
Save ranaroussi/2079b286e348eed100cf73a3eb39e74d to your computer and use it in GitHub Desktop.
Download ZIP
Detect if DevTools is open and its orientation
Raw
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
<script src="devtools.js"></script>
<script>
devTools.init((o) => {
if (o.open) {
alert('devtools opened');
} else {
alert('devtools closed');
}
});
</head>
<body>
</body>
</html>
Raw
devtools.js
const devTools = {
wasOpen: null,
open: false,
orientation: undefined,
check(cb) {
const w = window.outerWidth - window.innerWidth > 160;
const h = window.outerHeight - window.innerHeight > 160;
const firebug = (window.Firebug && window.Firebug.chrome && window.Firebug.chrome.isInitialized);
if ([firebug, w, h].some(x => x)) {
this.open = true;
this.orientation = w ? 'vertical' : 'horizontal';
} else {
this.open = false;
this.orientation = undefined;
}
if (this.wasOpen !== this.open) {
cb({
open: this.open,
orientation: this.orientation,
});
}
this.wasOpen = this.open;
},
init(cb, interval = 500) {
setInterval(() => {
this.check(cb);
}, interval);
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment