CanJS Debugging Tutorial

CanJS provides two extremely useful debugging features:

  • A cleaned up stack
  • The ability to trace through what affects a value

A cleaned up stack 

Many observable state mechanisms get caught up in a queue or event loop.  This makes the native stack less useful.  For example, this stack trace might tell us the first event that caused a value to change.  But a lot of useful information is lost in CanJS's queuing system: 

CanJS keeps its own stack, allowing you to more easily debug the changes that lead to your current situations  The following shows each property that lead to the final result:

Watch this example on YouTube.

Trace through what affects a value

In complex applications, values might go through many transformations and components on their way to being rendered by the view.  CanJS lets you see this information using:


Using logWhatChanges me on the <h2> element in this CodePen shows which part of the view and the ViewModel the <h2>'s content is derived from:

Watch this example on YouTube.

For other CanJS debugging techniques, checkout this tutorial or CanJS's debugging guide.