An alternative to the offical re-frame debug middleware

debug.md

(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 and dispatch-sync. Those alternative macros would emit special version of console.log (on the same line of macro-expansion) and register it for later consumption by debug-cljs-devtools. This way one would get proper line reporting in DevTools after switching to using those macros.