components: fix and improve the components inspector from the October 2026 audit #315

Context

This comes from a code audit of the components inspector, done during a comparison with other devtools in October 2026. Roadmap items live in #310, #311, #312 and #313, and this issue only lists what they don't cover. Every problem below was checked against the code on main. None needed a running app, so nothing is marked (to confirm).

Problems

Medium

• Picking leaks pointer events to the app: only click calls preventDefault and stopPropagation. pointerdown, mousedown, pointerup and mouseup still reach the page, so menus, drag handles and CDK overlays that react to them open or close while you pick. Touch picking doesn't work either. Capture those events too, outside the popup, and resolve the pick on pointerup (packages/devtools/src/component-pick.ts:58-63, 97-102).

Low

• SVG component hosts can't be highlighted while picking: onHover keeps the host only when it is an HTMLElement, so a component on an svg:g selector gets no box. showHighlight already takes an Element, so accept Element here (packages/devtools/src/component-pick.ts:47).
• Highlight box ignores shadow-root children: when a host has an empty rect, highlightBox only walks el.children. A display: contents host whose content is in its shadow root gets no box. Also walk el.shadowRoot?.children (packages/devtools/src/page-highlight.ts:32).
• No source location for directives, and the fallback can be wrong: componentSource reads only ɵcmp.debugInfo, so the directive entries in the detail never get a file. Without debugInfo, sourceFor falls back to matches[0] when two classes share a name, and the panel shows that file as if it were certain. Read ɵdir.debugInfo too, fill source on each directive in the detail, and mark guessed locations as "likely" (packages/devtools/src/component-source.ts:17, packages/devtools/src/component-tree.ts:275-283, app/src/pages/component-tree.ts:1695-1699).
• Changed values aren't visible: properties are snapshots, so you can't tell what changed between ticks, and a kind: 'signal' property has no link to the Signals page. Flash values that changed since the last detail, and add a "Show in Signals" action for signal properties (app/src/pages/component-tree.ts, packages/devtools/src/component-tree.ts).

Improvements

• Open the template file and line as well as the class. The source scan doesn't return templateUrl for components yet, so add it to the scan and to SourceComponent (packages/devtools/src/rpc/get-components.ts, app/src/pages/component-tree.ts:36-46).
• Pick by keyboard: once picking, arrow keys move between component hosts on the page and Enter selects (packages/devtools/src/component-pick.ts).
• "Copy as JSON" and "Copy host path" actions on the selected component, for bug reports and agents (app/src/pages/component-tree.ts).

Already tracked elsewhere

• Editing inputs, properties and signals: phase 2 of 4: match the official Angular DevTools #311.
• Open in editor outside the extension, and Alt+click in pick mode: phase 1 of 4: safe by default, open in editor and cheap shell wins #310.
• Console handles ($ng0, "Store as global"): phase 2 of 4: match the official Angular DevTools #311.
• Full tree re-collected on every tick, MutationObserver dirty flag: phase 3 of 4: a devframe shell as good as Vue and Nuxt DevTools #312.
• Directive-only hosts as tree nodes: phase 2 of 4: match the official Angular DevTools #311.
• Lazy expansion of nested values beyond depth 3 and 30 keys, plus a property filter: phase 2 of 4: match the official Angular DevTools #311.