@fnpen/effector-devtools - Effector DevTools
Installation
Install DevTools package:
npm add --dev @fnpen/effector-devtools
Choose the way of opening DevTools UI:
Option #0 – Browser extension
-
Install Rempl extension for Chromium based browser or for Firefox
-
Open your Effector app, then open browser's DevTools and find Rempl tab here. Click it. That's it.
NOTE: If your Effector application and browser's DevTools were opened before Rempl extension is installed, you need to close and open browser's DevTools as well as reload the page with React application.
Option #1 – In the page
import { setupLogger } from "@fnpen/effector-devtools";
setupLogger({ inPage: true });
Usage
Attach some units to DevTools manually
import { attachLogger } from "@fnpen/effector-devtools";
attachLogger(domain);
attachLogger($store);
attachLogger(event);
attachLogger(effectFx);
Attach all available units using Babel plugin
Add plugin "@fnpen/effector-devtools/babel-plugin"
to your .babelrc
file:
{
"plugins": [
["effector/babel-plugin", { "addLoc": true, "addNames": true }]
"@fnpen/effector-devtools/babel-plugin"
]
}
Log any data using special methods
import { logDiff, logName, log } from "@fnpen/effector-devtools";
log(["1", "2"]); // Simple logging.
logName("Name of Message", ["1", "2"]); // Send message with name.
logDiff("Name", ["2"]);
logDiff("Name", ["22", "3"]); // Outputs diff with previous call with same name.
Hotkeys
- Option+O/P - Zooming
- Arrow Up/Down - Change selection
- Esc - Close details
- Left/Right - Change tabs.
Acknowledgments
Thanks to Roman Dvornov (@lahmatiy) for developing Rempl and Effector community.