angular · eduhmc · Jun 16, 2026 · Jun 16, 2026 · SkyZeroZx · Jun 16, 2026
diff --git a/devtools/projects/ng-devtools/src/lib/application-operations/index.ts b/devtools/projects/ng-devtools/src/lib/application-operations/index.ts
@@ -14,6 +14,7 @@ export abstract class ApplicationOperations {
   abstract selectDomElement(position: ElementPosition, target: Frame): void;
   abstract inspect(directivePosition: DirectivePosition, objectPath: string[], target: Frame): void;
   abstract inspectSignal(position: SignalNodePosition, target: Frame): void;
+  abstract setSignalBreakpoint(position: SignalNodePosition, target: Frame): void;
   abstract viewSourceFromRouter(name: string, type: string, target: Frame): void;
   abstract setStorageItems(items: {[key: string]: unknown}): Promise<void>;
   abstract getStorageItems(items: string[]): Promise<{[key: string]: unknown}>;

diff --git a/...c/lib/devtools-tabs/directive-explorer/signal-graph-pane/signal-graph-pane.component.html b/...c/lib/devtools-tabs/directive-explorer/signal-graph-pane/signal-graph-pane.component.html
@@ -15,6 +15,7 @@
     [graph]="signalGraph.graph()!"
     [element]="signalGraph.element()!"
     (gotoSource)="gotoSource($event)"
+    (setBreakpoint)="setBreakpoint($event)"
     (expandCluster)="expandCluster($event)"
     (highlightDeps)="highlightDeps($event)"
     (close)="detailsVisible.set(false)"

diff --git a/...src/lib/devtools-tabs/directive-explorer/signal-graph-pane/signal-graph-pane.component.ts b/...src/lib/devtools-tabs/directive-explorer/signal-graph-pane/signal-graph-pane.component.ts
@@ -104,6 +104,17 @@ export class SignalGraphPaneComponent {
     );
   }
 
+  setBreakpoint(node: DevtoolsSignalGraphNode) {
+    const frame = this.frameManager.selectedFrame();
+    this.appOperations.setSignalBreakpoint(
+      {
+        element: this.signalGraph.element()!,
+        signalId: node.id,
+      },
+      frame!,
+    );
+  }
+
   expandCluster(clusterId: string) {
     this.visualizer().expandCluster(clusterId);
   }

diff --git a/devtools/projects/ng-devtools/src/lib/shared/signal-details/signal-details.component.html b/devtools/projects/ng-devtools/src/lib/shared/signal-details/signal-details.component.html
@@ -16,6 +16,17 @@
       >
         <mat-icon> code </mat-icon>
       </button>
+      <button
+        ng-button
+        size="compact"
+        class="action-btn"
+        btnType="secondary"
+        (click)="setBreakpoint.emit(node)"
+        [disabled]="!node.debuggable"
+        matTooltip="Set breakpoint"
+      >
+        <mat-icon> fiber_manual_record </mat-icon>
+      </button>
     } @else if (isClusterNode) {
       <button
         ng-button

diff --git a/devtools/projects/ng-devtools/src/lib/shared/signal-details/signal-details.component.ts b/devtools/projects/ng-devtools/src/lib/shared/signal-details/signal-details.component.ts
@@ -57,6 +57,7 @@ export class SignalDetailsComponent {
   protected readonly element = input.required<ElementPosition>();
 
   protected readonly gotoSource = output<DevtoolsSignalGraphNode>();
+  protected readonly setBreakpoint = output<DevtoolsSignalGraphNode>();
   protected readonly expandCluster = output<string>();
   protected readonly highlightDeps = output<{
     node: DevtoolsSignalGraphNode;

diff --git a/devtools/projects/shell-browser/src/app/chrome-application-operations.ts b/devtools/projects/shell-browser/src/app/chrome-application-operations.ts
@@ -49,6 +49,21 @@ export class ChromeApplicationOperations extends ApplicationOperations {
     this.runInInspectedWindow(inspectSignal, target);
   }
 
+  override setSignalBreakpoint(position: SignalNodePosition, target: Frame): void {
+    const setBreakpoint = `
+      (() => {
+        const fn = inspectedApplication.findSignalNodeByPosition('${JSON.stringify(position)}');
-        const fn = inspectedApplication.findSignalNodeByPosition('${JSON.stringify(position)}');
+  const fn = inspectedApplication.findSignalNodeByPosition('${stringifyAndEscape(position)}');
-        const fn = inspectedApplication.findSignalNodeByPosition('${JSON.stringify(position)}');
+  const fn = inspectedApplication.findSignalNodeByPosition('${stringifyAndEscape(position)}');
+        if (fn) {
+          debug(fn);
+          inspect(fn);
+        } else {
+          console.warn('Could not find signal function to debug');
+        }
+      })()
+    `;
+    this.runInInspectedWindow(setBreakpoint, target);
+  }
+
   override viewSourceFromRouter(name: string, type: string, target: Frame): void {
     const viewSource = `inspect(inspectedApplication.findConstructorByNameForRouter('${name}', '${type}'))`;
     this.runInInspectedWindow(viewSource, target);

diff --git a/devtools/src/demo-application-operations.ts b/devtools/src/demo-application-operations.ts
@@ -36,6 +36,13 @@ export class DemoApplicationOperations extends ApplicationOperations {
     return;
   }
 
+  override setSignalBreakpoint(position: SignalNodePosition): void {
+    console.warn(
+      'setSignalBreakpoint() is not implemented because the demo app runs in an Iframe',
+    );
+    return;
+  }
+
   override viewSourceFromRouter(name: string, type: string): void {
     console.warn(
       'viewSourceFromRouter() is not implemented because the demo app runs in an Iframe',

diff --git a/packages/core/src/render3/util/signal_debug.ts b/packages/core/src/render3/util/signal_debug.ts
@@ -134,6 +134,14 @@ function getNodesAndEdgesFromSignalMap(signalMap: ReadonlyMap<ReactiveNode, Reac
         debuggableFn: consumer.lView?.[CONTEXT]?.constructor as (() => unknown) | undefined,
         id,
       });
+    } else if (isEffectNode(consumer)) {
+      debugSignalGraphNodes.push({
+        label: consumer.debugName,
+        kind: consumer.kind,
+        epoch: consumer.version,
+        debuggableFn: consumer.fn,
+        id,
+      });
     } else {
       debugSignalGraphNodes.push({
         label: consumer.debugName,

diff --git a/packages/core/test/acceptance/signal_debug_spec.ts b/packages/core/test/acceptance/signal_debug_spec.ts
@@ -122,6 +122,8 @@ describe('getSignalGraph', () => {
 
     const effectNode = nodes.find((node) => node.label === 'primitiveSignalEffect')!;
     expect(effectNode).toBeDefined();
+    expect(effectNode.debuggableFn).toBeDefined();
+    expect(typeof effectNode.debuggableFn).toBe('function');
 
     const signalNode = nodes.find((node) => node.label === 'primitiveSignal')!;
     expect(signalNode).toBeDefined();