René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"[Feature]: Promote `devtools` to Stable — ship the browser-extension panel","articleBody":"**Pre-flight checklist**\n- [x] I searched existing issues and did not find a duplicate request.\n- [x] I explained the problem or use case, not just the desired API.\n\n**Problem or use case**\nThis 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.\n\n**Proposed solution**\nBuild 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.\n\n**Possible API or UX shape**\n```ts\nimport { installBrowserBridge } from \"@bquery/bquery/devtools\";\n\ninstallBrowserBridge(); // stabilized protocol; the extension connects to this\n// Extension panel: component tree • signal/store values • timeline + time-travel\n// (consumes existing snapshot/diff/trace + window.__BQUERY_DEVTOOLS__)\n```\n\n**Alternatives considered**\nShipping 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.\n\n**Relevant area**\n`devtools`\n\n**Additional context**\nThe 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.\n","author":{"url":"https://github.com/JosunLP","@type":"Person","name":"JosunLP"},"datePublished":"2026-06-26T21:25:50.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/146/bQuery/issues/146"}