steven-nguyen-t/recoilize

Recoil developer tool

Debugger for Recoil Applications

Korean README 한국어

About

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

** STILL IN BETA **

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.

Installation

Install Recoilize Module

npm install recoilize

** IMPORTANT **

Import RecoilizeDebugger from the Recoilize module

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} />;

Example:

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,
);

Open your application on the Chrome Browser and start debugging with Recoilize!

(Only supported with React applications using Recoil as state management)

Features

Visualizations

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.

Time Travel

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.

Throttle

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.

State Persistence (BETA)

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.

Additional Features

• 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

We will continue updating Recoilize alongside Recoil's updates!

Contributors

Bren Yamaguchi @github @linkedin

Saejin Kang @github @linkedin

Jonathan Escamila @github @linkedin

Sean Smith @github @linkedin

Justin Choo @github @linkedin

Anthony Lin @github @linkedin

Spenser Schwartz @github @linkedin

Steven Nguyen @github @linkedin

Henry Taing @github @linkedin

Seungho Baek @github @linkedin