Development Tools Overview
Setting up
- Insert the line
import '@hookstate/devtools'
in the root of your React app, for example in index.ts or index.js file. The tools should be imported before importing other modules, which create or use states. - Install Chrome browser's extension and reload your app.
There is no impact on performance in production. Development tools are activated only when the browser's extension is opened.
Demo
Demo application has got DevTools intergrated. Try it out!
Configuring monitored states
When the browser's extension is opened, all global and all explicitly labelled states are monitored, by default.
You can inspect all found states, their names and if they are monitored or not in the inspector consoler for the @hookstate/devtools: settings
state. The status is printed in the development tools, like the following:
:: CREATE 'StateName' (monitored)
The StateName
will be either a module name for a global state, component name for a local not explicitly labelled state, or your custom assigned DevTools label of a state.
If a state is not monitored, you can enable monitoring using 1 of the following methods:
- Assign explicit label to a state.
- Configure
@hookstate/devtools: settings
on application start up - Configure
@hookstate/devtools: settings
from the browser's extension
All methods are considered below.
Assign a label for a state
In order to label a state use the following:
import { DevTools } from '@hookstate/core'
...
state = hookstate(...)
DevTools(state).label('my-state')
// Or:
state = useHookstate(...)
DevTools(state).label('my-state')
Configure @hookstate/devtools: settings
on start up
In order to configure the list of monitored states and other settings use the following:
import { DevToolsInitialize } from '@hookstate/devtools'
DevToolsInitialize({
monitored: ['NameOfState1', 'NameOfState2'],
callstacksDepth: 30
})
Configure @hookstate/devtools: settings
from the browser's extension
This method work only in the Web environment where local storage is available.
- Open the development tools browser's extension
- Choose Inspect mode (top left drop down list)
- Choose
@hookstate/devtools: settings
state (top right drop down list) - Click 'Dispatcher' button (bottom row buttons) to make sure 'dispatch' form is active
- Put the following content to the 'dispatch' form:
{
type: 'SET',
value: {
monitored: ['NameOfState1', 'NameOfState2'],
callstacksDepth: 30
}
} - Clich 'Dispatch' button (bottom right button)
- Reload the application
Now all the states enumerated in the monitored
list will be monitored.
Set state value from the development tools
You can set new value for a state at root or at a specific path using the development tools. Put content for an action in the 'Dispatch' form and click 'Dispatch' button.
The easiest way to learn the content of a dispatch action is to inspect an action data for the state update, triggered within an application.
Note: this method is used to configure @hookstate/devtools: settings
as documented above.
Rerender components which use state value at path
Open React development tools browser's extension and enable 'Highlight on rerender' option. Trigger a dispatch action from the Redux development tools with the following content:
{
type: 'RERENDER',
path: []
}
Path in the above example points to the root of a state. It can also point to a nested path. Learn more about state path.
Toggle breakpoint on state update
Trigger a dispatch action from the Redux development tools with the following content:
{
type: 'BREAKPOINT',
}
Now any event, which sets a state, will trigger a breakpoint in the browser.
To disable the breakpoint, repeat the same dispatch action again.
Pausing/Unpausing monitoring
Click 'Pause recording' button (bottom row) in the development tools.
Persist state on page reload
Click 'Persist' button (bottom row) in the development tools.
Log custom data per state
It is possible to log custom data to the development tools:
const state = useHookstate(...)
...
DevTools(state).log('this is custom log', myData)
This log data will be visible alongside all other actions, like state updates, attributed to a state.