Recoilize is a Chrome Dev Tool meant for debugging applications built with the experimental Recoil.js state management library.
The tool records Recoil state and allows users to easily debug their applications with features such as visualization of the component graph and time traveling to previous states.
Get Recoilize on the Chrome Store!
Demo Paint app
Please note that Recoilize is in BETA. We will continue to make improvements and implement fixes but if you find any issues, please dont hesitate to report them in the issues tab or submit a PR and we'll happily take a look.
npm install recoilize
import RecoilizeDebugger from 'recoilize';
Recoilize requires you to create a variable that grabs the HTML element where you inject your React application
const root = document.getElementById('root');
You must import all Atoms and Selectors and pass them into the RecoilizeDebugger component as shown below
import * as nodes from './store';
<RecoilizeDebugger nodes={nodes} root={root} />;
import RecoilizeDebugger from 'recoilize';
import RecoilRoot from 'recoil';
import * as nodes from './store';
const root = document.getElementById('root');
ReactDOM.render(
<RecoilRoot>
<RecoilizeDebugger nodes={nodes} root={root} />
<App />
</RecoilRoot>,
root,
);
Users are able to view visualizations for their application's state by clicking individual snapshots. Recoilize provides component trees and graphs, as well as the state trees in JSON format.
As one of the key features of Recoilize, the tool enables users to jump to any previous snapshots. Pressing the jump button next to each of the snapshots will change the DOM by setting the state to that snapshot.
In the settings tab, users are able to set throttle (in milliseconds) for large scale applications or any applications that changes state rapidly. The default is set at 70ms.
Recoilize allows the users to persist their application's state through a refresh or reload. At this time, the user is able to view the previous states in the dev tool, but cannot time travel to the states before refresh. The team is still working on completing this feature.
- component graph hover to view atoms and selectors
- legend to see relationship between component graph and state
- Toggle to view raw component graph
- filter atom/selector network relationship
- filter snapshots by atom/selector keys