DevTools

When to use

Local and non-prod debugging of Whisker modules. Mount DevToolsProvider at host level and DevToolsModuleProvider per module.

When NOT to use

Production builds — gate with enabled={!isProd}. End-user features.

Related stores

• useDevTools
• useDevToolsLauncher

Common pitfalls

• Never ship with enabled: true in production.
• DevToolsModuleProvider requires a per-module QueryClient.
• Registers Zustand stores via actionLogger middleware for State tab.

Props

Auto-generated from src/components/DevTools/DevTools.types.ts. Do not edit by hand. Run pnpm docs:props after changing source JSDoc.

DevToolsProviderProps

Host-level DevTools provider. Mount once at whisker-host or app root. Gate with enabled={!isProd} in production builds.

Prop	Type	Required	Description
accessToken	null | string	No	SIM access token for authorized debug endpoints.
bffBaseUrl	string	No	BFF base URL for debug API calls.
children	ReactNode	Yes	Child application tree.
enabled	boolean	No	Master switch — set false in production. Default: false
headerHeight	number	No	Fixed header height for panel offset.
isAuthorized	boolean	No	Whether the user may open dev tools.
queryClient	QueryClient	No	Host-level React Query client for the Query tab.
showFloatingButton	boolean	No	Show the floating launcher button. Default: true
showInventorySearch	boolean	No	Show the Inventory Search tab. Default: true
showQueryTab	boolean	No	Show the React Query tab. Default: true
showStateTab	boolean	No	Show the Zustand State tab. Default: true

DevToolsModuleProviderProps

Per-module DevTools scope for a Whisker module’s QueryClient.

Prop	Type	Required	Description
children	ReactNode	Yes	Child module tree.
moduleName	string	Yes	Unique module name (e.g. sim-pi-upload, sim-shipping).
queryClient	QueryClient	Yes	The module’s own React Query QueryClient instance.

DevToolsContextValue

Context value exposed by useDevTools() for panel state and registered stores.

Prop	Type	Required	Description
accessToken	null | string	No	Current SIM access token surfaced for authorized debug API calls.
actionLogs	ActionLog[]	Yes	Zustand action log entries from actionLogger middleware.
activeTab	string	Yes	ID of the currently active dev tools tab.
clearActionLogs	() => void	Yes	Clear all captured Zustand action logs.
closePanel	() => void	Yes	Close the floating dev tools panel.
enabled	boolean	Yes	Whether dev tools are enabled for this session.
headerHeight	number	Yes	Shell header height used to offset the panel from the top.
isAuthorized	boolean	Yes	Whether the current user is authorized to use debug features.
isPanelOpen	boolean	Yes	Whether the dev tools panel is currently open.
openPanel	(tab?: string) => void	Yes	Open the panel, optionally switching to a tab by ID.
panelPosition	'bottom' | 'side'	Yes	Panel dock position — bottom bar or side panel.
panelSize	number	Yes	Panel size in pixels (height for bottom, width for side).
queryClient	QueryClient	No	React Query client for the Query tab inspector.
showInventorySearch	boolean	Yes	Whether the Inventory Search tab is visible.
showQueryTab	boolean	Yes	Whether the React Query tab is visible.
showStateTab	boolean	Yes	Whether the Zustand State tab is visible.
stores	Record<string, DevToolsStore>	Yes	Registered Zustand stores keyed by store name.
switchTab	(tabId: string) => void	Yes	Switch to a tab by ID.
togglePosition	() => void	Yes	Toggle panel position between bottom and side.
triggerDebugRequest	() => Promise<unknown>	No	Optional callback to trigger a debug BFF request from the panel.
updatePanelSize	(size: number) => void	Yes	Update panel size in pixels.

Examples

Host + module setup

import {
  DevToolsProvider,
  DevToolsModuleProvider,
  DevToolsPanel,
} from '@nike/whisker-component-library';

<DevToolsProvider enabled={!isProd} queryClient={hostQueryClient}>
  <DevToolsModuleProvider moduleName="my-module" queryClient={moduleQueryClient}>
    <App />
    <DevToolsPanel />
  </DevToolsModuleProvider>
</DevToolsProvider>;

Live playground