Devtools Guard (React)

一个用于 生产环境 的轻量 React 组件：

- 尝试提高打开 DevTools（F12/快捷键/右键）调试的成本
- 支持定时触发 debugger（会导致按 F8/Resume 后很快再次暂停）
- 可禁用右键菜单与常见 DevTools 快捷键

重要说明（请务必阅读）

- 这类“反调试/防查看” 无法真正阻止 有经验的用户（可以被绕过）。
- 它的定位是 提高成本/劝退，而不是安全方案。
- 副作用：可能影响开发者/高级用户体验，也可能影响性能。建议仅在生产环境启用，并控制触发频率。

安装

``bash
npm i react-devtools-guard


或

pnpm add react-devtools-guard

或

yarn add react-devtools-guard
`

使用

在应用根部（例如 React App 的 App 或 Next.js 的 RootLayout client subtree）挂载：

`tsx
import React from "react";
import { DevtoolsGuard } from "react-devtools-guard";

export default function App() {
return (
<>

{/ your app /}

);
}
`

API

$3

- enabled?: boolean
- true：强制启用
- false：强制关闭
- 不传：默认仅 NODE_ENV === 'production' 启用

- debuggerIntervalMs?: number
- 触发 debugger 的间隔，默认 200
- 建议不要太小（比如 50ms 会更卡且更耗）

- blockContextMenu?: boolean
- 是否禁用右键菜单，默认 true
- 组件会放行 input/textarea/select/contenteditable 上的右键，尽量不影响正常输入/复制粘贴

开发

`bash
npm install
node -e "console.log(require('./index.js'))"
``

License

MIT