fix(core): include signal debug names in their toString() representation

JoostK · atscott · commit b401c18674f1 · 2026-03-11T11:28:35.000-07:00
The `toString()` implementations in the primitives package intended to include
the debug name, yet the debug name was evaluated during construction before it
could ever have been assigned. This commit fixes that.

The Angular wrappers override the `toString()` representation to evaluate signals
ad-hoc instead of showing their internal state, and this commit aligns their
behavior to include the debug name in `toString` as well.
diff --git a/packages/core/primitives/signals/src/computed.ts b/packages/core/primitives/signals/src/computed.ts
@@ -14,9 +14,9 @@ import {
   producerUpdateValueVersion,
   REACTIVE_NODE,
   ReactiveNode,
+  runPostProducerCreatedFn,
   setActiveConsumer,
   SIGNAL,
-  runPostProducerCreatedFn,
 } from './graph';
 
 // Required as the signals library is in a separate package, so we need to explicitly ensure the
@@ -83,8 +83,8 @@ export function createComputed<T>(
 
   (computed as ComputedGetter<T>)[SIGNAL] = node;
   if (typeof ngDevMode !== 'undefined' && ngDevMode) {
-    const debugName = node.debugName ? ' (' + node.debugName + ')' : '';
-    computed.toString = () => `[Computed${debugName}: ${String(node.value)}]`;
+    computed.toString = () =>
+      `[Computed${node.debugName ? ' (' + node.debugName + ')' : ''}: ${String(node.value)}]`;
   }
 
   runPostProducerCreatedFn(node);
diff --git a/packages/core/primitives/signals/src/linked_signal.ts b/packages/core/primitives/signals/src/linked_signal.ts
@@ -93,8 +93,8 @@ export function createLinkedSignal<S, D>(
   const getter = linkedSignalGetter as LinkedSignalGetter<S, D>;
   getter[SIGNAL] = node;
   if (typeof ngDevMode !== 'undefined' && ngDevMode) {
-    const debugName = node.debugName ? ' (' + node.debugName + ')' : '';
-    getter.toString = () => `[LinkedSignal${debugName}: ${String(node.value)}]`;
+    getter.toString = () =>
+      `[LinkedSignal${node.debugName ? ' (' + node.debugName + ')' : ''}: ${String(node.value)}]`;
   }
 
   runPostProducerCreatedFn(node);
diff --git a/packages/core/primitives/signals/src/signal.ts b/packages/core/primitives/signals/src/signal.ts
@@ -62,8 +62,8 @@ export function createSignal<T>(
   const getter = (() => signalGetFn(node)) as SignalGetter<T>;
   (getter as any)[SIGNAL] = node;
   if (typeof ngDevMode !== 'undefined' && ngDevMode) {
-    const debugName = node.debugName ? ' (' + node.debugName + ')' : '';
-    getter.toString = () => `[Signal${debugName}: ${String(node.value)}]`;
+    getter.toString = () =>
+      `[Signal${node.debugName ? ' (' + node.debugName + ')' : ''}: ${String(node.value)}]`;
   }
 
   runPostProducerCreatedFn(node);
diff --git a/packages/core/src/render3/reactivity/computed.ts b/packages/core/src/render3/reactivity/computed.ts
@@ -32,9 +32,10 @@ export interface CreateComputedOptions<T> {
 export function computed<T>(computation: () => T, options?: CreateComputedOptions<T>): Signal<T> {
   const getter = createComputed(computation, options?.equal);
 
-  if (ngDevMode) {
-    getter.toString = () => `[Computed: ${getter()}]`;
-    getter[SIGNAL].debugName = options?.debugName;
+  if (typeof ngDevMode !== 'undefined' && ngDevMode) {
+    const debugName = options?.debugName;
+    getter[SIGNAL].debugName = debugName;
+    getter.toString = () => `[Computed${debugName ? ' (' + debugName + ')' : ''}: ${getter()}]`;
   }
 
   return getter;
diff --git a/packages/core/src/render3/reactivity/linked_signal.ts b/packages/core/src/render3/reactivity/linked_signal.ts
@@ -78,9 +78,9 @@ function upgradeLinkedSignalGetter<S, D>(
   getter: LinkedSignalGetter<S, D>,
   debugName?: string,
 ): WritableSignal<D> {
-  if (ngDevMode) {
-    getter.toString = () => `[LinkedSignal: ${getter()}]`;
+  if (typeof ngDevMode !== 'undefined' && ngDevMode) {
     getter[SIGNAL].debugName = debugName;
+    getter.toString = () => `[LinkedSignal${debugName ? ' (' + debugName + ')' : ''}: ${getter()}]`;
   }
 
   const node = getter[SIGNAL] as LinkedSignalNode<S, D>;
diff --git a/packages/core/src/render3/reactivity/signal.ts b/packages/core/src/render3/reactivity/signal.ts
@@ -79,9 +79,10 @@ export function signal<T>(initialValue: T, options?: CreateSignalOptions<T>): Wr
   signalFn.update = update;
   signalFn.asReadonly = signalAsReadonlyFn.bind(signalFn as any) as () => Signal<T>;
 
-  if (ngDevMode) {
-    signalFn.toString = () => `[Signal: ${signalFn()}]`;
-    node.debugName = options?.debugName;
+  if (typeof ngDevMode !== 'undefined' && ngDevMode) {
+    const debugName = options?.debugName;
+    node.debugName = debugName;
+    signalFn.toString = () => `[Signal${debugName ? ' (' + debugName + ')' : ''}: ${signalFn()}]`;
   }
 
   return signalFn as WritableSignal<T>;
diff --git a/packages/core/test/signals/computed_spec.ts b/packages/core/test/signals/computed_spec.ts
@@ -200,6 +200,12 @@ describe('computed', () => {
     expect(double + '').toBe('[Computed: 2]');
   });
 
+  it('should have a toString implementation with debugName', () => {
+    const counter = signal(1);
+    const double = computed(() => counter() * 2, {debugName: 'double'});
+    expect(double + '').toBe('[Computed (double): 2]');
+  });
+
   it('should set debugName when a debugName is provided', () => {
     const primitiveSignal = signal(0);
     const node = computed(() => primitiveSignal(), {debugName: 'computedSignal'})[
diff --git a/packages/core/test/signals/linked_signal_spec.ts b/packages/core/test/signals/linked_signal_spec.ts
@@ -55,7 +55,7 @@ describe('linkedSignal', () => {
     });
 
     expect(choice()).toBe('apple');
-    expect(choice.toString()).toBe('[LinkedSignal: apple]');
+    expect(choice.toString()).toBe('[LinkedSignal (TestChoice): apple]');
   });
 
   it('should update when the source changes', () => {
diff --git a/packages/core/test/signals/signal_spec.ts b/packages/core/test/signals/signal_spec.ts
@@ -133,6 +133,11 @@ describe('signals', () => {
     expect(state + '').toBe('[Signal: false]');
   });
 
+  it('should have a toString implementation with debugName', () => {
+    const state = signal(false, {debugName: 'state'});
+    expect(state + '').toBe('[Signal (state): false]');
+  });
+
   it('should set debugName when a debugName is provided', () => {
     const node = signal(false, {debugName: 'falseSignal'})[SIGNAL] as ReactiveNode;
     expect(node.debugName).toBe('falseSignal');
