DevTools

DevTools

useCommandDevtools() exposes the command machine state to browser developer tools for debugging.

Usage

import { Command, useCommandDevtools } from 'modern-cmdk/react';

function MyCommand() {
  useCommandDevtools('main-palette');

  return (
    <Command>
      <Command.Input />
      <Command.List>
        <Command.Item>Action</Command.Item>
      </Command.List>
    </Command>
  );
}

How It Works

In development (__DEV__), the hook:

1. Stores the machine state snapshot in globalThis.__CRIMSON_COMMAND_DEVTOOLS__ (a Map<string, object>)
2. Dispatches crimson-command-devtools CustomEvent on every state change

Browser Console

// Read all active command palettes
globalThis.__CRIMSON_COMMAND_DEVTOOLS__

// Listen for state changes
window.addEventListener('crimson-command-devtools', (e) => {
  console.log(e.detail);
});

Production

The hook is a no-op in production builds. The __DEV__ guard ensures zero overhead.