Skip to content

feat(inspector): add interactive element inspector and cross-panel component funnel - #34

Open
Xoppyc wants to merge 10 commits into
solidjs:feat/devtools-dockfrom
Xoppyc:feat/inspector-mode
Open

Xoppyc wants to merge 10 commits into
solidjs:feat/devtools-dockfrom
Xoppyc:feat/inspector-mode

Conversation

@Xoppyc

@Xoppyc Xoppyc commented Oct 26, 2026

Copy link
Copy Markdown
Contributor

Summary

Adds an interactive Element Inspector and cross-panel component funneling to the devtools dock.

Rather than only serving as a jump-to-editor utility, selecting an element activates a component funnel across the devtools panels:

  1. Reactivity Graph: Isolates reactive signals, memos, and effects belonging to the selected component's owner instance hierarchy (instead of showing all global reactive nodes or broad name matches).
  2. Ownership Tree: Automatically expands, reveals, and scrolls to the selected component node so its props and internal scopes can be inspected immediately.
  3. Preserves Active Tab: Selecting an element keeps you on your current active panel (e.g. Reactivity) without jarring tab jumps, while displaying a funnel badge in the dock header.
  4. Dock Header Funnel Badge: Shows the component name with a quick jump to the Ownership tree, a direct "See in editor" button (using Vite's /__open-in-editor), and a clear button (✕) to unfunnel.
  5. Shortcuts & Activation:
    • Alt+Shift+C (or the crosshair icon in the dock header) toggles inspect mode.
    • Hovering DOM nodes displays an overlay badge with component name, file location, and dimensions.
    • Escape cancels inspection.

Technical Details

  • Zero Additional Plugins: Relies exclusively on @solidjs/vite-plugin's dev-mode location injection (owner._component.fn.location) and Solid's runtime ownership tree.
  • Robust DOM Lookup: Monkeypatches document.createElement / createElementNS in dev mode using a WeakMap<Node, Owner> to map real DOM nodes back to their originating Solid component owners without adding data-attributes to the user's DOM.
  • Instance-Level Reactivity Filtering: ReactivityViewer filters nodes using isDescendantOf(node.owner, targetOwner) so multiple instances of identical components (like <For> iterations or reused UI components) are isolated accurately.
  • Editor Launch Reliability: Handles nested monorepo / example subpath depths against Vite's launch-editor-middleware.

Verification

  • Unit tests added for DOM-to-component lookup and traversal (src/dev-toolbar/inspector/lookup.test.ts).
  • pnpm test (all 116 tests passing).
  • pnpm typecheck (clean TypeScript check).
  • pnpm format:check (oxfmt clean).
  • pnpm build (clean rolldown bundle & DTS generation).
  • Changeset included (.changeset/element-inspector.md).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant