Pre-flight checklist
Problem or use case
This is the single clearest deficit versus competitors. React DevTools, Vue DevTools, and Svelte DevTools all ship mature browser extensions with a component tree and reactive-state inspection (Svelte DevTools+ advertises time-travel; Vue DevTools provides a timeline). bQuery's devtools module (Beta) offers only runtime inspection helpers — timeline, diffs, traces, snapshots, perf helpers — plus an installBrowserBridge() that the docs describe as "for future extension panels." In other words there is no actual extension yet, only a bridge stub. Without it, debugging bQuery apps is materially worse than the alternatives, and devtools cannot credibly be called stable.
Proposed solution
Build the browser extension that installBrowserBridge() only stubs today: a panel showing the component (Web Component) tree, live signal/store inspection (reading the existing window.__BQUERY_DEVTOOLS__ store hook), and timeline/time-travel debugging built on the module's existing snapshot/diff/trace primitives. Stabilize the bridge protocol as the public contract between app and extension, then freeze the devtools API. Exit criteria: shipped extension (at least Chromium; Firefox ideally), stabilized bridge protocol, component-tree + state inspection + timeline, docs.
Possible API or UX shape
import { installBrowserBridge } from "@bquery/bquery/devtools";
installBrowserBridge(); // stabilized protocol; the extension connects to this
// Extension panel: component tree • signal/store values • timeline + time-travel
// (consumes existing snapshot/diff/trace + window.__BQUERY_DEVTOOLS__)
Alternatives considered
Shipping only the in-page runtime helpers and documenting console-based inspection — far below the bar set by React/Vue/Svelte DevTools and a real adoption deterrent. A standalone Electron inspector instead of a browser extension — worse DX than an in-browser panel and not where developers expect framework devtools to live.
Relevant area
devtools
Additional context
The snapshot/diff/trace primitives and the store devtools hook (window.__BQUERY_DEVTOOLS__) already exist, so much of the data layer is in place — the missing piece is the extension UI and a frozen bridge protocol. Wire in hydration-mismatch (#130) and a11y-audit (#142) surfaces so they're inspectable too. This is the highest-visibility single ticket in the set.
Pre-flight checklist
Problem or use case
This is the single clearest deficit versus competitors. React DevTools, Vue DevTools, and Svelte DevTools all ship mature browser extensions with a component tree and reactive-state inspection (Svelte DevTools+ advertises time-travel; Vue DevTools provides a timeline). bQuery's
devtoolsmodule (Beta) offers only runtime inspection helpers — timeline, diffs, traces, snapshots, perf helpers — plus aninstallBrowserBridge()that the docs describe as "for future extension panels." In other words there is no actual extension yet, only a bridge stub. Without it, debugging bQuery apps is materially worse than the alternatives, anddevtoolscannot credibly be called stable.Proposed solution
Build the browser extension that
installBrowserBridge()only stubs today: a panel showing the component (Web Component) tree, live signal/store inspection (reading the existingwindow.__BQUERY_DEVTOOLS__store hook), and timeline/time-travel debugging built on the module's existing snapshot/diff/trace primitives. Stabilize the bridge protocol as the public contract between app and extension, then freeze thedevtoolsAPI. Exit criteria: shipped extension (at least Chromium; Firefox ideally), stabilized bridge protocol, component-tree + state inspection + timeline, docs.Possible API or UX shape
Alternatives considered
Shipping only the in-page runtime helpers and documenting console-based inspection — far below the bar set by React/Vue/Svelte DevTools and a real adoption deterrent. A standalone Electron inspector instead of a browser extension — worse DX than an in-browser panel and not where developers expect framework devtools to live.
Relevant area
devtoolsAdditional context
The snapshot/diff/trace primitives and the store devtools hook (
window.__BQUERY_DEVTOOLS__) already exist, so much of the data layer is in place — the missing piece is the extension UI and a frozen bridge protocol. Wire in hydration-mismatch (#130) and a11y-audit (#142) surfaces so they're inspectable too. This is the highest-visibility single ticket in the set.