Next, we're going to assume that you have structured you app in the [recommended way](https://github.com/Day8/re-frame/tree/master/examples/todomvc/src/todomvc),
meaning you have the namespaces `events.cljs`, `subs.cljs` and `views.cljs`.
It is the functions within these namespaces that we wish to trace.
1. At the top of each add these namespaces, add these requires:
```cljs
[clairvoyant.core :refer-macros [trace-forms]]
[re-frame-tracer.core :refer [tracer]]
```
2. Then, immediately after the `ns` form add (if you want a green colour):
```cljs
(trace-forms {:tracer (tracer :color "green")}
```
3. Finally, put in a closing `)` at the end of the file. Now all functions within the
`ns` will be traced. It that is too noisy -- perhaps you won't want to trace all the helper functions --
then you can move the wrapping macros `trace-froms`
around to suit your needs.
4. Colour choice
We have sauntered in the direction of the following colours
| file | colour|
|--------------|-------|
|`handlers.clj`| green |
|`subs.cljs` | brown |
|`views.clj` | gold |
But I still think orange, flared pants are a good look. So, yeah. You may end up choosing others.
## Say No To Anonymous
To get good quality tracing, you need to provide names for all
your functions. So, don't let handlers be anonymous when registering them.
For example, make sure you name the renderer in a Form2 component:
```clj
(defn my-view
[]
(let [name (subscribe [:name])]
(fn my-view-renderer [] ;; <--nameit!!
[:div @name])))
```
And name those event handlers:
```clj
(reg-event-db
:blah
[interceptors]
(fn blah-handler ;; <--nameit
[db v]
(assoc db :blah true)))
```
## IMPORTANT
**By default, our clairvoyant fork does not produce any trace!!**
You must throw a compile-time switch for tracing to be included into development builds.
If you are using lein, do this in your `project.clj` file:
```clj
:cljsbuild {:builds [{:id "dev" ;; for the development build, turn on tracing
So, just to be clear, if you see no tracing when you are debugging, it
is almost certainly because you haven't successfully turned on this switch.
Your production builds need to nothing because, by default, all trace
is compiled out of the code.
## The result
Load your app, and open the dev-tools console. Make an event happen (click a button?).
Notice the colour coded tracing showing the functions being called and the derived data flowing.
Do you see the dominos?
## Warning
If the functions you are tracing take large data-structures as parameters, or
return large values, then you will be asking clairvoyant to push/log a LOT
of data into the js/console. This can take a while and might mean devtools
takes a lot of RAM.
For example, if your `app-db` was big and complicated, you might use `path`
middleware to "narrow" that part of `app-db` passed into your event handler
because logging all of `app-db` to js/console might take a while (and not
be that useful).
## React Native
If you have not enabled Remote JS Debugging in the emulator you will
get the following error related to console.groupCollapsed:
```
[TypeError: console.groupCollapsed is not a function. (In 'console.groupCollapsed("%c%s",[cljs.core.str("color:"),cljs.core.str(self__.color),cljs.core.str(";")].join(''),title)', 'console.groupCollapsed' is undefined)] line: 112, column: 23
```
Enable **Debug JS Remotely** to fix this.
## Appendix A - Prior to V0.8.0
If you are using v0.8.0 or later, then you can probably ignore this section.
Prior to v0.8.0, subscriptions were done using `re-frame.core/reg-sub-raw`,
instead of `re-frame.core/reg-sub` (which is now the preferred method).
Details of the changes can [be found here](https://github.com/Day8/re-frame/blob/master/CHANGES.md#080--20160819).
When using `re-frame.core/reg-sub-raw`, you must explicitly use `reaction`. And
unfortunately both `trace-forms` and `reaction` are macros and they don't work well together.
So there is some necessary changes to your `reg-sub-raw` code to get them to work with clairvoyant,
you need to replace the macro `reaction` with the function `make-reaction`.
