← Zustand DevTools

A real Zustand app · fictional shop · intentional bug

Find the action that breaks the cart.

The quantity is right. The discounted total isn’t. Inspect two real registered stores with the extension, then capture the mistake in a Trace Session.

Desk lamp

€30 each · sample product, no checkout

Quantity
1
Discount
0%
Cart total
€30.00

Add a second lamp, then apply the discount.

Inspect it in Chrome

  1. Install Zustand DevTools, then reload this page.
  2. Open Chrome DevTools and select Zustand (it may be under the » menu). Stores should show demo-cart and demo-promotion.
  3. In Trace Sessions, choose Start Trace. Add another lamp and apply the discount.
  4. Stop the trace. Inspect cart/applyDiscountBug and the changed total path.

Stores and Timeline are free. Three complete Trace Sessions are included; recording more requires Pro.

Already used your previews? Follow the same actions in Timeline.

Reveal the cause and try the corrected calculation

The promotion updates one store, then the cart calculates a discount for one lamp. It forgets to multiply by quantity.

// Bug: quantity is missing
 total: unitPrice * (1 - discount)

// Correct calculation
 total: quantity * unitPrice * (1 - discount)

This button changes only this sample app. The extension helps you inspect state; it does not automatically repair your application.

Hand the trace to another developer

Export the stopped session with state, then import it into another Zustand panel. Compare the cart before and after the discount. Imported traces are view-only; call-sites are best-effort. This demo contains only synthetic product data.

Use the workflow in your own app →