(defn debug-cljs-devtools
"This is a drop-in alternative for the offical re-frame `debug` middleware
It is better because:
- it writes data, rather than strings, to js/console. This better leverages
the power of cljs-devtols.
- it exploits js/console's ability to colorize text, hopefully making the
output easier to grok."
[handler]
(fn debug-handler
[db v]
(.log js/console (str "%cre-frame event: " (first v)) "font-size: 125%; background: #888; color: white" v)
(let [new-db (handler db v)
[before after] (data/diff db new-db)
db-changed? (or (some? before) (some? after))]
(if db-changed?
(do
(.groupCollapsed js/console "clojure.data/diff for: " v)
(.log js/console "only before: " before)
(.log js/console "only after : " after)
(.groupEnd js/console))
(.log js/console "clojure.data/diff no changes for: " v))
new-db)))
You should take this code, put it in your library and then use it exactly as you would re-frame.core/debug
.
Just to state the obvious: to see any benifit from the switch, you'll need to also be using cljs-devtools.
A drawback of this solution is source code line number reporting of
console.log
calls.I would propose introducing additional macros wrapping
dispatch
anddispatch-sync
. Those alternative macros would emit special version ofconsole.log
(on the same line of macro-expansion) and register it for later consumption bydebug-cljs-devtools
. This way one would get proper line reporting in DevTools after switching to using those macros.