¶

Question¶

How can I inspect the contents of app-db? Perhaps from figwheel.

If at a REPL, inspect: re-frame.db/app-db.

If at the js console, that's window.re_frame.db.app_db.state.

If you want a visual browser of app-db, along with inspecting subpaths of app-db, and diffing changes, use re-frame-10x.

You are using cljs-devtools, right? If not, stop everything (unless you are using re-natal) and immediately make that happen.

Are you sure you need to?

First, you seldom want to inspect all of app-db. And, second, inspecting via a REPL might be clumsy.

Instead, you probably want to inspect a part of app-db. And you probably want to inspect it directly in the GUI itself, not off in a REPL.

Here is a useful technique from @escherize. Add something like this to the hiccup of your view ...

[:pre (with-out-str (pprint @interesting))]

This assumes that @interesting is the value (ratom or subscription) you want to observe (note the @ in front).

pprint output is nice to read, but not compact. For a more compact view, do this:

[:pre (pr-str @some-atom)]   ;; NB: using pr-str instead of pprint

If you choose to use pprint then you'll need to require it within the ns of your view.cljs:

[cljs.pprint :refer [pprint]]

Finally, combining the short and long answers, you could even do this:

[:pre (with-out-str (pprint @re-frame.db/app-db))]    ;; see everything!

or

[:pre (with-out-str (pprint (:part @re-frame.db/app-db)))]    ;; see a part of it!

You definitely have clj-devtools installed now, right?

Another very strong tool is re-Frisk which provides a nice solution for navigating and inspecting your re-frame data structures.

@yogthos' json-html library provides a slick presentation, at the expense of more screen real estate, and the need to include specific CSS.