Visualize re-frame pattern data or reagent ratom data as a tree structure, watch re-frame events and export state.

• Implemented app-db-sorted

• Remote debugger for react native and electron
• app-db cljs live filter
• сompatibility with previous versions of re-frame

In-app re-frisk debugger. The debugger will be embedded into the interface of your application.

1. Add [re-frisk "0.4.5"] to the dev :dependencies in your project.clj

2. Run re-frisk using enable-re-frisk! function

(:require [re-frisk.core :refer [enable-re-frisk!]])

(defn ^:export run
 []
 (dispatch-sync [:initialize])
 (enable-re-frisk!)
 (reagent/render [simple-example]
                 (js/document.getElementById "app")))

This is just an example, it's better to enable re-frisk in the dev environment

ENJOY!

Run remote re-frisk debugger server using leiningen re-frisk plugin by following next steps:

1. Add [lein-re-frisk "0.4.7"] into your global Leiningen config (~/.lein/profiles.clj) like so:

{:user {:plugins [[lein-re-frisk "0.4.7"]]}}

or into the :plugins vector of your project.clj

(defproject your-project "0.1.1"
  {:plugins [[lein-re-frisk "0.4.7"]]})

2. Start a web server in the current directory on the default port (4567):

   $ lein re-frisk

Or select a different port by supplying the port number on the command line:

$ lein re-frisk 8095

3. Add [re-frisk-remote "0.4.2"] to the dev :dependencies in your project.clj

run re-frisk using enable-re-frisk-remote! function on the localhost and default port (4567)

(:require [re-frisk-remote.core :refer [enable-re-frisk-remote!]])

(defn ^:export run
 []
 (dispatch-sync [:initialize])
 (enable-re-frisk-remote!)
 (reagent/render [simple-example]
                 (js/document.getElementById "app")))

Or select a different host and port by supplying the host and port number:

(enable-re-frisk-remote! {:host "192.168.1.1:8095"})

This is just an example, it's better to enable re-frisk in the dev environment

Run an application

ENJOY!

See also Using re-frisk with re-natal

You can also watch all re-frame subscriptions and events

(enable-re-frisk! {:kind->id->handler? true})

If you don't want to watch events you can turn it off providing settings {:events? false}

(enable-re-frisk! {:events? false})

Also you can watch interceptor's context providing re-frisk.core/watch-context in the reg-event interceptors list

(reg-event-db
 :timer-db
 [re-frisk.core/watch-context]
 (fn
  [db [_ value]]
  (assoc db :timer value)))

Export works only for the cljs data structures.

You can provide starting position for the re-frisk panel

(enable-re-frisk! {:x 100 :y 500})

(enable-frisk! {:x 100 :y 500})

also, it will be helpful for the IE, because it doesn't support resize property, you can provide width and height

(enable-re-frisk! {:width "400px" :height "400px"})

(enable-frisk! {:width "400px" :height "400px"})

If you are not using re-frame in your app, you can run re-frisk without re-frame by enable-frisk! function

(enable-frisk!)

If you want to watch ratom or log any data, you can add it using add-data or add-in-data functions

(add-data :data-key your-data)

(add-in-data [:data-key1  :data-key2] your-data)

For me, it's very handy to name events with the appropriate suffix, for example for reg-event-db :event-key-db, and for reg-event-fx :event-key-fx, in that case re-frisk automatically highlight these events

Also you can watch all re-frame views which are rendering now

Add :external-config {:re-frisk {:enabled true}}}} to the dev :compiler in your project.clj if you are working with the re-frame app

this config needed to do not generate any code in production.

Require macro

(:require [re-frisk.core :refer-macros [def-view]])

Define your views (components) with the def-view macro

(def-view greeting
 [message]
 [:h1 message])

re-frame dev/re_frisk/demo.cljs. reagent dev/re_frisk/reagent_demo.cljs.

Works weird in the Internet Explorer which doesn't support css resize property. Debugger doesn't work in IE.

If you are using reagent.core/create-class function for creating views, data for these views will be still showing in the re-frisk after this components will be unmounted.

Copyright © 2016-2017 Shovkoplyas Andrey [motor4ik]

Distributed under the MIT License (MIT)