Debug the signal graph

The Components tab can display a live signal graph for the selected component or directive. The graph shows how the signals, computeds, effects, and other reactive nodes in that component depend on each other, which makes it easier to understand and debug reactive data flows.

A screenshot of the 'Components' tab in Angular DevTools with the signal graph open for the selected component. The graph shows a signal node connected by edges to three computed nodes which the component's template reads, and the properties of the component are listed in a sidebar to the right.

Open the signal graph

In the Components tab, select a component or directive. In the property pane header, click Show Signal Graph. The signal graph opens next to the component tree.

You can also jump directly to a specific signal: in the properties view, click the signal graph button next to the property, or, when the property has more than one action, open its actions menu and choose Show in signal graph.

The Show Signal Graph button appears automatically when the inspected application supports the signal graph API — there is no setting to enable.

Read the graph

Nodes in the graph represent the reactive nodes that participate in the selected component:

Signal: a writable signal created with signal().
Computed: a derived value created with computed().
Effect: a side effect created with effect() or afterRenderEffect().
Linked signal: a writable signal created with linkedSignal().
Template: the component's template, which reads signals when it renders.
Resource: signals that belong to a resource() or rxResource() are grouped into a collapsible cluster. Click Expand on the cluster node to see the individual nodes inside.

Lines between nodes show reactive dependencies: each node is connected to the producers it reads from (upstream) and the dependants that read it (downstream).

TIP: Nodes are labeled with the debugName of their reactive node. Giving your signals, computeds, and especially effects — which are usually not assigned to a class member — a debugName makes the graph much easier to read:

effect(
  () => {
    // ...
  },
  {debugName: 'name in graph'},
);

Search the graph

Click the search icon in the graph toolbar to find a node by name. Angular DevTools highlights every match and lets you step through them.

Inspect a node

Click a node to open its details panel, which shows the node's current value as an expandable tree and offers the following actions:

View source: navigate to the node's definition in the Sources tab (Chrome) or Debugger tab (Firefox). The action is disabled when the source location is not available.
Set breakpoint: pause execution when the signal updates. Breakpoints are only available in Chromium-based browsers.
Watch signal: log the signal's updates and invalidations to the browser console. Click the action again to stop watching.
Highlight upstream / downstream: trace the paths of the node's dependencies or its dependants.

If the component uses no signals, Angular DevTools shows a "No signals in this component" message instead of the graph.

Version support

The signal graph requires an application built with Angular 19 or later running in development mode.