New:Socket for Asana Is Now Available.Learn more →
Zustand DevTools
zustand-devtools@extension - firefox Package Compare versions
+1
-1
| { | ||
| "manifest_version": 2, | ||
| "name": "Zustand DevTools", | ||
| "version": "1.11.0", | ||
| "version": "1.12.0", | ||
| "description": "Inspect and debug Zustand state stores in real-time. View state snapshots, track actions, and time-travel through state changes.", | ||
@@ -6,0 +6,0 @@ "author": "Your Name", |
+17
-3
@@ -174,5 +174,5 @@ /* ── Reset & Variables ───────────────────────────────────────────────────── */ | ||
| position: fixed; | ||
| bottom: 24px; | ||
| top: 24px; | ||
| left: 50%; | ||
| transform: translateX(-50%) translateY(12px); | ||
| transform: translateX(-50%) translateY(-12px); | ||
| background: var(--bg3); | ||
@@ -209,2 +209,13 @@ color: var(--green); | ||
| .action-list-header { | ||
| display: flex; align-items: center; justify-content: center; | ||
| padding: 0 12px; | ||
| height: 30px; min-height: 30px; | ||
| border-bottom: 1px solid var(--border); | ||
| background: var(--bg2); | ||
| position: sticky; top: 0; z-index: 2; | ||
| font-size: 11px; font-weight: 600; color: var(--text2); | ||
| letter-spacing: .3px; | ||
| } | ||
| #action-list { padding: 4px 0; } | ||
@@ -240,5 +251,7 @@ | ||
| background: var(--bg2); padding: 0 8px; flex-shrink: 0; | ||
| height: 30px; min-height: 30px; | ||
| } | ||
| .tab-btn { | ||
| display: inline-flex; align-items: center; gap: 6px; | ||
| background: none; border: none; color: var(--text2); | ||
@@ -249,4 +262,5 @@ padding: 8px 12px; cursor: pointer; font-size: 11px; font-weight: 500; | ||
| } | ||
| .tab-btn svg { width: 14px; height: 14px; pointer-events: none; flex-shrink: 0; } | ||
| .tab-btn:hover { color: var(--text); } | ||
| .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); } | ||
| .tab-btn.active { color: #149eca; border-bottom-color: #149eca; } | ||
@@ -253,0 +267,0 @@ #state-content { |
+50
-6
@@ -54,2 +54,5 @@ <!DOCTYPE html> | ||
| <div id="action-list-wrap"> | ||
| <div class="action-list-header"> | ||
| <span>Action History</span> | ||
| </div> | ||
| <div id="action-list"></div> | ||
@@ -59,7 +62,49 @@ </div> | ||
| <div id="state-tabs"> | ||
| <button class="tab-btn active" data-tab="state">State</button> | ||
| <button class="tab-btn" data-tab="diff">Diff</button> | ||
| <button class="tab-btn" data-tab="raw">Raw JSON</button> | ||
| <button class="tab-btn" data-tab="chart">Chart</button> | ||
| <button class="tab-btn" data-tab="timer">Timer</button> | ||
| <button class="tab-btn active" data-tab="state"> | ||
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" | ||
| stroke-linejoin="round"> | ||
| <ellipse cx="12" cy="5" rx="9" ry="3" /> | ||
| <path d="M3 5v6c0 1.66 4 3 9 3s9-1.34 9-3V5" /> | ||
| <path d="M3 11v6c0 1.66 4 3 9 3s9-1.34 9-3v-6" /> | ||
| </svg> | ||
| <span>State</span> | ||
| </button> | ||
| <button class="tab-btn" data-tab="diff"> | ||
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" | ||
| stroke-linejoin="round"> | ||
| <circle cx="6" cy="6" r="3" /> | ||
| <circle cx="6" cy="18" r="3" /> | ||
| <path d="M6 9v6" /> | ||
| <path d="M21 6h-7a2 2 0 0 0-2 2v9" /> | ||
| <polyline points="15 14 12 17 9 14" /> | ||
| </svg> | ||
| <span>Diff</span> | ||
| </button> | ||
| <button class="tab-btn" data-tab="raw"> | ||
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" | ||
| stroke-linejoin="round"> | ||
| <polyline points="16 18 22 12 16 6" /> | ||
| <polyline points="8 6 2 12 8 18" /> | ||
| </svg> | ||
| <span>Raw JSON</span> | ||
| </button> | ||
| <button class="tab-btn" data-tab="chart"> | ||
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" | ||
| stroke-linejoin="round"> | ||
| <line x1="6" y1="20" x2="6" y2="12" /> | ||
| <line x1="12" y1="20" x2="12" y2="4" /> | ||
| <line x1="18" y1="20" x2="18" y2="9" /> | ||
| </svg> | ||
| <span>Chart</span> | ||
| </button> | ||
| <button class="tab-btn" data-tab="timer"> | ||
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" | ||
| stroke-linejoin="round"> | ||
| <circle cx="12" cy="13" r="8" /> | ||
| <path d="M12 9v4l2 2" /> | ||
| <path d="M9 2h6" /> | ||
| <path d="M12 2v3" /> | ||
| </svg> | ||
| <span>Timer</span> | ||
| </button> | ||
| </div> | ||
@@ -73,3 +118,2 @@ <div id="state-content"></div> | ||
| <div id="empty-state"> | ||
| <div class="empty-icon">🐻</div> | ||
| <h2>No Zustand stores found</h2> | ||
@@ -76,0 +120,0 @@ <p>Open a page that uses <code>zustand</code> and stores will appear here automatically.</p> |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
No alert changes
No metric changes