refactor(devtools): enable view source for template effects (#62692)

milomg · crisbeto · commit 294fc880e484 · 2025-08-06T11:19:15.000+02:00
Use inspect(class instance.constructor) to jump to the source of components when trying to inspect template effects PR Close #62692
diff --git a/packages/core/src/render3/util/signal_debug.ts b/packages/core/src/render3/util/signal_debug.ts
@@ -13,7 +13,7 @@ import {
 import {assertTNode, assertLView} from '../assert';
 import {getFrameworkDIDebugData} from '../debug/framework_injector_profiler';
 import {NodeInjector, getNodeInjectorTNode, getNodeInjectorLView} from '../di';
-import {REACTIVE_TEMPLATE_CONSUMER, HOST, LView} from '../interfaces/view';
+import {REACTIVE_TEMPLATE_CONSUMER, HOST, LView, CONTEXT} from '../interfaces/view';
 import {EffectNode, EffectRefImpl, ROOT_EFFECT_NODE, VIEW_EFFECT_NODE} from '../reactivity/effect';
 import {Injector} from '../../di/injector';
 import {R3Injector} from '../../di/r3_injector';
@@ -133,6 +133,9 @@ function getNodesAndEdgesFromSignalMap(signalMap: ReadonlyMap<ReactiveNode, Reac
         label: consumer.debugName ?? consumer.lView?.[HOST]?.tagName?.toLowerCase?.(),
         kind: consumer.kind,
         epoch: consumer.version,
+        // The `lView[CONTEXT]` is a reference to an instance of the component's class.
+        // We get the constructor so that `inspect(.constructor)` shows the component class.
+        debuggableFn: consumer.lView?.[CONTEXT]?.constructor as (() => unknown) | undefined,
         id,
       });
     } else {
