使用方式
省流版，直接到 npm 下载即可
仅需设置一个密钥即可使用，密钥是用来解除调试限制的
当你按下快捷键 shift + d 时，即可输入密码解除限制
pnpm i @jl-org/tool
import { disableDebug } from '@jl-org/tool'
disableDebug({
secret: '123456',
/** 是否开启禁用调试 */
enable: !import.meta.env.DEV
})
npm 地址：www.npmjs.com/package/@jl…
阻止调试的思路
可以写个定时器，然后记录当前时间。
当用户点击跳过断点时，用这个时间差就能知道用户正在调试，此时改变 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)
}
整合所有逻辑和配置
最后把上面的代码整合到一个函数，再提供各种配置项即可
代码在 GitHub 上，大家不想下载 npm 包也可以直接复制粘贴
