> ## Documentation Index
> Fetch the complete documentation index at: https://dndkit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Debug

> Visualize drag and drop operations for debugging.

export const Story = ({id, framework = "react", width = "100%", height = "250", hero = false}) => {
  const BRANCH = 'experimental';
  const STORYBOOKS = {
    react: {
      localPort: 6006,
      productionHost: '5fc05e08a4a65d0021ae0bf2'
    },
    vue: {
      localPort: 6008,
      productionHost: '6989440ed560d70abcd6bcc7'
    },
    vanilla: {
      localPort: 6007,
      productionHost: '69892d294eb9040f0d29aa81'
    },
    solid: {
      localPort: 6009,
      productionHost: '698944444eb9040f0d2a0217'
    },
    svelte: {
      localPort: 6010,
      productionHost: '69910d2a631cb57638616dcd'
    }
  };
  const config = STORYBOOKS[framework] ?? STORYBOOKS.react;
  const isDev = import.meta.env.DEV;
  const host = isDev ? `//localhost:${config.localPort}` : `https://${BRANCH}--${config.productionHost}.chromatic.com`;
  return <Frame>
      <iframe src={`${host}/iframe.html?args=&id=${id}&viewMode=story&hero=${hero}`} width={width} height={height} />
    </Frame>;
};

## Overview

The `Debug` plugin renders visual overlays that help you understand what's happening during drag and drop operations. It displays the shapes of draggable and droppable elements, highlights collision targets, and shows the current pointer position.

This plugin is **not** included by default — add it during development to help debug layout, collision, and positioning issues.

## Usage

<CodeGroup>
  ```ts TypeScript theme={null}
  import {DragDropManager} from '@dnd-kit/dom';
  import {Debug} from '@dnd-kit/dom/plugins/debug';

  const manager = new DragDropManager({
    plugins: (defaults) => [...defaults, Debug],
  });
  ```

  ```tsx React theme={null}
  import {DragDropProvider} from '@dnd-kit/react';
  import {Debug} from '@dnd-kit/dom/plugins/debug';

  function App() {
    return (
      <DragDropProvider
        plugins={(defaults) => [Debug, ...defaults]}
      >
        {/* ... */}
      </DragDropProvider>
    );
  }
  ```

  ```vue Vue theme={null}
  <script setup>
  import {DragDropProvider} from '@dnd-kit/vue';
  import {Debug} from '@dnd-kit/dom/plugins/debug';
  </script>

  <template>
    <DragDropProvider
      :plugins="(defaults) => [Debug, ...defaults]"
    >
      <!-- ... -->
    </DragDropProvider>
  </template>
  ```

  ```svelte Svelte theme={null}
  <script>
    import {DragDropProvider} from '@dnd-kit/svelte';
    import {Debug} from '@dnd-kit/dom/plugins/debug';
  </script>

  <DragDropProvider
    plugins={(defaults) => [Debug, ...defaults]}
  >
    <!-- ... -->
  </DragDropProvider>
  ```

  ```tsx Solid theme={null}
  import {DragDropProvider} from '@dnd-kit/solid';
  import {Debug} from '@dnd-kit/dom/plugins/debug';

  function App() {
    return (
      <DragDropProvider
        plugins={(defaults) => [Debug, ...defaults]}
      >
        {/* ... */}
      </DragDropProvider>
    );
  }
  ```
</CodeGroup>

<Warning>
  The `Debug` plugin is intended for development only. Remove it before shipping to production.
</Warning>

## Example

<Story id="react-sortable-vertical-list--debug" height="320" />

## What It Shows

* **Draggable shape** (blue overlay): The computed bounding rectangle of the element being dragged.
* **Droppable zones** (gray overlays): The bounding rectangles of all registered droppable elements.
* **Drop target** (green overlay): The current drop target.
* **Top collisions** (yellow overlays): The next closest collision candidates.
* **Pointer crosshair**: The current pointer position tracked by the drag operation.