Skip to content

[Feature]: Promote devtools to Stable — ship the browser-extension panel #146

Description

@JosunLP

Pre-flight checklist

  • I searched existing issues and did not find a duplicate request.
  • I explained the problem or use case, not just the desired API.

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    devtoolsChanges to the devtools module

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions