react-global-state-hooks

React Global State Hooks - brings your application’s state, actions, and history into Chrome DevTools. Inspect live stores, trace…

React Global State Hooks - brings your application’s state, actions, and history into Chrome DevTools. Inspect live stores, trace changes, run actions, and restore earlier state—all while watching your app respond. Built for **react-global-state-hooks**, it connects what you see on screen with the state and actions behind it. When something unexpected happens, follow the sequence of events, examine the values that changed, and test your fix against the running application. 🔍 **Inspect your stores in real time** Explore global stores and scoped contexts from one panel. See their current state and metadata, switch between stores, and follow updates as you interact with your app. Use it to understand the data behind a component, investigate an unexpected value, or confirm that an interaction updated the intended store. 🧭 **Follow changes through action history** Trace action execution and state updates as they happen. Inspect pending, resolved, and rejected events, along with the state mutations recorded during execution. Switch between chronological logs and grouped action views to understand both the sequence of events and the behavior of a particular action. 🔄 **See exactly what changed** Compare recorded states to identify the values affected by an update. State differences make it easier to spot an unexpected mutation, understand a nested update, and verify that an action changed the intended data. ⏪ **Restore an earlier state** Return a store to a previously recorded state and watch the application respond. Revisit a useful debugging point without manually repeating every interaction that produced it. Restoring state updates the connected store; it does not undo external effects such as network requests. ⚡ **Run actions directly** Execute store actions from the DevTools panel and inspect their results, errors, and resulting state changes. Try different arguments, reproduce a problematic call, or exercise behavior that would otherwise require several steps through the interface. ✏️ **Edit live state** Update store values directly from the panel to explore how your app behaves with different data. Check an empty collection, adjust a filter, change a selection, or reproduce a specific state while keeping the application open. 💾 **Save and load state snapshots** Download a JSON snapshot of the stores currently represented in the panel. Load a saved snapshot to revisit a debugging scenario and reconnect compatible entries to the running application. The panel reports mismatches and values that cannot be restored, helping you understand which parts of the snapshot were applied. 💻 **Debug from your terminal** Use the companion `rgsh` command to inspect and control connected stores from your terminal. List stores, read state and metadata, stream changes, execute actions, and update values. Action commands report the resulting changes, return value or error, and duration. Keep Chrome DevTools open alongside your terminal to follow the same running application from both interfaces. 🤖 **Give coding agents access to runtime state** A coding agent with shell access can use `rgsh` to inspect the application you have open in Chrome. It can discover stores and actions, reproduce a state transition, read the resulting values, and check what changed after a code edit. This gives the agent concrete runtime evidence when investigating an issue or verifying a fix. The terminal integration operates on store state and actions. It does not automate clicking or typing in the page. 🛠️ **Built for everyday development** Use React Global State Hooks DevTools to: - Investigate unexpected state changes. - Follow synchronous and asynchronous action execution. - Reproduce issues with specific values or action arguments. - Explore different UI states through direct store edits. - Save useful debugging scenarios as snapshots. - Verify changes through the panel, terminal, or a coding agent. To connect your application, import `react-global-state-hooks/debug` before modules that create stores. Run the app in development, open the extension’s panel in Chrome DevTools, and reload the page with the panel open. The extension requires an application using React Global State Hooks with its debug integration enabled. Keep the debug import in development builds only. Terminal and coding-agent workflows additionally require the companion `rgsh` CLI and its `ws` dependency.