The official visual debugging suite for the Pulse ecosystem. Inspect, monitor, and debug your reactive graph in real-time with a premium, developer-focused UI.
npm install @pulse-js/toolsguard.explain() method, showing semantic failure reasons and dependencies.
bash
npm install @pulse-js/tools
`
Usage
$3
The easiest way to use Pulse Tools in React is via the @pulse-js/react package, which handles auto-injection.
`tsx
// main.tsx
import "@pulse-js/react/devtools";
`
$3
You can use the Web Component directly.
`html
`
Or in JavaScript:
`javascript
import "@pulse-js/tools";
const inspector = document.createElement("pulse-inspector");
document.body.appendChild(inspector);
`
$3
| Prop | Type | Default | Description |
| ---------- | -------- | ---------- | -------------------------------------------------------- |
| shortcut | string | 'Ctrl+D' | Keyboard shortcut to toggle the visibility of the panel. |
Tips
- Naming Matters: Ensure you provide string names to your Sources and Guards (e.g., source(val, { name: 'my-source' })). The DevTools rely on these names to provide meaningful debugging information. Unnamed units will not appear.
- Status Indicators:
- 🟢 Green: OK / Active
- 🔴 Red: Fails
- 🟡 Yellow: Pending (Async operations in flight)
Architecture
The DevTools communicate with the core library via the global PulseRegistry`. This means it works seamlessly even if your application code is split across multiple modules or bundles, as long as they share the same Pulse instance.