@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

1. Install Rempl extension for Chromium based browser or for Firefox

2. 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.