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?

Kilovolt

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

Sterilization

I would also like to add that (dom/render-to-str) has been very helpful with debugging (github.com/swannodette/om/wiki/Documentation#render-to-str) – Kilovolt

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

Alenaalene

Just tried ankha but it doesn't seem to work for om/build objects. It will still print #<[object Object]>. Thanks for the tip though, works great for other clojure objects. – Kilovolt

@Kilovolt did you try (.dir js/console component) ? – Alenaalene

(.dir js/console component) spits out a list of functions defined in the object but doesnt provide info on the dom element its trying to render or the data I passed in. – Kilovolt

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.

Shipwreck