How to debug emberjs computed property

Question

Let's say I have a computed property that depends on other properties. How can I find out which change on dependency property triggers re-compute on my property. Other than that, is there any way to debug computed chaining?

i guess there is no easy way, you may need to use computed property with getter and setter, and compare with your previous values — Ember Freak
i look at the source code in order to see if there are any undocumented features we can benefit from; but no luck. may be you can ask at ember discuss and someone from the core team should give an appropriate answer. i believe you have no chance but to rely on observers instead of computed property to learn about changing properties. good luck. — feanor07

Calvin Alvin Calvin Alvin · Accepted Answer · 2017-03-21T23:23:37

If your computed properties are in a component, you can try hooking into the didUpdateAttrs hook. didUpdateAttrs fire when values which were passed into the component update. Within the didUpdateAttrs you can check to see what attrs were changed by comparing the old/new values.

  didUpdateAttrs: function(attrs) {
    // attrs should have access to the old/new values

  }

https://guides.emberjs.com/v2.6.0/components/the-component-lifecycle/

didUpdateAttrs runs when the attributes of a component have changed, but not when the component is re-rendered, via component.rerender, component.set, or changes in models or services used by the template.

A didUpdateAttrs is called prior to rerender, you can use this hook to execute code when specific attributes are changed. This hook can be an effective alternative to an observer, as it will run prior to a re-render, but after an attribute has changed.

An example of this scenario in action is a profile editor component. As you are editing one user, and the user attribute is changed, you can use didUpdateAttrs to clear any error state that was built up from editing the previous user.

How to debug emberjs computed property

3 Answers