Devtools Guard (React)

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

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

重要说明（请务必阅读）

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

安装

npm i react-devtools-guard
# 或
pnpm add react-devtools-guard
# 或
yarn add react-devtools-guard

使用

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

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

export default function App() {
  return (
    <>
      <DevtoolsGuard />
      {/* your app */}
    </>
  );
}

API

<DevtoolsGuard />

• enabled?: boolean

  • true：强制启用
  • false：强制关闭
  • 不传：默认仅 NODE_ENV === 'production' 启用

• debuggerIntervalMs?: number

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

• blockContextMenu?: boolean

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

开发

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

License

MIT