# Debug display

The debug display is an overlay panel that shows playback diagnostics, such as the current source, quality, buffer health and live latency. It is meant for developers, and is not part of the main Open Video UI bundle.

![Screenshot of the debug display](/pr-912/assets/images/debug-display-b4f846bc4529afba0ae9f84f5cb8943c.png)

## Add it to your player

Import `DebugDisplay` and `DebugButton` from the separate `@theoplayer/react-ui/debug` entry point. This entry point is only available as an ES module.

Pass the `DebugDisplay` to the `overlay` prop of your `DefaultUI` or `THEOliveDefaultUI`. Optionally, add a `DebugButton` to toggle the panel from the control bar.

```jsx
import { DefaultUI } from '@theoplayer/react-ui';
import { DebugButton, DebugDisplay } from '@theoplayer/react-ui/debug';

const App = () => {
    return (
        <DefaultUI
            configuration={{ libraryLocation: '...' }}
            source={{ sources: { src: '...' } }}
            overlay={<DebugDisplay hidden />}
            bottomControlBar={<DebugButton />}
        />
    );
};
```

To inspect a player on any website without changing its code, use the [debug display bookmarklet](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/ui/web/open-video-ui/guides/debug-display.md#bookmarklet).