Behavior debugging

development mode only

If you've exposed manageBehaviors in your application JavaScript set up:

import { manageBehaviors } from '@area17/a17-behaviors';
import * as Behaviors from './behaviors';

window.A17 = window.A17 || {};

document.addEventListener('DOMContentLoaded', () => {
    window.A17.behaviors = manageBehaviors;
    window.A17.behaviors.init(Behaviors, {
        breakpoints: ['sm', 'md', 'lg', 'xl']
    });
});

Then, in "development" mode, in your browser console you'll be able to see

window.A17.behaviors
// active: Map(7), add: ƒ addBehaviors(behaviors), callMethod: ƒ behaviorProp(bName, bNode, prop, value), getBehaviors: ƒ nodeBehaviors(bNode), getProp: ƒ behaviorProp(bName, bNode, prop, value), getProps: ƒ behaviorProperties(bName, bNode), init: ƒ init(loadedBehaviorsModule, opts), loaded: {…}, initBehavior: ƒ initBehavior(bName, bNode, config = {}), setProp: ƒ behaviorProp(bName, bNode, prop, value)

Which will allow you some debugging options for your behaviors.

• window.A17.behaviors.loaded - A list of all loaded behavior modules in memory (not necessarily all active).
• window.A17.behaviors.active - Is a map of DOM nodes and the behaviors attached to them. Drilling down into them you can see the options, properties and methods of those behaviors.
• window.A17.behaviors.getBehaviors(node) - returns the behaviors currently active on DOM node node and their properties
• window.A17.behaviors.getProps('myBehavior', node) - returns the properties from the myBehavior behavior running on DOM node node
• window.A17.behaviors.getProp('myBehavior', node, 'foo') - returns the value of this.foo from the myBehavior behavior running on DOM node node
• window.A17.behaviors.setProp('myBehavior', node, 'foo', 'bar') - sets the value of this.foo to bar in the myBehavior behavior running on DOM node node
• window.A17.behaviors.callMethod('myBehavior', node, 'alert')('param') - calls the method alert in the myBehavior behavior running on DOM node node, with optional parameters