前端禁止打开开发者工具

检测原理

通过检测视口高度，来判断是否打开了开发者工具。

检测代码

const devtools={isOpen:!1,orientation:void 0},threshold=160,emitEvent=(isOpen,orientation)=>{globalThis.dispatchEvent(new globalThis.CustomEvent('devtoolschange',{detail:{isOpen:isOpen,orientation:orientation}}))},main=({emitEvents:emitEvents=!0}={})=>{const widthThreshold=globalThis.outerWidth-globalThis.innerWidth>160,heightThreshold=globalThis.outerHeight-globalThis.innerHeight>160,orientation=widthThreshold?'vertical':'horizontal';heightThreshold&&widthThreshold||!(globalThis.Firebug&&globalThis.Firebug.chrome&&globalThis.Firebug.chrome.isInitialized||widthThreshold||heightThreshold)?(devtools.isOpen&&emitEvents&&emitEvent(!1,void 0),devtools.isOpen&&window.location.reload(),devtools.isOpen=!1,devtools.orientation=void 0):(devtools.isOpen&&devtools.orientation===orientation||!emitEvents||emitEvent(!0,orientation),devtools.isOpen||(document.body.innerHTML='<style>body{height:100vh;display:flex;justify-content:center;align-items:center}h1{text-align:center;font-size:50px;color:#ccc;cursor:default}</style><h1>禁止使用开发者工具</h1>'),devtools.isOpen=!0,devtools.orientation=orientation);debugger;};main({emitEvents:!1}),setInterval(main,500)