Your app stays on your machine.
No account, cloud service, API key, telemetry, or upload path. Export redaction is applied again before data leaves the panel.
Local-first · Development only
The evidence chain
behind any React UI.
Click a rendered element. CauseScope follows it back to the exact TSX, live expression, deciding branch, state transition, prop, store, or request that produced it.
React 18–19Vite 5–8No accountZero production code
localhost:5173/ordersINSPECTING
01 · SOURCEProductEditor.tsx:112
02 · STATEisDirty = true
THE TRACE, NOT A GUESS
One click. Four layers of evidence.
CauseScope keeps the DOM, source, runtime values, and update history connected—so each answer shows where it came from.
- 01Rendered UI
Select text, buttons, inputs, lists, or any ordinary DOM element.
- 02Exact TSX
See the component, file, line, column, source snippet, and component stack.
- 03Live decision
Inspect operands, computed results, conditions, props, hooks, and stores.
- 04Update trail
Follow setter calls, events, network requests, and storage changes over time.
A REAL DEBUGGING QUESTION
“Why can’t this order be refunded?”
The disabled button is only the symptom. The useful answer is the branch and the live value behind it.
ELEMENT
<button disabled={!canRefund}>DECISION
canRefund → falseOPERAND
order.status === "paid" → falseSTATE
order.status = "pending"ORIGIN
GET /api/orders/4821 · 200BUILT FOR THE INNER LOOP
Evidence-rich without becoming infrastructure.
Coordinates you can act on.
Jump from a normal page element to its exact TSX location, then switch directly to another element without restarting inspection.
Nothing ships to production.
The plugin runs only in Vite’s development server. Production builds contain no overlay, endpoint, instrumentation, or debug attributes.
A DIFFERENT LAYER
Use the right instrument for the question.
CauseScope complements the tools already in a React developer’s browser.
| Tool category | Best at | Evidence chain |
|---|---|---|
| React DevTools | Component tree, props, and hooks | Component-level runtime view |
| Performance scanners | Finding expensive renders | Performance observations |
| Source locators | Opening a component file | UI → source location |
| CauseScope | Explaining why rendered UI has its current value or state | UI → TSX → decision → update origin |
TWO LINES TO START
Add evidence to your next debugging session.
CauseScope supports React 18–19 and Vite 5–8. This repository is a pnpm Workspace + Turborepo monorepo; consumers can use any npm-compatible package manager.
terminalvite.config.ts
$ pnpm add -D causescope@beta
import causeScope from "causescope/vite";
export default defineConfig({
plugins: [react(), causeScope()],
});