{"_id":"@amrshbib/react-debugger","_rev":"6-19566e62f2ec0851fba84ea88e8fde0d","name":"@amrshbib/react-debugger","dist-tags":{"latest":"1.0.2"},"versions":{"0.0.0":{"name":"@amrshbib/react-debugger","version":"0.0.0","_id":"@amrshbib/react-debugger@0.0.0","maintainers":[{"name":"amrshbib","email":"amr.shbib@gmail.com"}],"dist":{"shasum":"fc5fa07c025cc108332ec03fd557453e46b5c59b","tarball":"https://registry.npmjs.org/@amrshbib/react-debugger/-/react-debugger-0.0.0.tgz","fileCount":4,"integrity":"sha512-Wjg0asHcIvqp8a6CKnpd1oFrTtpeiTlSKGA/28eApqmSFDWDmr+W7xVRmD2m74gMtpWZ6pUAoAfxKSdhTWSaow==","signatures":[{"sig":"MEUCIQD8O6mcwN8c2k87IcYFekGQeFegWDsKppUvwlRgBoXEAwIgPfcbw0LQxXeDJueNkog7rEH5VXgOItEE8gRw8eloKCo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":42950},"main":"index.js","gitHead":"a2d0b4b4dfcd595d7a7f5a95e72a8074405c9265","_npmUser":{"name":"amrshbib","email":"amr.shbib@gmail.com"},"_npmVersion":"11.6.2","description":"React and React Native standalone debugger SDK","directories":{},"_nodeVersion":"25.2.1","_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"peerDependenciesMeta":{"react-native":{"optional":true},"@react-native-async-storage/async-storage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/react-debugger_0.0.0_1775784905193_0.7019779363718595","host":"s3://npm-registry-packages-npm-production"}},"0.0.1":{"name":"@amrshbib/react-debugger","version":"0.0.1","_id":"@amrshbib/react-debugger@0.0.1","maintainers":[{"name":"amrshbib","email":"amr.shbib@gmail.com"}],"dist":{"shasum":"032aefd69e891e8c7af7ec5d3360c07195e32991","tarball":"https://registry.npmjs.org/@amrshbib/react-debugger/-/react-debugger-0.0.1.tgz","fileCount":4,"integrity":"sha512-mEfsHy+dO03k1DgwdqjbpyrgzBppA7hHd9UhtZHy0e2/0VtZ6rxDKc9F/Zsspyaap6VE/ImrrLISrtcxsL4OCw==","signatures":[{"sig":"MEUCIQDZI9lJ1hPLLcIkjHqT8U+oUGYecrciO/lW1e+FtmGu9wIgKq2aK/kP6AQOR7il27vmkIeqAxe9JyljGI7icn9WAUk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":42932},"main":"index.js","gitHead":"a2d0b4b4dfcd595d7a7f5a95e72a8074405c9265","_npmUser":{"name":"amrshbib","email":"amr.shbib@gmail.com"},"_npmVersion":"11.6.2","description":"React and React Native standalone debugger SDK","directories":{},"_nodeVersion":"25.2.1","_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"peerDependenciesMeta":{"react-native":{"optional":true},"@react-native-async-storage/async-storage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/react-debugger_0.0.1_1775785179517_0.7990420775404159","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@amrshbib/react-debugger","version":"0.0.2","_id":"@amrshbib/react-debugger@0.0.2","maintainers":[{"name":"amrshbib","email":"amr.shbib@gmail.com"}],"dist":{"shasum":"915748e2b728b0bda0e58f17e0764795bc7e1b0e","tarball":"https://registry.npmjs.org/@amrshbib/react-debugger/-/react-debugger-0.0.2.tgz","fileCount":4,"integrity":"sha512-Ud6Z0+q5+hncELp73sRqpqSgFLM5ObRweO3S2IQvz06uyHsnxkGlzJ51EWiju8mIXMC9+i4oPgl69peW6NogOg==","signatures":[{"sig":"MEUCIQDOSAgc0OanugR1DJf0bN3D3NvPDP8o9n4dpKYLgYrFfQIgaFzz4FyxrxPJyBhiIK2s0KOTtle+gEe14GiwWXpS6YQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":42927},"main":"index.js","gitHead":"b4de44ef6153820c67d5a821a8c6205f711762fd","_npmUser":{"name":"amrshbib","email":"amr.shbib@gmail.com"},"_npmVersion":"11.6.2","description":"React and React Native standalone debugger SDK","directories":{},"_nodeVersion":"25.2.1","_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"peerDependenciesMeta":{"react-native":{"optional":true},"@react-native-async-storage/async-storage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/react-debugger_0.0.2_1775855562515_0.7922956971950115","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@amrshbib/react-debugger","version":"0.0.3","_id":"@amrshbib/react-debugger@0.0.3","maintainers":[{"name":"amrshbib","email":"amr.shbib@gmail.com"}],"dist":{"shasum":"cfe0362abccc68b5776d262d28e9496208eea69f","tarball":"https://registry.npmjs.org/@amrshbib/react-debugger/-/react-debugger-0.0.3.tgz","fileCount":8,"integrity":"sha512-cAmxg5ymbNARcFk/Ac9oP/rMewrc3e/jII40x763n2HNgUe/DSJ30CpVFoEORwUaM4qQ2k7wXb0DmUv6nzdVoA==","signatures":[{"sig":"MEQCIDr8XvJ/Wc4SW4P9F8acSEqluuCzkyt1Um+OhjwpWNAdAiACVpyD1hNq0PABXf+8U9JCXjhHHxd5atEXxr0v/0tJsQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1329532},"main":"index.js","browser":"index.web.js","gitHead":"033bbb9e93ecb6047280f52b4fd98ef61d29f9a1","_npmUser":{"name":"amrshbib","email":"amr.shbib@gmail.com"},"_npmVersion":"11.6.2","description":"React and React Native standalone debugger SDK","directories":{},"_nodeVersion":"25.2.1","react-native":"index.js","_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"peerDependenciesMeta":{"react-native":{"optional":true},"@react-native-async-storage/async-storage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/react-debugger_0.0.3_1778415278198_0.18716331911392725","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@amrshbib/react-debugger","version":"1.0.1","_id":"@amrshbib/react-debugger@1.0.1","maintainers":[{"name":"amrshbib","email":"amr.shbib@gmail.com"}],"dist":{"shasum":"7fed82384818f046678fd3d5a6018553e62bcafc","tarball":"https://registry.npmjs.org/@amrshbib/react-debugger/-/react-debugger-1.0.1.tgz","fileCount":8,"integrity":"sha512-i1WxOFxz8KVul7oc8CTFZKoQIER1W9QERoYo3bPBMNj3CNwICf+cANqCfteM+n0krDWuhmSnQkGkhkIVF7Lupw==","signatures":[{"sig":"MEQCICSnHN1MsqtM++YGXf+jAG/+A4r0ohbHBRK827xJP1FXAiAX4oA95d6k6mAxITB2PC6Bk0ju04whGu/ibZnqauaB3g==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1329532},"main":"index.js","browser":"index.web.js","gitHead":"033bbb9e93ecb6047280f52b4fd98ef61d29f9a1","_npmUser":{"name":"amrshbib","email":"amr.shbib@gmail.com"},"_npmVersion":"11.6.2","description":"React and React Native standalone debugger SDK","directories":{},"_nodeVersion":"25.2.1","react-native":"index.js","_hasShrinkwrap":false,"peerDependencies":{"react":"*"},"peerDependenciesMeta":{"react-native":{"optional":true},"@react-native-async-storage/async-storage":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/react-debugger_1.0.1_1778415343856_0.5922453521193325","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@amrshbib/react-debugger","version":"1.0.2","description":"React and React Native standalone debugger SDK","main":"index.js","browser":"index.web.js","react-native":"index.js","peerDependencies":{"react":"*"},"peerDependenciesMeta":{"react-native":{"optional":true},"@react-native-async-storage/async-storage":{"optional":true}},"repository":{"type":"git","url":"git+https://github.com/amrshbib/react-debugger.git"},"homepage":"https://github.com/amrshbib/react-debugger#readme","gitHead":"033bbb9e93ecb6047280f52b4fd98ef61d29f9a1","_id":"@amrshbib/react-debugger@1.0.2","bugs":{"url":"https://github.com/amrshbib/react-debugger/issues"},"_nodeVersion":"25.2.1","_npmVersion":"11.6.2","dist":{"integrity":"sha512-mg0ZrGrshF+YKFt3BzkHDDaIIdJA3hJNM0E/TPHZsovaS91VR4jQKowXFrTvazNn27mVv/6NdvJJ4hFV7gvGUg==","shasum":"bae7b8391b0087913e168a925e00720aa0cf0bd2","tarball":"https://registry.npmjs.org/@amrshbib/react-debugger/-/react-debugger-1.0.2.tgz","fileCount":8,"unpackedSize":1329758,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD2S84uDoeNZd5mqqx5J56oBKoi4QGrE1EsfUnoTiyvsQIgbywWpzwmVBTspm04dWq+VxDlqPKr6HRmAAsd2hVHWHw="}]},"_npmUser":{"name":"amrshbib","email":"amr.shbib@gmail.com"},"directories":{},"maintainers":[{"name":"amrshbib","email":"amr.shbib@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-debugger_1.0.2_1778416047795_0.5988908026945845"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-10T01:35:05.131Z","modified":"2026-05-10T12:27:28.091Z","0.0.0":"2026-04-10T01:35:05.344Z","0.0.1":"2026-04-10T01:39:39.667Z","0.0.2":"2026-04-10T21:12:42.653Z","0.0.3":"2026-05-10T12:14:38.387Z","1.0.1":"2026-05-10T12:15:44.130Z","1.0.2":"2026-05-10T12:27:27.964Z"},"description":"React and React Native standalone debugger SDK","maintainers":[{"name":"amrshbib","email":"amr.shbib@gmail.com"}],"readme":"
\n

⚛️ React Debugger

\n

The ultimate real-time inspection toolkit for React & React Native apps.

\n\n [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n [![React](https://img.shields.io/badge/React-18%2B-61dafb?style=flat&logo=react)](https://reactjs.org/)\n [![React Native](https://img.shields.io/badge/React%20Native-0.70%2B-blue.svg)](https://reactnative.dev/)\n [![NPM Version](https://img.shields.io/npm/v/@amrshbib/react-debugger?color=green)](https://www.npmjs.com/package/@amrshbib/react-debugger)\n [![NPM Downloads (Monthly)](https://img.shields.io/npm/dm/@amrshbib/react-debugger.svg?style=flat)](https://www.npmjs.com/package/@amrshbib/react-debugger)\n [![NPM Downloads (Weekly)](https://img.shields.io/npm/dw/@amrshbib/react-debugger.svg?style=flat)](https://www.npmjs.com/package/@amrshbib/react-debugger)\n [![NPM Downloads (Total)](https://img.shields.io/npm/dt/@amrshbib/react-debugger.svg?style=flat)](https://www.npmjs.com/package/@amrshbib/react-debugger)\n [![VS Code Marketplace](https://img.shields.io/badge/VS%20Code-Marketplace-007ACC?style=flat&logo=visual-studio-code)](https://marketplace.visualstudio.com/items?itemName=amrshbib.react-debugger)\n
\n\n
\n\nA lightweight, zero-config SDK that connects your React or React Native application directly to the [React Debugger VS Code extension](https://marketplace.visualstudio.com/items?itemName=amrshbib.react-debugger). \n\nStop relying on messy console logs and disjointed tools. Get **real-time network inspection, console logs, state management debugging, performance monitoring, UI inspection**, and more—all from the comfort of your editor!\n\n
\n \"React\n
\n\n---\n\n## ✨ Why React Debugger?\n\n- **Zero Boilerplate:** One line of code to initialize.\n- **Production Safe:** Automatically disabled when `__DEV__ === false`. Zero performance impact in release builds.\n- **Works Everywhere:** Built for React Web, React Native (iOS/Android), and Expo.\n- **All-in-One:** Network, State, Logs, Storage, Performance—all in a single beautifully integrated VS Code tab.\n\n---\n\n## 🚀 Features\n\n- 🌐 **Network Interceptor**: Automatically captures all `fetch`, `XMLHttpRequest`, `WebSocket` and `SignalR` traffic with headers, payloads, and execution timing.\n- 📝 **Console Interceptor**: Captures `console.log`, `warn`, `error`, `debug` with full stack traces.\n- 🗃️ **State Management**: Redux support out of the box. Track actions, take state snapshots, and view beautiful state diffs.\n- 🧩 **Context Debugger**: Track and inspect state for React Context Providers dynamically.\n- ⚡ **Performance Monitor**: Real-time FPS, memory usage, and thread metrics.\n- 🔍 **UI Inspector**: Captures your React component tree via the fiber tree.\n- 💾 **Storage Inspector**: View, manage, and **clear** `AsyncStorage` / `localStorage` entries remotely.\n- 🔗 **Deep Linking**: Trigger deep links directly from VS Code.\n- 🧭 **Navigation Tracker**: Reports route changes and params from React Navigation or custom routers.\n- 🌗 **Dark/Light Mode**: Gorgeous UI that adapts to your system theme preferences.\n\n---\n\n## 📦 Installation\n\n```bash\nnpm install @amrshbib/react-debugger\n# or\nyarn add @amrshbib/react-debugger\n```\n\n> **Note**: This package is designed to work alongside the **React Debugger** VS Code extension, which provides the real-time UI for inspecting your app. Install the extension from the [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=amrshbib.react-debugger).\n\n### Peer Dependencies\n\n- `react` *(required)*\n- `react-native` *(optional — only needed for React Native apps)*\n- `@react-native-async-storage/async-storage` *(optional — only needed for Storage Inspector on React Native)*\n\n---\n\n## ⚡ Quick Start\n\n### 1️⃣ Initialize the Debugger\n\nAdd `initDebugger()` at the **very top** of your app entry point (e.g. `index.js`, `App.tsx`). This must be called before any `console.log`, `fetch`, or state changes so the SDK can intercept them.\n\n```javascript\n// index.js or App.tsx\nimport { initDebugger } from \"@amrshbib/react-debugger\";\n\ninitDebugger();\n```\n\nThat's it! Once called, the SDK automatically connects to the debugger server via WebSocket (`localhost:8347`), intercepts traffic, and sends it to the VS Code extension in real time.\n\n### 2️⃣ Set Up Redux Middleware (Optional)\n\nIf your app uses **Redux**, add `debuggerMiddleware` to your store to enable state debugging with action tracking, state snapshots, and beautiful tree diffs.\n\n```javascript\nimport { configureStore } from \"@reduxjs/toolkit\";\nimport { debuggerMiddleware } from \"@amrshbib/react-debugger\";\nimport rootReducer from \"./reducers\";\n\nconst store = configureStore({\n reducer: rootReducer,\n middleware: (getDefaultMiddleware) =>\n getDefaultMiddleware().concat(debuggerMiddleware),\n});\n\nexport default store;\n```\n\n**Legacy Redux (`createStore`):**\n\n```javascript\nimport { createStore, applyMiddleware } from \"redux\";\nimport { debuggerMiddleware } from \"@amrshbib/react-debugger\";\nimport rootReducer from \"./reducers\";\n\nconst store = createStore(rootReducer, applyMiddleware(debuggerMiddleware));\n```\n\n### 3️⃣ Set Up Navigation Tracking (Optional)\n\nTrack route changes in the debugger to see navigation history, route names, and params in real time.\n\n**React Navigation (recommended):**\n\n```javascript\nimport { useRef } from \"react\";\nimport { NavigationContainer } from \"@react-navigation/native\";\nimport { reportNavigationEvent } from \"@amrshbib/react-debugger\";\n\nconst App = () => {\n const navigationRef = useRef(null);\n\n const onStateChange = (state) => {\n const currentRoute = navigationRef.current?.getCurrentRoute();\n if (currentRoute) {\n reportNavigationEvent(currentRoute.name, currentRoute.params);\n }\n };\n\n return (\n \n {/* Your screens */}\n \n );\n};\n```\n\n---\n\n## 📖 API Reference\n\n### `initDebugger(options?)`\n\nInitializes the debugger SDK and connects to the debug server. Only runs in development mode.\n\n**Example:**\n\n```javascript\nimport { initDebugger } from \"@amrshbib/react-debugger\";\n\ninitDebugger({\n trackContexts: [\"LocalizationProvider\", \"GlobalNotificationsProvider\"]\n});\n```\n\n### `debuggerMiddleware`\n\nRedux middleware that captures dispatched actions, state snapshots, and computes state diffs.\n\n### `reportNavigationEvent(routeName, params)`\n\nManually reports a navigation event for custom routers or analytics wrappers.\n\n---\n\n## 🏗️ What Gets Captured Automatically?\n\nOnce `initDebugger()` is called, the SDK automatically intercepts:\n\n| Domain | What's Captured | How |\n|--------|----------------|-----|\n| 🌐 **Network** | All `fetch` and `XMLHttpRequest` calls | Global monkey-patching |\n| 📝 **Console** | `console.log`, `warn`, `error`, `debug` | Console interception |\n| ⚡ **Performance** | FPS and memory limits | `requestAnimationFrame` |\n| 🔍 **UI Inspector** | React component tree | React DevTools fiber hook |\n| 💾 **Storage** | AsyncStorage / localStorage entries | On-demand capture & clearing |\n| 📱 **System** | Deep Linking & App Reload | Native `Linking` & `DevSettings` |\n\n*No additional code is needed beyond `initDebugger()` for these features!*\n\n---\n\n## 🔧 Troubleshooting\n\n- **SDK Not Connecting:** Make sure the VS Code extension is active and port `8347` is not blocked. For physical devices on Android, ensure your device is on the same network or use `adb reverse tcp:8347 tcp:8347`.\n- **Logs Not Appearing:** Ensure `initDebugger()` is called **before** any other logs or network requests.\n- **State Not Tracked:** Verify `debuggerMiddleware` is correctly applied to your Redux store.\n\n---\n\n## 📄 License\n\nThis project is licensed under the [MIT License](./LICENSE).\n\n
\n

Made with ❤️ for the React and React Native community

\n
\n","readmeFilename":"README.md","homepage":"https://github.com/amrshbib/react-debugger#readme","repository":{"type":"git","url":"git+https://github.com/amrshbib/react-debugger.git"},"bugs":{"url":"https://github.com/amrshbib/react-debugger/issues"}}