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

JoostK · atscott · commit 21b1c3b2ee2c · 2026-03-11T18:28:39.000Z
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. (cherry picked from commit b401c18)
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');
