├── .editorconfig ├── .gitattributes ├── .gitignore ├── index.html ├── index.js ├── license ├── package.json └── readme.md /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = tab 5 | end_of_line = lf 6 | charset = utf-8 7 | trim_trailing_whitespace = true 8 | insert_final_newline = true 9 | 10 | [{package.json,*.yml}] 11 | indent_style = space 12 | indent_size = 2 13 | 14 | [*.md] 15 | trim_trailing_whitespace = false 16 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | devtools-detect • Detect if DevTools is open 9 | 10 | 58 | 59 | 60 | 61 | Fork me on GitHub

62 | 63 |

64 |

65 |

is DevTools open?

66 |

67 |

68 |

Try it out by opening DevTools

69 |

70 | 75 |

76 | 77 | 89 | 90 | 98 | 99 | 100 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable spaced-comment */ 2 | /*! 3 | devtools-detect 4 | Detect if DevTools is open 5 | https://github.com/sindresorhus/devtools-detect 6 | by Sindre Sorhus 7 | MIT License 8 | */ 9 | (function () { 10 | 'use strict'; 11 | var devtools = { 12 | open: false, 13 | orientation: null 14 | }; 15 | var threshold = 160; 16 | var emitEvent = function (state, orientation) { 17 | window.dispatchEvent(new CustomEvent('devtoolschange', { 18 | detail: { 19 | open: state, 20 | orientation: orientation 21 | } 22 | })); 23 | }; 24 | 25 | setInterval(function () { 26 | var widthThreshold = window.outerWidth - window.innerWidth > threshold; 27 | var heightThreshold = window.outerHeight - window.innerHeight > threshold; 28 | var orientation = widthThreshold ? 'vertical' : 'horizontal'; 29 | 30 | if (!(heightThreshold && widthThreshold) && 31 | ((window.Firebug && window.Firebug.chrome && window.Firebug.chrome.isInitialized) || widthThreshold || heightThreshold)) { 32 | if (!devtools.open || devtools.orientation !== orientation) { 33 | emitEvent(true, orientation); 34 | } 35 | 36 | devtools.open = true; 37 | devtools.orientation = orientation; 38 | } else { 39 | if (devtools.open) { 40 | emitEvent(false, null); 41 | } 42 | 43 | devtools.open = false; 44 | devtools.orientation = null; 45 | } 46 | }, 500); 47 | 48 | if (typeof module !== 'undefined' && module.exports) { 49 | module.exports = devtools; 50 | } else { 51 | window.devtools = devtools; 52 | } 53 | })(); 54 | -------------------------------------------------------------------------------- /license: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) Sindre Sorhus (sindresorhus.com) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "devtools-detect", 3 | "version": "2.1.1", 4 | "description": "Detect if DevTools is open and its orientation", 5 | "license": "MIT", 6 | "repository": "sindresorhus/devtools-detect", 7 | "author": { 8 | "name": "Sindre Sorhus", 9 | "email": "sindresorhus@gmail.com", 10 | "url": "sindresorhus.com" 11 | }, 12 | "engines": { 13 | "node": ">=0.10.0" 14 | }, 15 | "files": [ 16 | "index.js" 17 | ], 18 | "keywords": [ 19 | "browser", 20 | "detect", 21 | "identify", 22 | "check", 23 | "dev", 24 | "devtools", 25 | "developer", 26 | "orientation", 27 | "placement", 28 | "docked" 29 | ], 30 | "scripts": { 31 | "test": "xo" 32 | }, 33 | "devDependencies": { 34 | "xo": "*" 35 | }, 36 | "xo": { 37 | "envs": [ 38 | "browser" 39 | ] 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # devtools-detect 2 | 3 | > Detect if DevTools is open and its orientation 4 | 5 | Useful for when you want something special to happen when DevTools is open. Like pausing canvas, adding style debug info, etc. 6 | 7 | 8 | ## [Demo](http://sindresorhus.com/devtools-detect) 9 | 10 | 11 | ## Install 12 | 13 | ``` 14 | $ npm install --save devtools-detect 15 | ``` 16 | 17 | 18 | ## Usage 19 | 20 | ```html 21 | 22 | 34 | ``` 35 | 36 | 37 | ## Support 38 | 39 | - Chrome DevTools 40 | - Safari DevTools 41 | - Firefox DevTools 42 | - Firebug 43 | - Firebug Lite 44 | 45 | 46 | ## Caveats 47 | 48 | Doesn't work if DevTools is undocked and will show false positive if you toggle any kind of sidebar. 49 | 50 | 51 | ## License 52 | 53 | MIT © [Sindre Sorhus](http://sindresorhus.com) 54 | --------------------------------------------------------------------------------