Ember-debug-cp NPM

ember-debug-cp

Macro for debugging computed property

Usage

Before:

import Ember from 'ember';
const { computed } = Ember;

const obj = Ember.Object
  .extend({
    foo: 42,
    bar: computed('foo', function() {
      return 2 * this.get('foo')
    })
  })
  .create();

obj.get('bar');

After:

import Ember from 'ember';
import DebugProperty from 'ember-debug-cp';

const obj = Ember.Object
  .extend({
    foo: 42,
    // Replace computed by DebugProperty macro
    bar: DebugProperty.get('foo', function() {
      return 2 * this.get('foo')
    })
  })
  .create();

obj.get('bar');

And you get console input:

Getter console output

And DevTools debugger: Getter DevTools

Installation

ember install ember-abstract-macro

API

Code

import Ember from 'ember';
import DebugProperty from 'ember-debug-cp';

const obj = Ember.Object
  .extend({
    foo: 42,
    bar: DebugProperty.get('foo', function() {
      return 2 * this.get('foo')
    })
  })
  .create();

obj.get('bar');

Console:

Getter console output

DevTools:

Getter DevTools

Code

import Ember from 'ember';
import DebugProperty from 'ember-debug-cp';

const obj = Ember.Object
  .extend({
    foo: 42,
    bar: DebugProperty.set('foo', function() {
      return 2 * this.get('foo')
    })
  })
  .create();

obj.set('bar', 64);

Console:

Setter console output

DevTools:

Setter DevTools

Code

import Ember from 'ember';
import DebugProperty from 'ember-debug-cp';

const obj = Ember.Object
  .extend({
    foo: 42,
    bar: DebugProperty.both('foo', function() {
      return 2 * this.get('foo')
    })
  })
  .create();

obj.get('bar');
obj.set('bar', 64);