How to inspect om objects?

Question

I've been following the om tutorial. Im using Light Table to setup an External Browser connection. Additionally, in my clojurescript code I'm calling (enable-console-print!) to send my println statements to the browser console.

The problem is that when I print an om component.. something like:

(println (om/build my-component-function my-data))

The output I get is:

#<[object Object]>

I have the same issue if I just eval (om/build my-component-function my-data) in LightTable.

Being able to inspect this object will be helpful for debugging. How can I print something more meaningful?

Answer 1

1 Try using (.log js/console object) which is ClojureScript equivalent of console.log(object);

2 You may also install React Developer Tools extension for Google Chrome, which will allow you to browse React/Om components you have on page

Answer 2

As you can read on the README file of Om project https://github.com/swannodette/om

You can use ankha, an EDN inspector view. Then you can print as edn your component and pass to ankha. Other solution can be (.dir js/console object) and you will be able to inspect your component on firebug or chrome console

Answer 3

Try cljs-devtools. This library leverages "custom formatters" to pretty-print clojure data structures in Chrome Javascript Console.

When you enable custom formatters and integrate library in your project this should pretty print your object:

(.log js/console your_namespace.your_object)

Also typing in the console should work (with code completion)

your_namespace.your_object

Disclaimer: This feature is experimental in Chrome Dev Tools and I'm author of the library.