Add react-grab for development debugging

ryota-murakami · ryota-murakami · commit 08d982b0a015 · 2026-01-06T01:08:48.000+09:00
- Add react-grab package as dev dependency
- Load react-grab script in development mode via Next.js Script component
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -12,6 +12,7 @@
 
 import { Analytics } from '@vercel/analytics/next'
 import type { Metadata } from 'next'
+import Script from 'next/script'
 import { Toaster } from 'sonner'
 
 import { CommandPalette } from '@/components/CommandPalette/CommandPalette'
@@ -96,6 +97,15 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en" suppressHydrationWarning>
+      <head>
+        {process.env.NODE_ENV === 'development' && (
+          <Script
+            src="//unpkg.com/react-grab/dist/index.global.js"
+            crossOrigin="anonymous"
+            strategy="beforeInteractive"
+          />
+        )}
+      </head>
       <body>
         <Providers>
           <MSWProvider>
diff --git a/package.json b/package.json
@@ -161,6 +161,7 @@
     "playwright": "^1.57.0",
     "postcss": "^8.5.6",
     "prettier": "^3.7.4",
+    "react-grab": "^0.0.98",
     "storybook": "^10.1.11",
     "tailwindcss": "^4.1.18",
     "tw-animate-css": "^1.4.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
