vite-browser-runtime-diagnostics

vite-browser-runtime-diagnostics

Use this skill when runtime behavior is the likely cause. Prefer it over component inspection when timing and recent updates matter.

Standard sequence

vite-browser vite runtime
vite-browser errors --mapped --inline-source
vite-browser correlate errors --mapped --window 5000
vite-browser correlate renders --window 5000
vite-browser diagnose propagation --window 5000
vite-browser diagnose hmr --limit 50
vite-browser vite hmr trace --limit 50
vite-browser vite module-graph --limit 200
vite-browser vite module-graph trace --limit 200

In v0.3.3+, errors --mapped --inline-source is also the right first read for browser-side runtime failures that never appear in the Vite overlay. Do not assume no errors means the page is healthy unless logs and the visible browser state agree.

Use diagnose propagation first when the question is about rerenders, component paths, store changes, or "what update actually flowed into this failure". Treat its output as a high-confidence propagation clue, not strict causal proof. Use diagnose hmr first when the problem still looks primarily transport/HMR-layer.

Diagnostic patterns

HMR instability

1. vite hmr clear
2. Reproduce once
3. vite hmr trace --limit 50
4. Flag full-reload or repeated error events.

Module churn

1. vite module-graph clear
2. Capture baseline: vite module-graph
3. Trigger one change or one navigation
4. vite module-graph trace
5. Inspect unexpectedly added/removed modules.

Recent update caused failure

1. Reproduce once after the failure.
2. correlate errors --mapped --window 5000
3. Identify whether the current error overlaps with recent HMR-updated modules.
4. Inspect the highest-confidence matching module first.

Store or component propagation

1. Reproduce once after the visible failure.
2. Wait briefly for queued render/store events to settle if reproduction was driven by a live interaction or hot update. A short delay such as ~300ms is usually enough, though v0.3.3+ is more tolerant of sparse store-side evidence and missing browser-side HMR events in Vue/Pinia repros.
3. correlate renders --window 5000
4. diagnose propagation --window 5000
5. Use Store Updates, Changed Keys, and Render Path to choose the first store/component to inspect.
   • Vue: vue pinia [store], vue tree
   • React: react store list, react store inspect <name>, react commits --limit 20, react tree
6. If the output is inconclusive or says no trace is available, keep the conclusion conservative and do not overstate a causal chain.