For Angular development, Augury is a convenient Chrome extension to inspect your app. To observe events, consider installing the Redux DevTools plugin.
In Web Inspector, in the Elements tab, select the HTML node of a certain component you'll want to inspect, then gain access to Blueriq's element data by typing the following in the console:
To access the accompanying session, you may use the following:
Here, $0
refers to the currently selected HTML node. The result should be the full Blueriq element, similar to the element data that can be seen using Augury. This only works if Angular is running in development mode as it requires the ng.probe
debugging facilities of Angular to be activated.
If you want to find certain elements in Blueriq's page tree, you can again use Web Inspector with the currently selected HTML node in $0
:
You may also test if a selector matches on the element of the selected component:
To see all events that occur and gain insight in Blueriq's state, consider adding the modules from the following snippet in order to sync all events with the Redux DevTools Chrome extension mentioned above. First, run npm install @ngrx/store-devtools
to add NgRx's development tools as project dependency. Then, in your AppModule
, add a conditional import for development purposes:
Importing BlueriqStoreModule
will activate optional logic that causes a representation of Blueriq state to become available in the Redux store. Unlike typical Redux usage, this data is only generated for debugging purposes and may therefore be excluded in production environments.