Extends the Developer Tools for declarative UI.
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.
- (2019-06-13) Hatim Bhatia: Extension is nice for debugging. even if we could provide break point on Event and little bit more about the declarative tracker (how to use it with text /video as through image it is hard to understand in the beginning ) Nice to use when working on AW Kudos for developer :)