Vite HMR & Stale Cache Debugging

When template or CSS changes don't appear in the browser, the problem is almost always stale dev server output or browser cache — not a Vue, CSS, or framework bug.

This skill encodes a systematic diagnostic sequence learned from real debugging sessions where hours were lost chasing CSS specificity and Vue reactivity issues that turned out to be cache problems.

The Golden Rule

Before debugging any visual/behavioral issue, PROVE that your changes are being served. Never assume HMR delivered your edit. Verify first, debug second.

Step 1: The Test Marker (Do This First, Every Time)

Add a visually unmistakable element to the component you're editing:

<!-- Add this anywhere in the template -->
<div style="background: red; color: white; font-size: 14px; padding: 4px 8px; position: absolute; top: 0; right: 0; z-index: 9999;">MARKER</div>