Otter Framework is providing an Otter Chrome Extension for your applications. The extension comes with the following features:
- Application information: application version, environment, build date, etc.
- Localization keys display
- Visual Testing toggle
- Rule Engine current state: rule engine state, rule engine logs, etc.
- Configuration: display and modification of the application components configuration.
- Theming: display and modification of the application theming variables.
- States: save customization to be able to apply it later or share it.
You can find the Otter Devtools Chrome extension by clicking on this link or by searching for Otter DevTools
in the Chrome Web Store.
The Otter module will automatically register its Devtool service if the following configuration is set in the workspace configuration:
{
"schematics": {
"*:ng-add": {
"registerDevtool": true
}
}
}
Note
This configuration is set by the --with-devtool
option of the ng add @o3r/core
command.
Once you have download the extension, you will need to enable the features you need one by one. There is no root toggle.
To do so, you will need to import the corresponding modules in you AppModule
:
import { ApplicationDevtoolsModule } from '@o3r/application';
import { ComponentsDevtoolsModule } from '@o3r/components';
import { ConfigurationDevtoolsModule } from '@o3r/configuration';
import { LocalizationDevtoolsModule } from '@o3r/localization';
import { RulesEngineDevtoolsModule } from '@o3r/rules-engine';
import { StylingDevtoolsModule } from '@o3r/styling';
@NgModule({
imports: [
ApplicationDevtoolsModule,
ConfigurationDevtoolsModule,
ComponentsDevtoolsModule,
LocalizationDevtoolsModule,
RulesEngineDevtoolsModule,
StylingDevtoolsModule
]
})
export class AppModule {}
Then the activation of the services can be done in the AppComponent
as follows:
import { ApplicationDevtoolsMessageService } from '@o3r/application';
import { ComponentsDevtoolsMessageService } from '@o3r/components';
import { ConfigurationDevtoolsMessageService } from '@o3r/configuration';
import { LocalizationDevtoolsMessageService } from '@o3r/localization';
import { RulesEngineDevtoolsMessageService } from '@o3r/rules-engine';
import { StylingDevtoolsMessageService } from '@o3r/styling';
@Component({
selector: 'app'
})
export class AppComponent {
constructor(
applicationDevtoolsMessageService: ApplicationDevtoolsMessageService,
componentsDevtoolsMessageService: ComponentsDevtoolsMessageService,
configurationMessageService: ConfigurationDevtoolsMessageService,
localizationMessageService: LocalizationDevtoolsMessageService,
rulesEngineDevtoolsMessageService: RulesEngineDevtoolsMessageService,
stylingDevtoolsMessageService: StylingDevtoolsMessageService
) {
if (environment.DEBUG_MODE) {
// It is strongly recommended to activate the Otter Devtools services only in the development mode
applicationDevtoolsMessageService.activate();
componentsDevtoolsMessageService.activate();
configurationMessageService.activate();
localizationMessageService.activate();
rulesEngineDevtoolsMessageService.activate();
stylingDevtoolsMessageService.activate();
}
}
}
Tip
The services can be also activated at bootstrap time by providing isActivatedOnBootstrap: true
to their dedicated token OTTER_<module>_DEVTOOLS_OPTIONS
. For example:
{provide: 'OTTER_CONFIGURATION_DEVTOOLS_OPTIONS', useValue: {isActivatedOnBootstrap: true}}
The services need to be injected in the application.
platformBrowserDynamic().bootstrapModule(AppModule).then((m) => runInInjectionContext(m.injector, () => inject(ConfigurationDevtoolsConsoleService)))
In your angular.json
or project.json
, you can specify assets
in the options of @angular-devkit/build-angular:application
.
"executor": "@angular-devkit/build-angular:application",
"options": {
// ...,
"assets": [
// ...,
{
"glob": "**/*.metadata.json",
"input": "apps/showcase",
"output": "/metadata"
}
]
},
// ...
Caution
We recommend adding this asset entry for the development configuration only.
Note
For the showcase application, we are exposing the metadata in production mode, in order to easily showcase the Chrome extension features.
If you are locally implementing modifications in the Otter DevTools extension, you can test these changes with the following steps:
- Build the chrome-devtools application:
yarn nx build chrome-devtools
- Change the version from
0.0.0-placeholder
to0.0.0
in the filesdist/package.json
anddist/manifest.json
- Go to the link
chrome://extensions/
(enableDeveloper mode
in the top-right corner), click theLoad unpacked
button, and select thedist
folder of the previously built chrome-devtools application