Debugging

For Angular development, Augury is a convenient Chrome extension to inspect your app. To observe events, consider installing the Redux DevTools plugin.

Inspection tools

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:

bq.element($0)

To access the accompanying session, you may use the following:

bq.session($0)

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.

Querying

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:

bq.queryOne('[type=field]', $0) // returns a Blueriq Element nested within $0, or undefined is no such element exists

bq.queryAll('[type=field]', $0) // returns all Blueriq Elements nested within $0, or an empty array if no such elements exist

You may also test if a selector matches on the element of the selected component:

bq.matches('[type=Field]', $0) // returns true if element represented by $0 matches the selector

Event debugging

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:

import { BlueriqStoreModule } from '@blueriq/angular/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { environment } from '../environments/environment';

  imports: [
    environment.production ? [] : [
      BlueriqStoreModule.forRoot(),
      StoreDevtoolsModule.instrument({
        name: 'Blueriq',
        logOnly: true,
        maxAge: 50,
      }),
    ],
  ]

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.