# debug

> Outlines the host in red during development and resolves to an empty style tree elsewhere, so the call is safe to leave in committed code.

```ts
import { debug } from "@sdxc/u/a11y";
```

Outlines the host in red during development and resolves to an empty style
tree elsewhere, so the call is safe to leave in committed code. `false` turns
it off from a flag; `"nested"` outlines every descendant to inspect a box model.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.debug()` | `css({ outline: "2px solid red", outlineOffset: "-2px" })` |
| `u.debug("nested")` | `css({ outline: "2px solid red", outlineOffset: "-2px", "& *": { outline: "2px solid red", outlineOffset: "-2px" }, })` |

## Examples

### Basic example

Use `debug()` to outline an element in red while you develop. A production build drops the outline, so the call is safe to leave in; this page is one, so the example shows what development draws:

```tsx
<div mix={[debug(), ...]}>debug()</div>
```

### Outlining descendants

Pass `nested` to outline every descendant as well, to see how each box of a layout sits, shown here as a development build draws it:

```tsx
<div mix={[debug("nested"), ...]}>
	<div mix={[...]}>One</div>
	<div mix={[...]}>Two</div>
	<div mix={[...]}>Three</div>
</div>
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.debug())
```

## Responsive design

Wrap the call in a container query to scope it to one width.

```ts
u.at("md", u.debug())
```

## Signature

```ts
u.debug(mode?: boolean | "nested")
```