Declarative Chrome Extension

Description

Declarative Chrome Extension is for debugging Siemens Active Workspace Framework based applications.
This provides the below capabilities.

1.Declarative Inspector

To inspect declarative view model properties (actions, ctx, data, dataProviders, i18n, messages, onEvent) for the selected DOM element.
See attached screenshot of declarative inspector example.

2.Declarative Tracer

To trace the execution flow for key declarative events (execution of actions, publishing of events, loading of view/view model, addition of subpages etc.).
The tab provides buttons to start/stop recording, clear contents and a filter box.

See attached screenshot of declarative tracer example, In tracer console you can expand event data(object) (e.g. eventData for an event, inputData for an action ) and inspect its value.
To include loggers in your own customized code follow the following steps.
- Use logger service like this `logger.declarativeLog( 'DECLARATIVE TRACE - Some String %O', Object);`
- Example- `logger.declarativeLog( 'DECLARATIVE TRACE - Event: ' + event.name + ' EventData: %O', eventData );`

3.Declarative Viewer
To view declarative view model flow (actions, events and dataProviders) in a tree format.
See attached screenshot of declarative viewer example, you can see all the first level nodes represent the action or events which are independent of each other.