Problem
Debugging a Stacks app today involves:
console.logfrom<script client>to verify scope statedocument.querySelectorAll('[data-stx-scope]')from console to find scoped elementswindow.stx._scopesinspection to see registered scopes- Reading the rendered HTML to understand which
:ifbranches are active
None of this is visual. None of it is real-time. None of it surfaces the reactive graph (which signals depend on which derived values, which effects subscribe to which signals).
Compared to Vue DevTools / React DevTools, this is a generation behind on tooling.
Proposed: Stacks DevTools browser extension
A Chrome/Firefox extension with these panes:
Component tree
Visual tree of mounted components matching the DOM structure:
- BenchHeader (scope: stx_scope_BenchHeader_8)
- isAuthenticated: true (derived)
- notifications: { unreadCount: 3, items: [...] } (store)
- ArticleView (scope: stx_scope_ArticleView_9)
- reviewsStore.current: { id: 16, title: "...", ... }
- hasReviewerName: true (derived)
- Comments (scope: stx_scope_Comments_10)
- commentsLoaded: true
- comments: [{ id: 1, body: "..." }]Click a node to highlight in the DOM, see all scope vars + reactive derivations.
Signal / scope inspector
For any selected scope, show:
- All registered signals + current values
- All derived signals + their dependency graph (which signals they read)
- All effects + which signals they subscribe to + how often they've fired
Scope: stx_scope_Comments_10
Signals:
commentsLoaded: true (set 3x: initial, fetchById:start, loadComments:done)
comments: [...] (set 2x: initial, loadComments:done)
commentDraft: "" (set 0x)
Derived:
isAuthenticated → reads: authStore.token
Effects:
bindIfChain[composer/sign-in] → subscribes: isAuthenticated (re-ran 4x)
bindIfChain[loading/empty/list] → subscribes: commentsLoaded, comments (re-ran 8x)Conditional rendering trace
Show every :if / :else-if / :else decision + current pick:
<DIV :if="isAuthenticated()" → pick: 0 (current: true)
<DIV :else → pick: not active
<UL :if="!commentsLoaded()" → pick: not active
<DIV :else-if="comments().length === 0" → pick: not active
<UL :else → pick: 2 (current: shown)Query / fetch timeline
When P1.4's useQuery lands, show:
GET /api/judges/1 (loading, 234ms)
GET /api/comments?reviewId=16 (cached, served from store)
POST /api/reviews/16/like (mutation, 67ms, optimistic+confirmed)SSR vs Hydration diff viewer
Highlight any HTML element where the SSR-rendered content differs from what the client runtime would have rendered. (Pairs with P1.1's SSR branch elimination — if pre-evaluation gets a different answer than runtime would have, that's a hydration mismatch worth flagging.)
Prior art
- Vue DevTools — component tree, props/data/computed inspector, event timeline, performance profiler, Vuex/Pinia state, router history
- React DevTools — component tree, props/state/hooks inspector, profiler
- Redux DevTools — state-tree time travel
- TanStack Query DevTools — query cache inspector, mutation timeline
- Svelte DevTools — component tree + stores
- Solid DevTools — signals graph
Every framework has at least the first two panes. Stacks has none.
Impact
- Debug velocity: 10× improvement on hard-to-trace state bugs. The
[stx-debug]probes I added manually this week to diagnose #1737 would have been automatic. - Adopter confidence: "I can see what my framework is doing" is a huge factor in enterprise adoption.
- Performance profiling: the query timeline + effect run counts surface perf issues (like P1.4's chain over-subscription) that are otherwise invisible.
Phasing
- Phase 1: Console-only API —
window.__stxDevtoolsexposing the component tree + scope inspector as JS API. Adopters use it from console, no extension. - Phase 2: Chrome extension with component tree pane
- Phase 3: Signal/scope inspector
- Phase 4: Conditional rendering trace
- Phase 5: Query timeline (depends on P1.4)
- Phase 6: SSR/hydration diff viewer (depends on P1.1)
This is genuinely XL effort. Probably a year of dedicated work. But it's transformative for adopter DX.
Happy to PR Phase 1 — the runtime already exposes window.stx._scopes and findElementScope; just need to wrap as a documented API.