No Inspect Tool
Drop into your root layout to block the right-click menu and common DevTools shortcuts page-wide, plus a best-effort open/close detector. Renders nothing.
Live — active on this whole page right now
Right-click anywhere on this page, or try F12 / Ctrl+Shift+I.
Right-click anywhere on this page, or try F12 / Ctrl+Shift+I.
If F12 / Ctrl+Shift+I still opened your real DevTools: that's expected, not a bug. For those two specific shortcuts, Chrome/Edge/Firefox act on them at a level above page JS no matter what a page's script does — this page's preventDefault() still runs, but the browser can open DevTools anyway. The pill above is the part built to handle that regardless: the same open/close check the component polls to fire onOpen/onClose, so your own reaction (log it, blur the content, redirect) still fires even when the key itself couldn't be stopped.
Usage
// In your root layout, mounted once, site-wide:import NoInspectTool from "@/components/no-inspect-tool"export default function RootLayout({ children }) { return ( <> <NoInspectTool onOpen={() => console.log("DevTools opened")} /> {children} </> )}In your own app this normally lives in the root layout so it applies to every page. Mounted here (in just this one book) instead, to show the real thing working without affecting the rest of the site.
// In your root layout, mounted once, site-wide:import NoInspectTool from "@/components/no-inspect-tool"export default function RootLayout({ children }) { return ( <> <NoInspectTool onOpen={() => console.log("DevTools opened")} /> {children} </> )}In your own app this normally lives in the root layout so it applies to every page. Mounted here (in just this one book) instead, to show the real thing working without affecting the rest of the site.
npx shadcn add @ectopcoi-components/no-inspect-tool