SDuX Vault DevTools

About

SDuX Vault DevTools is a Chrome extension that gives you full visibility into your SDuX Vault state management pipeline — directly in Chrome DevTools.

REAL-TIME EVENT STREAM
Watch every state event flow through your pipeline as it happens. See the key, type, timestamp, and indicators for state changes, payloads, errors, and candidates — all in a scrollable, filterable event log.

STATE INSPECTION
Click any event to inspect its full payload, state snapshot, and error details in a structured detail panel. Compare before-and-after state to understand exactly what changed.

REPLAY & COMPARE
Replay traces side-by-side to compare execution timelines. Visualize pipeline performance with delta views, span charts, and waterfall diagrams. Identify bottlenecks and unexpected behavior patterns.

EXTENSION INSPECTOR
Inspect registered extensions, behaviors, and their execution timelines. See how interceptors, filters, reducers, and other pipeline stages interact across your feature cells.

VAULT OVERVIEW
Get a bird's-eye view of all active vaults and feature cells in your application. Monitor state sizes, event counts, and pipeline health at a glance.

BUILT FOR DEVELOPERS
• Works with any framework — Angular, React, Vue, Svelte, or vanilla JS
• Zero configuration — automatically detects SDuX Vault on the page
• Lightweight — no impact on application performance
• Dark theme optimized for the DevTools environment

GETTING STARTED

Install the extension
Open Chrome DevTools (F12)
Navigate to the "SDuX Vault" tab
Start your application with SDuX Vault — events appear automatically
REQUIREMENTS
Your application must use @sdux-vault/core and have the devtools bridge enabled. See https://www.sdux-vault.com for documentation.

PRIVACY
This extension only accesses state data from pages running SDuX Vault. No data is collected, transmitted, or stored externally. All inspection happens locally in your browser.