How Do You Inspect Intermediate Results In The View?

[Viir]

I am working on an elm app and the view function grows larger and more complex.
When running the app, I see a result on my screen which looks wrong. How did it end up this way?
With the inspector tool in elm 0.18, I can inspect the model and make sure that it matches my expectation, so I can rule out a problem in that part.
A bug must be somewhere in the view. Given the particular frame/update of the app, I would like to take a closer look what happens in the view.

How can I see the intermediate values in the call tree in the view?
Having a visualization of the expression tree with the ability to expand and collapse branches (like the tree of the model in the 0.18 inspector) would already be a big improvement over the tools I am aware of at the moment.

I guess there are better ways than the ones I have discovered so far, so I would like to learn how you do this inspection.

[gampleman]

Unfortunately, Debug.log seems to be your friend here.

One trick that might help is that you can use the _ dummy variable to add multiple logging statements.

view model =
  let
    _ = Debug.log "foo" model.foo
    _ = Debug.log "bar" model.bar
  in
   ...

The only gotcha with this is that the compiler can (and sometimes does) reorder the definitions within the let block, so you can see the messages in an unexpected order in your console.