[XState] Enable XState inspector conditionally

[tonyghiani]

📓 Summary

This PR addresses the issue of noisy XState console logging in development mode by introducing runtime toggling functionality. Previously, the XState inspector logged all state machine events directly to the console, which interfered with debugging other application features.

Screen.Recording.2025-10-03.at.17.23.06.mov

🎯 Problem

As discussed in the team thread, the XState console inspector was always active in dev mode, causing excessive console noise. The original implementation used:

const log = console.info.bind(console);

This meant all XState state machine events, transitions, and snapshots were logged unconditionally, making it difficult for developers to debug non-XState-related issues when the console was cluttered with state machine information.

Context from discussion:

• XState v5 no longer supports the Redux DevTools extension, requiring a custom observable inspector
• The console inspector was created as a replacement, but lacked conditional control
• Developers needed a way to enable/disable logging without code changes
• Browser-side toggling was preferred over environment variables (which are harder to forward to the browser)

🔧 Solution & Usage

To enable XState logging:

1. Open your browser's DevTools console
2. Run: toggleXstateInspector()
3. You'll see: ℹ️ XState inspector enabled
4. All XState events will now be logged to the console

To disable XState logging:

1. Run toggleXstateInspector() again
2. You'll see: ℹ️ XState inspector disabled
3. Console logging stops immediately

On page load:

• You'll see a one-time help message: ℹ️ To toggle the XState inspector, for advanced debugging, run toggleXstateInspector() on your browser console.
• XState logging is disabled by default
• The console remains clean unless you explicitly enable it

💡 Technical Notes

• Opt-in by default: Logging is disabled on initialization, keeping the console clean
• Dev mode only: The inspector is only available when isDevMode() returns true
• Persistence: The toggle state is persisted across page reloads
• No code changes needed: Developers can enable/disable logging at runtime without modifying source code or rebuilding

[elasticmachine]

Pinging @elastic/obs-ux-logs-team (Team:obs-ux-logs)

[elasticmachine]

💔 Build Failed

• Buildkite Build
• Commit: 9ffc7bd

Failed CI Steps