From 04d00f4459748246ed79922d9623d5238be28c45 Mon Sep 17 00:00:00 2001
From: Edu <eduhmc@users.noreply.github.com>
Date: Mon, 20 Jul 2026 23:07:57 +0000
Subject: [PATCH 1/2] feat(core): expose debuggableFn for effects in signal
 debug graph

Exposes the internal fn reference of effect reactive nodes on DebugSignalGraphNode as debuggableFn. This allows Angular DevTools to inspect and set breakpoints on effect callbacks.
---
 packages/core/src/render3/util/signal_debug.ts     | 8 ++++++++
 packages/core/test/acceptance/signal_debug_spec.ts | 2 ++
 2 files changed, 10 insertions(+)

diff --git a/packages/core/src/render3/util/signal_debug.ts b/packages/core/src/render3/util/signal_debug.ts
index ffab39a19402..cf08c44d27be 100644
--- a/packages/core/src/render3/util/signal_debug.ts
+++ b/packages/core/src/render3/util/signal_debug.ts
@@ -104,6 +104,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
index b310cf0365fe..b4ae8b773bb1 100644
--- a/packages/core/test/acceptance/signal_debug_spec.ts
+++ b/packages/core/test/acceptance/signal_debug_spec.ts
@@ -119,6 +119,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();

From 41b55c20b489bb16fd105e44d566f7143ad7d4b6 Mon Sep 17 00:00:00 2001
From: Edu <eduhmc@users.noreply.github.com>
Date: Mon, 20 Jul 2026 23:07:58 +0000
Subject: [PATCH 2/2] feat(devtools): implement persistent breakpoints on
 signal consumers using CDP

Implements persistent breakpoints for Angular signal consumers (computeds and effects) in Angular DevTools using Chrome DevTools Protocol (CDP).

- Adds debugger permission to Chrome and Firefox extension manifests.
- Implements CDP breakpoint orchestration in background script.
- Updates SignalDetailsComponent and SignalGraphPaneComponent with label icon toggle and persistent state sync across reloads.
---
 .../src/lib/application-operations/index.ts   |   3 +
 .../test-utils/app_operations_mock.ts         |  12 ++
 .../signal-graph-pane.component.html          |   3 +
 .../signal-graph-pane.component.ts            |  64 +++++++
 .../signal-details.component.html             |  11 ++
 .../signal-details.component.ts               |   3 +
 .../shell-browser/src/app/background.ts       | 179 ++++++++++++++++++
 .../src/app/chrome-application-operations.ts  |  51 +++++
 .../src/manifest/manifest.chrome.json         |   2 +-
 .../src/manifest/manifest.firefox.json        |   2 +-
 devtools/src/demo-application-operations.ts   |  16 ++
 11 files changed, 344 insertions(+), 2 deletions(-)

diff --git a/devtools/projects/ng-devtools/src/lib/application-operations/index.ts b/devtools/projects/ng-devtools/src/lib/application-operations/index.ts
index ae00f791819f..b8820e840e96 100644
--- 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,9 @@ 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 removeSignalBreakpoint(position: SignalNodePosition, target: Frame): void;
+  abstract getActiveSignalBreakpoints(target: Frame): Promise<SignalNodePosition[]>;
   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/devtools/projects/ng-devtools/src/lib/application-services/test-utils/app_operations_mock.ts b/devtools/projects/ng-devtools/src/lib/application-services/test-utils/app_operations_mock.ts
index 7e3aff5a4550..937231a55472 100644
--- a/devtools/projects/ng-devtools/src/lib/application-services/test-utils/app_operations_mock.ts
+++ b/devtools/projects/ng-devtools/src/lib/application-services/test-utils/app_operations_mock.ts
@@ -58,6 +58,18 @@ export class AppOperationsMock extends ApplicationOperations {
     throw new Error('Method not implemented.');
   }
 
+  override setSignalBreakpoint(position: SignalNodePosition, target: Frame): void {
+    throw new Error('Method not implemented.');
+  }
+
+  override removeSignalBreakpoint(position: SignalNodePosition, target: Frame): void {
+    throw new Error('Method not implemented.');
+  }
+
+  override getActiveSignalBreakpoints(target: Frame): Promise<SignalNodePosition[]> {
+    return Promise.resolve([]);
+  }
+
   override viewSourceFromRouter(name: string, type: string, target: Frame): void {
     throw new Error('Method not implemented.');
   }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signal-graph-pane/signal-graph-pane.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signal-graph-pane/signal-graph-pane.component.html
index 445b9ed22e90..2f3affe1bbf0 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signal-graph-pane/signal-graph-pane.component.html
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signal-graph-pane/signal-graph-pane.component.html
@@ -15,7 +15,10 @@
     [node]="node"
     [graph]="signalGraph.graph()!"
     [element]="signalGraph.element()!"
+    [hasBreakpoint]="hasBreakpoint(node)"
     (gotoSource)="gotoSource($event)"
+    (setBreakpoint)="setBreakpoint($event)"
+    (removeBreakpoint)="removeBreakpoint($event)"
     (expandCluster)="expandCluster($event)"
     (highlightDeps)="highlightDeps($event)"
     (close)="detailsVisible.set(false)"
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signal-graph-pane/signal-graph-pane.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signal-graph-pane/signal-graph-pane.component.ts
index 87673a31e5cf..944c7f99682d 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signal-graph-pane/signal-graph-pane.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/signal-graph-pane/signal-graph-pane.component.ts
@@ -9,6 +9,7 @@
 import {
   Component,
   computed,
+  effect,
   inject,
   input,
   linkedSignal,
@@ -45,6 +46,25 @@ export class SignalGraphPaneComponent {
   private readonly appOperations = inject(ApplicationOperations);
   private readonly frameManager = inject(FrameManager);
 
+  constructor() {
+    effect(() => {
+      const element = this.signalGraph.element();
+      const graph = this.signalGraph.graph();
+      if (element && graph) {
+        const frame = this.frameManager.selectedFrame();
+        this.appOperations.getActiveSignalBreakpoints(frame!).then((positions) => {
+          const activeIds = new Set<string>();
+          for (const pos of positions) {
+            if (JSON.stringify(pos.element) === JSON.stringify(element)) {
+              activeIds.add(pos.signalId);
+            }
+          }
+          this.activeBreakpoints.set(activeIds);
+        });
+      }
+    });
+  }
+
   protected readonly close = output<void>();
 
   // Source for selected node ID.
@@ -86,6 +106,18 @@ export class SignalGraphPaneComponent {
 
   protected readonly detailsVisible = signal(false);
 
+  // Track active breakpoints for the current inspected element.
+  // Resets when the inspected element changes.
+  protected readonly activeBreakpoints = linkedSignal<ElementPosition | undefined, Set<string>>({
+    source: () => this.signalGraph.element(),
+    computation: () => new Set(),
+  });
+
+  protected hasBreakpoint(node: DevtoolsSignalGraphNode | undefined): boolean {
+    if (!node) return false;
+    return this.activeBreakpoints().has(node.id);
+  }
+
   protected empty = computed(() => !(this.signalGraph.graph()?.nodes.length! > 0));
 
   onNodeClick(node: DevtoolsSignalGraphNode) {
@@ -104,6 +136,38 @@ export class SignalGraphPaneComponent {
     );
   }
 
+  setBreakpoint(node: DevtoolsSignalGraphNode) {
+    const frame = this.frameManager.selectedFrame();
+    this.appOperations.setSignalBreakpoint(
+      {
+        element: this.signalGraph.element()!,
+        signalId: node.id,
+      },
+      frame!,
+    );
+    this.activeBreakpoints.update((set) => {
+      const newSet = new Set(set);
+      newSet.add(node.id);
+      return newSet;
+    });
+  }
+
+  removeBreakpoint(node: DevtoolsSignalGraphNode) {
+    const frame = this.frameManager.selectedFrame();
+    this.appOperations.removeSignalBreakpoint(
+      {
+        element: this.signalGraph.element()!,
+        signalId: node.id,
+      },
+      frame!,
+    );
+    this.activeBreakpoints.update((set) => {
+      const newSet = new Set(set);
+      newSet.delete(node.id);
+      return newSet;
+    });
+  }
+
   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
index fb6e55b44e7e..4e7ad7821e2b 100644
--- 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)="hasBreakpoint() ? removeBreakpoint.emit(node) : setBreakpoint.emit(node)"
+        [disabled]="!node.debuggable"
+        [matTooltip]="hasBreakpoint() ? 'Remove breakpoint' : 'Set breakpoint'"
+      >
+        <mat-icon [style.color]="hasBreakpoint() ? '#1a73e8' : 'inherit'"> label </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
index 6658316c876a..ebcc14aa248b 100644
--- 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,9 @@ export class SignalDetailsComponent {
   protected readonly element = input.required<ElementPosition>();
 
   protected readonly gotoSource = output<DevtoolsSignalGraphNode>();
+  protected readonly setBreakpoint = output<DevtoolsSignalGraphNode>();
+  protected readonly removeBreakpoint = output<DevtoolsSignalGraphNode>();
+  protected readonly hasBreakpoint = input<boolean>(false);
   protected readonly expandCluster = output<string>();
   protected readonly highlightDeps = output<{
     node: DevtoolsSignalGraphNode;
diff --git a/devtools/projects/shell-browser/src/app/background.ts b/devtools/projects/shell-browser/src/app/background.ts
index 84a566761b8e..7ae75f4d5cb4 100644
--- a/devtools/projects/shell-browser/src/app/background.ts
+++ b/devtools/projects/shell-browser/src/app/background.ts
@@ -81,4 +81,183 @@ if (chrome !== undefined && chrome.runtime !== undefined) {
 
   const tabs = {};
   TabManager.initialize(tabs);
+
+  const scriptMap = new Map<string, string>();
+
+  chrome.debugger.onEvent.addListener((source, method, params) => {
+    if (method === 'Debugger.scriptParsed' && params) {
+      const {scriptId, url} = params as any;
+      scriptMap.set(scriptId, url);
+    }
+  });
+
+  const activeBreakpoints = new Map<number, Map<string, string>>();
+
+  function serializePosition(position: any): string {
+    return JSON.stringify({
+      element: position.element,
+      signalId: position.signalId,
+    });
+  }
+
+  chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+    if (message.action === 'setSignalBreakpoint') {
+      const {tabId, position} = message;
+      setBreakpointViaCDP(tabId, position)
+        .then((result) => sendResponse({success: true, result}))
+        .catch((err) => {
+          console.error('CDP Error:', err);
+          sendResponse({success: false, error: err.message || err});
+        });
+      return true; // Keep channel open
+    } else if (message.action === 'removeSignalBreakpoint') {
+      const {tabId, position} = message;
+      removeBreakpointViaCDP(tabId, position)
+        .then((result) => sendResponse({success: true, result}))
+        .catch((err) => {
+          console.error('CDP Error:', err);
+          sendResponse({success: false, error: err.message || err});
+        });
+      return true; // Keep channel open
+    } else if (message.action === 'getActiveSignalBreakpoints') {
+      const {tabId} = message;
+      const tabBreakpoints = activeBreakpoints.get(tabId);
+      const activePositions: any[] = [];
+      if (tabBreakpoints) {
+        for (const posKey of tabBreakpoints.keys()) {
+          try {
+            activePositions.push(JSON.parse(posKey));
+          } catch {}
+        }
+      }
+      sendResponse({success: true, activePositions});
+      return true;
+    }
+    return false;
+  });
+
+  function attachDebugger(target: chrome.debugger.Debuggee, version: string): Promise<void> {
+    return new Promise((resolve, reject) => {
+      chrome.debugger.attach(target, version, () => {
+        if (chrome.runtime.lastError) {
+          reject(chrome.runtime.lastError);
+        } else {
+          resolve();
+        }
+      });
+    });
+  }
+
+  function sendDebuggerCommand(
+    target: chrome.debugger.Debuggee,
+    method: string,
+    commandParams?: {[key: string]: any},
+  ): Promise<any> {
+    return new Promise((resolve, reject) => {
+      chrome.debugger.sendCommand(target, method, commandParams, (result) => {
+        if (chrome.runtime.lastError) {
+          reject(chrome.runtime.lastError);
+        } else {
+          resolve(result);
+        }
+      });
+    });
+  }
+
+  async function setBreakpointViaCDP(tabId: number, position: any) {
+    const target = {tabId};
+
+    try {
+      await attachDebugger(target, '1.3');
+    } catch (err: any) {
+      const msg = err.message ? String(err.message).toLowerCase() : '';
+      if (!msg.includes('already attached')) {
+        throw err;
+      }
+    }
+
+    await sendDebuggerCommand(target, 'Debugger.enable');
+
+    const expression = `inspectedApplication.findSignalNodeByPosition('${JSON.stringify(position)}')`;
+    const evalResult = await sendDebuggerCommand(target, 'Runtime.evaluate', {
+      expression,
+      objectGroup: 'angular-devtools',
+    });
+
+    if (evalResult.exceptionDetails) {
+      throw new Error('Evaluation failed: ' + evalResult.exceptionDetails.exception.description);
+    }
+
+    const objectId = evalResult.result.objectId;
+    if (!objectId) {
+      throw new Error('Could not find function object');
+    }
+
+    const propsResult = await sendDebuggerCommand(target, 'Runtime.getProperties', {
+      objectId,
+    });
+
+    const internalProps = propsResult.internalProperties || [];
+    const locationProp = internalProps.find((p: any) => p.name === '[[FunctionLocation]]');
+
+    if (!locationProp || !locationProp.value || !locationProp.value.value) {
+      throw new Error('Could not find [[FunctionLocation]]');
+    }
+
+    const {scriptId, lineNumber, columnNumber} = locationProp.value.value;
+
+    let bpResult;
+    let url = scriptMap.get(scriptId);
+    if (!url) {
+      await new Promise((resolve) => setTimeout(resolve, 150));
+      url = scriptMap.get(scriptId);
+    }
+
+    if (!url) {
+      console.warn('Could not find URL for scriptId:', scriptId, 'falling back to scriptId');
+      bpResult = await sendDebuggerCommand(target, 'Debugger.setBreakpoint', {
+        location: {scriptId, lineNumber, columnNumber},
+      });
+    } else {
+      bpResult = await sendDebuggerCommand(target, 'Debugger.setBreakpointByUrl', {
+        url,
+        lineNumber,
+        columnNumber,
+      });
+    }
+
+    const breakpointId = bpResult.breakpointId;
+
+    if (bpResult && bpResult.breakpointId) {
+      if (!activeBreakpoints.has(tabId)) {
+        activeBreakpoints.set(tabId, new Map());
+      }
+      const posKey = serializePosition(position);
+      activeBreakpoints.get(tabId)!.set(posKey, bpResult.breakpointId);
+    }
+
+    return bpResult;
+  }
+
+  async function removeBreakpointViaCDP(tabId: number, position: any) {
+    const target = {tabId};
+    const tabBps = activeBreakpoints.get(tabId);
+    if (!tabBps) {
+      throw new Error('No active breakpoints for this tab');
+    }
+    const posKey = serializePosition(position);
+    const breakpointId = tabBps.get(posKey);
+    if (!breakpointId) {
+      throw new Error('No active breakpoint found for this signal');
+    }
+
+    await sendDebuggerCommand(target, 'Debugger.removeBreakpoint', {
+      breakpointId,
+    });
+
+    tabBps.delete(posKey);
+    if (tabBps.size === 0) {
+      activeBreakpoints.delete(tabId);
+    }
+  }
 }
diff --git a/devtools/projects/shell-browser/src/app/chrome-application-operations.ts b/devtools/projects/shell-browser/src/app/chrome-application-operations.ts
index beddb0785982..d107c65727d2 100644
--- 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,57 @@ export class ChromeApplicationOperations extends ApplicationOperations {
     this.runInInspectedWindow(inspectSignal, target);
   }
 
+  override setSignalBreakpoint(position: SignalNodePosition, target: Frame): void {
+    const tabId = chrome.devtools.inspectedWindow.tabId;
+    chrome.runtime.sendMessage(
+      {
+        action: 'setSignalBreakpoint',
+        tabId,
+        position,
+      },
+      (response) => {
+        if (!response || !response.success) {
+          console.error('Failed to set breakpoint via CDP:', response?.error);
+        }
+      },
+    );
+  }
+
+  override removeSignalBreakpoint(position: SignalNodePosition, target: Frame): void {
+    const tabId = chrome.devtools.inspectedWindow.tabId;
+    chrome.runtime.sendMessage(
+      {
+        action: 'removeSignalBreakpoint',
+        tabId,
+        position,
+      },
+      (response) => {
+        if (!response || !response.success) {
+          console.error('Failed to remove breakpoint via CDP:', response?.error);
+        }
+      },
+    );
+  }
+
+  override getActiveSignalBreakpoints(target: Frame): Promise<SignalNodePosition[]> {
+    const tabId = chrome.devtools.inspectedWindow.tabId;
+    return new Promise((resolve) => {
+      chrome.runtime.sendMessage(
+        {
+          action: 'getActiveSignalBreakpoints',
+          tabId,
+        },
+        (response) => {
+          if (response && response.success && response.activePositions) {
+            resolve(response.activePositions);
+          } else {
+            resolve([]);
+          }
+        },
+      );
+    });
+  }
+
   override viewSourceFromRouter(name: string, type: string, target: Frame): void {
     const viewSource = `inspect(inspectedApplication.findConstructorByNameForRouter(${JSON.stringify(name)}, ${JSON.stringify(type)}))`;
     this.runInInspectedWindow(viewSource, target);
diff --git a/devtools/projects/shell-browser/src/manifest/manifest.chrome.json b/devtools/projects/shell-browser/src/manifest/manifest.chrome.json
index 193f0bfb0efb..ce50f967ee49 100644
--- a/devtools/projects/shell-browser/src/manifest/manifest.chrome.json
+++ b/devtools/projects/shell-browser/src/manifest/manifest.chrome.json
@@ -33,7 +33,7 @@
   "background": {
     "service_worker": "app/background_bundle.js"
   },
-  "permissions": ["scripting", "activeTab", "storage"],
+  "permissions": ["scripting", "activeTab", "storage", "debugger"],
   "host_permissions": ["<all_urls>"],
   "content_scripts": [
     {
diff --git a/devtools/projects/shell-browser/src/manifest/manifest.firefox.json b/devtools/projects/shell-browser/src/manifest/manifest.firefox.json
index 960486595b37..8a33e31c2e5b 100644
--- a/devtools/projects/shell-browser/src/manifest/manifest.firefox.json
+++ b/devtools/projects/shell-browser/src/manifest/manifest.firefox.json
@@ -18,7 +18,7 @@
   "background": {
     "scripts": ["app/background_bundle.js"]
   },
-  "permissions": ["activeTab", "storage", "http://*/*", "https://*/*", "file:///*"],
+  "permissions": ["activeTab", "storage", "http://*/*", "https://*/*", "file:///*", "debugger"],
   "content_scripts": [
     {
       "matches": ["<all_urls>"],
diff --git a/devtools/src/demo-application-operations.ts b/devtools/src/demo-application-operations.ts
index 9b70739b29e3..889d58a95cba 100644
--- a/devtools/src/demo-application-operations.ts
+++ b/devtools/src/demo-application-operations.ts
@@ -36,6 +36,22 @@ 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 removeSignalBreakpoint(position: SignalNodePosition): void {
+    console.warn(
+      'removeSignalBreakpoint() is not implemented because the demo app runs in an Iframe',
+    );
+    return;
+  }
+
+  override getActiveSignalBreakpoints(): Promise<SignalNodePosition[]> {
+    return Promise.resolve([]);
+  }
+
   override viewSourceFromRouter(name: string, type: string): void {
     console.warn(
       'viewSourceFromRouter() is not implemented because the demo app runs in an Iframe',