Debug
Visual debugging tools for inspecting Fluid components and understanding responsive layouts.
Getting Started
Click the bug icon in the top navigation bar to open the debug toolbar and enable inspection modes.
Debug Modes
Three modes help you inspect different aspects of your layout:Scopes
Shows debug overlays on scoped containers (components with scope prop). Displays container dimensions and current breakpoint state (narrow/mid/wide). Each scope establishes its own container query context for responsive children.Hover
Shows debug overlay on any Fluid component under the mouse cursor. Displays component name and dimensions. Useful for understanding component boundaries and debugging layout issues.Hover over me
Or me
Tagged
Shows debug overlays on components with the debug prop. Useful for marking specific components you want to continuously monitor.debug={true}
debug='custom info'
Nested Scopes
Scopes can be nested. Each scope establishes its own container query boundary, so inner components respond to their immediate scope's width rather than the outer one. Enable Scopes mode to see all scope boundaries.Outer scope='spacious'
Inner scope='compact'Narrower breakpoints
Inner scope='tight'Tightest breakpoints
Setup
Wrap your app with FluidDebugProvider to enable debug tools:<FluidDebugProvider>
<App />
</FluidDebugProvider>
Programmatic Control
Access debug state and controls with the useFluidDebug hook:const debug = useFluidDebug();
// Toggle modes
debug.toggleMode('scopes');
debug.toggleMode('hover');
debug.toggleMode('tagged');
// Set mode directly
debug.setMode('hover', true);
// Check current state
if (debug.modes.scopes) { ... }