Skip to content

feat(devtools): implement persistent breakpoints on signal consumers using CDP#69860

Draft
eduhmc wants to merge 2 commits into
angular:mainfrom
eduhmc:add-signal-consumer-breakpoints-cdp
Draft

feat(devtools): implement persistent breakpoints on signal consumers using CDP#69860
eduhmc wants to merge 2 commits into
angular:mainfrom
eduhmc:add-signal-consumer-breakpoints-cdp

Conversation

@eduhmc

@eduhmc eduhmc commented Jul 20, 2026

Copy link
Copy Markdown
Contributor

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

  • Exposes debuggableFn for effects in packages/core/src/render3/util/signal_debug.ts.
  • Adds debugger permission to manifest.chrome.json and manifest.firefox.json.
  • Implements CDP breakpoint orchestration (attachDebugger, setBreakpointByUrl, removeBreakpoint) in background.ts.
  • Adds UI breakpoint toggle with label icon and state persistence in SignalDetailsComponent & SignalGraphPaneComponent.

@eduhmc
eduhmc marked this pull request as ready for review July 20, 2026 22:46
@pullapprove
pullapprove Bot requested a review from atscott July 20, 2026 22:46
@angular-robot angular-robot Bot added detected: feature PR contains a feature commit area: core Issues related to the framework runtime area: devtools labels Jul 20, 2026
@ngbot ngbot Bot added this to the Backlog milestone Jul 20, 2026
@eduhmc
eduhmc marked this pull request as draft July 20, 2026 22:46
@eduhmc
eduhmc removed the request for review from atscott July 20, 2026 22:46
@eduhmc
eduhmc force-pushed the add-signal-consumer-breakpoints-cdp branch from f4413d0 to e12e69f Compare July 20, 2026 23:01
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.
@eduhmc
eduhmc force-pushed the add-signal-consumer-breakpoints-cdp branch from e12e69f to 8c1e946 Compare July 20, 2026 23:08
…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.
@eduhmc
eduhmc force-pushed the add-signal-consumer-breakpoints-cdp branch from 8c1e946 to 41b55c2 Compare July 20, 2026 23:12
@eduhmc
eduhmc requested a review from csmick July 20, 2026 23:21
@eduhmc
eduhmc marked this pull request as ready for review July 20, 2026 23:21
@pullapprove
pullapprove Bot requested a review from atscott July 20, 2026 23:21
@eduhmc
eduhmc removed the request for review from atscott July 20, 2026 23:26
@pullapprove
pullapprove Bot requested a review from atscott July 20, 2026 23:26
@eduhmc
eduhmc removed the request for review from atscott July 20, 2026 23:28
@pullapprove
pullapprove Bot requested a review from atscott July 20, 2026 23:28
@eduhmc
eduhmc marked this pull request as draft July 20, 2026 23:31
@eduhmc
eduhmc removed the request for review from atscott July 20, 2026 23:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area: core Issues related to the framework runtime area: devtools detected: feature PR contains a feature commit

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant