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.

can.debug.logWhatChangesMe(element)

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.