re-frisk
re-frisk copied to clipboard
Take full control of re-frame app
re-frisk
Take full control of re-frame application.
DEMO
https://flexsurfer.github.io/conduit-re-frisk-demo/
Features
Current state for app-db and subscriptions sorted by keys
Watching keys from app-db
History for key in app-db
Events with app-db difference for each event
re-frame tracing (Important: trace should be enabled)
(Note: With lots of events and high zoom might be slow, pause or clear events when working with timeline)
Events and timeline
Subscriptions
Views sorted by mount order with subscripions
re-frame handlres statistics
Graph for an epoch
(Note: with lots of subscriptions rendering might be slow!)
Graph accumulated for an app life with weights
Usage
[re-frisk "1.6.0"]
[re-frisk-remote "1.6.0"]
Important: Please note the following compatibility table:
| re-frisk Version | React Version | Reagent Versions |
|---|---|---|
^1.3.4 |
React 16.13.0 | 1.x.x |
1.1.0-1.3.3 |
React 16.13.0 | 0.10.x |
1.0.0 |
React 16.9.0 | 0.9.x |
0.5.3 |
React 16 - 16.8.6 | 0.8.x |
Web application
re-frisk will be embedded in the DOM of your application. So my suggestion is to use re-frisk-remote, it doesn't affect your application and has more features
-
Add re-frisk as a dev dependency
[re-frisk "1.6.0"] -
Enable re-frisk
:preloads [re-frisk.preload]OR if you want a hidden UI and open tool with Ctrl+H
:preloads [re-frisk.preload-hidden]OR
(:require [re-frisk.core :as re-frisk])(re-frisk/enable)
React Native, Electron or Web applications
-
Add re-frisk as a dev dependency
[re-frisk-remote "1.6.0"] -
Enable re-frisk on default port (4567):
:preloads [re-frisk-remote.preload]OR
(:require [re-frisk-remote.core :as re-frisk-remote])(re-frisk-remote/enable) -
Start re-frisk on default port (4567):
shadow-cljs run re-frisk-remote.core/startOR
add in
deps.edn:aliases {:dev {:extra-deps {re-frisk-remote {:mvn/version "1.6.0"}}}}}create
re_frisk.clj(ns re-frisk (:require [re-frisk-remote.core :as re-frisk-remote])) (re-frisk-remote/start)clj -R:dev re_frisk.clj
Open re-frisk in a browser at http://localhost:4567
When remote debugging on an Android device you might need to enable reverse socket connections on port 4567:
adb reverse tcp:4567 tcp:4567
Enable traces
shadow-cljs
:compiler-options {:closure-defines {"re_frame.trace.trace_enabled_QMARK_" true}}
OR
:compiler {:closure-defines {"re_frame.trace.trace_enabled_QMARK_" true}}
Settings
External window dimensions
(re-frisk/enable {:ext_height 1000 :ext_width 1200})
Hidden UI, you can open and close tool by Ctrl+H
(re-frisk/enable {:hidden true})
If you don't need to watch events you can disable them
(re-frisk/enable {:events? false})
or exclude specific events
(re-frisk/enable {:ignore-events #{::timer-db}})
Using custom IP or port
(re-frisk-remote/enable {:host "192.168.0.2:7890"})
(re-frisk-remote/start {"7890"})
Normalize app-db before send to re-frisk
(re-frisk-remote/enable {:normalize-db-fn (fn [app-db] (reduce ...))})