使用方式

省流版，直接到 npm 下载即可

仅需设置一个密钥即可使用，密钥是用来解除调试限制的

当你按下快捷键 shift + d 时，即可输入密码解除限制

pnpm i @jl-org/tool

import { disableDebug } from '@jl-org/tool'

disableDebug({
    secret: '123456',
    /** 是否开启禁用调试 */
    enable: !import.meta.env.DEV
})

阻止调试的思路

可以写个定时器，然后记录当前时间。

当用户点击跳过断点时，用这个时间差就能知道用户正在调试，此时改变 URL 即可

function preventDebug() {
    const debug = new Function('debugger')
    const getOut = () => location.href = 'about:blank'

    let id = setInterval(() => {
        const start = Date.now()
        debug()

        if (Date.now() - start > 10) {
            getOut()
        }
    }, 1000)

    return () => {
        clearInterval(id)
    }
}

这是最基础的方案，但是这个方案有个小问题

如果说用户是提前打开控制台，然后设置跳过断点

再进入你的网页，那么你的阻止调试就失效了

所以还需要一个条件判断用户是否在调试，仅仅用 debugger 不行

这个方案就是判断浏览器的整体尺寸大小和内部尺寸大小

因为用户打开控制台会占用浏览器的视口大小

这俩差值达到一定的大小，则说明用户打开了控制台

代码如下

if (
    outerWidth - innerWidth > 250 ||
    outerHeight - innerHeight > 250
) {
    // 阻止调试
}

完整代码如下

/**
 * 阻止调试
 */
function preventDebug() {
    const debug = new Function('debugger')
    const getOut = () => location.href = 'about:blank'

    let id = setInterval(() => {
        const start = Date.now()
        debug()

        if (Date.now() - start > 10) {
            getOut()
        }

        if (
            outerWidth - innerWidth > 250 ||
            outerHeight - innerHeight > 250
        ) {
            getOut()
        }
    }, 1000)

    return () => {
        clearInterval(id)
    }
}

细节 Q&A

疑？：为什么要用 new Function('debugger')，而不是直接写 debugger 呢？

悟！！：因为打包时，你的打包工具可能配置了去除 debugger，用 new Function 的话，他就不会删除了

禁用快捷键

• 禁用 F12
• 禁用 右键菜单
• 禁用 各大浏览器控制台快捷键

/**
 * 禁用开发者工具
 * @param disableF12 是否禁用 F12 按键
 * @param disableMenu 是否禁用右键菜单
 */
function disableDebugAndContextMenu(disableF12 = true, disableMenu = true) {
    disableMenu && document.addEventListener('contextmenu', (e) => {
        e.preventDefault() // 阻止右键菜单出现
    })

    disableF12 && document.addEventListener('keydown', (e) => {
        // 检查是否是 F12 键
        if (e.key === 'F12' || e.code === 'F12') {
            e.preventDefault()
        }
        // 检查是否是 Command + Option + I (MacOS 下 Chrome/Firefox 的开发者工具快捷键)
        else if ((e.metaKey && e.altKey && (e.key === 'I' || e.key === 'i')) || (e.metaKey && e.key === 'J' || e.key === 'j')) {
            e.preventDefault()
        }
        // 检查是否是 Command + Shift + C (MacOS 下 Chrome/Firefox 的元素检查快捷键)
        else if (e.metaKey && e.shiftKey && (e.key === 'C' || e.key === 'c')) {
            e.preventDefault()
        }
        // 检查是否是 Command + Shift + J (MacOS 下 Chrome/Firefox 的控制台快捷键)
        else if (e.metaKey && e.shiftKey && (e.key === 'J' || e.key === 'j')) {
            e.preventDefault()
        }
        // 检查是否是 Command + Alt + C (MacOS 下 Safari 的元素检查快捷键)
        else if (e.metaKey && e.altKey && (e.key === 'C' || e.key === 'c')) {
            e.preventDefault()
        }
        // 检查是否是 Command + Alt + J (MacOS 下 Safari 的控制台快捷键)
        else if (e.metaKey && e.altKey && (e.key === 'J' || e.key === 'j')) {
            e.preventDefault()
        }
    })
}

开后门供内部人员使用

思路：

• 设置一个密钥和一个快捷键
• 当开发者按下快捷键时，打开隐藏窗口，再对比输入的密钥，如果成功，则跳过阻止调试逻辑
• 最后再记录用户是否为管理员权限，可以用 Local Storage 或者 Session Storage

/**
 * 输入框解除调试限制
 */
function createInput() {
    const label = document.createElement('label')
    const input = document.createElement('input')
    input.type = 'password'

    const btn = document.createElement('button')
    btn.innerText = btnText || '确定'
    btnStyleText && (btn.style.cssText = btnStyleText)

    label.innerText = labelText || '你想干什么？'
    label.appendChild(input)
    label.appendChild(btn)

    input.style.cssText = inputStyleText || `
        border: 1px solid #000;
        border-radius: 5px;
    `
    label.style.cssText = wrapStyleText || `
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 9999;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
        border: 1px solid #000;
        background: #fff;
        padding: 20px;
        border-radius: 10px;
    `

    btn.addEventListener('click', () => {
        const val = input.value
        if (val === secret) {
            localStorage.setItem(DEBUG_KEY, val)
            location.reload()
        }
        else {
            alert('？')
        }
    })

    document.body.appendChild(label)
}

原文链接：https://juejin.cn/post/7433072306678906932