Skip to main content

Development Tools Overview

Setting up​

  • Devtools is an extension. Hookstate-4 requires it to be added explicitly to a state, by providing it as a second argument to hookstate or useHookstate functions.

  • If a state does not have identifiable extension attached as well, devtools extension should be initialized with the key option.

    import { devtools } from '@hookstate/devtools'
    let state = hookstate(value, devtools({ key: 'my-state-label' }))
    import { identifiable } from '@hookstate/identifiable'
    import { devtools } from '@hookstate/devtools'
    let state = hookstate(value, extend(identifiable('my-state-label'), devtools()))

  • 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 integrated. Try it out!

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.

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.