Feature request: Symbol-based mechanism for custom property replacement (debug.properties / debug.browsable)

[hediet]

Summary

Symbol.for("debug.description") provides a great mechanism for customizing object descriptions. However, there doesn't appear to be an equivalent mechanism for custom property replacements. When debugging observables or similar complex objects, the debugger displays many internal/implementation fields that aren't useful for debugging purposes.

Current state

From what I can see in the codebase:

• ✅ Symbol.for("debug.description") works great for description text
• ✅ Symbol.for("nodejs.util.inspect.custom") is also supported
• ⚠️ customPropertiesGenerator exists but is marked deprecated
• ❌ No symbol-based mechanism for property filtering/replacement

Use case

For observables and other complex state management objects, the default property display shows internal implementation details that aren't useful for debugging:

// Current behavior when hovering:
observable = {
  _observers: Set(3),
  _value: "actual value",
  _scheduler: {...},
  _isDisposed: false,
  _derivedFrom: [...],
  // ... many more internal fields
}

// Desired behavior:
observable = {
  value: "actual value",
  subscriberCount: 3
}

Proposal

Building on the original proposal in microsoft/vscode#102181, it would be valuable to add support for additional symbols:

class Observable {
  // Already working - description text
  [Symbol.for('debug.description')]() {
    return `Observable(${this._value})`;
  }

  // Proposed - return replacement object for property display
  [Symbol.for('debug.properties')]() {
    return {
      value: this._value,
      subscriberCount: this._observers.size
    };
  }

  // Alternative approach - control property visibility
  [Symbol.for('debug.browsable')]() {
    return {
      _observers: false,  // hide
      _scheduler: false,  // hide
      _value: 'value',    // rename to 'value'
    };
  }
}

This would allow library authors to provide better debugging experiences without requiring users to configure customPropertiesGenerator in their launch.json.

Related issues

• Consider adding a mechanism akin to .NET's 'DebuggerTypeProxyAttribute' for JS/TS debugging vscode#102181 - Original proposal mentioning debug.typeProxy and debug.browsable
• Extensible customDescriptionGenerator by default #1773 - Related request about extensible customDescriptionGenerator

[hediet]

If debug.properties are used, there should still be an escape hatch to really debug the underlying object (for example by always having the collapsed (but unfoldable) property "...": originalValue). Also, there should be some indication that the properties are "virtual", that could be this property - maybe in a different font or with an icon.