Debugging tools for @preact/signals
npm install @preact/signals-debugA powerful debugging toolkit for @preact/signals that provides detailed insights into signal updates, effects, and computed values.
``bash`
npm install @preact/signals-debugor
yarn add @preact/signals-debugor
pnpm add @preact/signals-debug
> [!NOTE]
> Ensure this package is imported in the root of your application
- Track signal value changes and updates
- Monitor effect executions
- Debug computed value recalculations
- Get real-time debugging statistics
- Configurable debugging options
`typescript
import { setDebugOptions } from "@preact/signals-debug";
// Configure debug options
setDebugOptions({
grouped: true, // Group related updates in console output
enabled: true, // Enable/disable debugging
spacing: 2, // Number of spaces for nested update indentation
});
`
The package automatically enhances signals with debugging capabilities:
1. Value Changes: Tracks and logs all signal value changes
2. Effect Tracking: Monitors effect executions and their dependencies
3. Computed Values: Tracks computed value recalculations and dependencies
4. Update Grouping: Groups related updates for better visualization
5. Performance Stats: Provides active trackers and subscriptions count
Configure debugging behavior:
`typescript``
setDebugOptions({
grouped?: boolean; // Enable/disable update grouping in console
enabled?: boolean; // Enable/disable debugging entirely
spacing?: number; // Number of spaces for nested update indentation, this can be handy in non-browser environments
});
MIT © Preact Team