Devtools

Use the development inspector to see app state, mounted roots, and effect counts while you build. Keep it out of production.

Open the inspector

Import the separate development entry before creating apps, then mount its inspector:

import { devtoolsPanel } from '@jnreis/briojs/devtools';

const stopInspector = devtoolsPanel(document.querySelector('#brio-tools'));

Inspector cleanup and activation

• The inspector tracks app state snapshots, mounted roots, and reactive effect counts.
• Call the returned function to remove the panel and its subscription.
• The main entry also exports devtools functions, but does not activate tracking automatically. Unused tooling can be tree-shaken.

With the development browser bundle, use brio.devtoolsPanel(document.querySelector('#brio-tools')) directly.