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?

score 10 · Accepted Answer · answered Apr 11 '14 at 21:19

10

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

answered Apr 11 '14 at 21:19

0rca

166
4

2

I would also like to add that (dom/render-to-str) has been very helpful with debugging (https://github.com/swannodette/om/wiki/Documentation#render-to-str) – sthomps May 06 '14 at 14:57

score 3 · Answer 2 · answered Apr 10 '14 at 16:07

3

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

answered Apr 10 '14 at 16:07

tangrammer

3,041
17
24

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. – sthomps Apr 11 '14 at 18:29
@sthomps did you try (.dir js/console component) ? – tangrammer Apr 11 '14 at 18:31
(.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. – sthomps Apr 11 '14 at 18:56

score 3 · Answer 3 · answered Feb 28 '15 at 12:36

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.

How to inspect om objects?

3 Answers3