A MobX-React Time Travel Debugger
An intuitive, in-app MobX + React developer tool employing time travel debugging and undo/redo actions. Quickly and easily gain insight into MobX-React projects, in just three easy steps.
Delorean is easily installed through npm as a developer dependency using your terminal.
npm install mobx-delorean --save-dev
Import DeloreanTools
and delorean
from the mobx-delorean module.
// in top level React component file
import { DeloreanTools } from 'mobx-delorean';
...
render() {
return (
<div>
<DeloreanTools />
<YourComponent />
<div>
)
}
// in MobX store files(s)
import { delorean } from 'mobx-delorean';
...
export default delorean(YourStore, [config]);
####config
Note: Delorean relies on wrapping your MobX store export in order to track its observables and parse its dependency tree at runtime. If you are using multiple stores, you can wrap them separately and Delorean will track them in a singular UI.
Open your MobX app in the browser and notice the Delorean toolbar at the top of your app. In order from left to right:
Time Travel Slider - Click to toggle the time travel slider's visibility. Drag and drop the position marker to traverse through the log of previous application states.
Undo/Redo Actions - Step forward and back through your application's state one action at a time with specific details about each change.
Store Structure Visualizer - Open a new tab with a rich heirarchy visualization of your MobX store's dependency tree. (in development)