---
title: "Custom Dev Tools"
slug: "custom-dev-tools"
category: "Widgets"
reactComponent: "ArcWidgetDevTools"
reactTier: "mini"
reactSince: "0.1.0-alpha.5"
reactExample: "dev_tools.tsx"
locale: "es"
hosts: "react"
---

# DevTools en React

Muestra un panel de diagnóstico posicionable libremente. Recopila las marcas de error existentes del editor y muestra valores de debug propios; no es un React Error Boundary.

Referencia para `@arcrider/arcwidgets-react@0.1.0-alpha.5`. [Instalación](/docs/react/intro/setup-react) · [Todos los componentes](/docs/react/intro/react-components).

## Ejemplo completo

```tsx
import { ArcWidgetDevTools } from '@arcrider/arcwidgets-react';
import { useState } from 'react';

const lang = document.documentElement.lang.startsWith('en')
  ? 'en'
  : document.documentElement.lang.startsWith('es')
    ? 'es'
    : 'de';
const t = (de: string, en: string, es: string) =>
  lang === 'en' ? en : lang === 'es' ? es : de;

export default function Example() {
  const [enabled, setEnabled] = useState(true);
  return (
    <>
      <label>
        <input
          type="checkbox"
          checked={enabled}
          onChange={(e) => setEnabled(e.target.checked)}
        />
        {t('Debug anzeigen', 'Show debug', 'Mostrar depuración')}
      </label>
      {enabled && (
        <ArcWidgetDevTools
          data={{
            errorPanel: {
              visible: true,
              maxErrors: 20,
              debug: {
                activeView: 'orders',
              },
              footerButtons: [
                {
                  title: t('Panel schließen', 'Close panel', 'Cerrar panel'),
                  clickable: true,
                },
              ],
            },
          }}
          onFooterClick={() => setEnabled(false)}
        />
      )}
    </>
  );
}
```

## Props del componente

### id

ID opcional y estable de la instancia del widget. Sin especificarlo, React genera un ID.

### data

Configuración de tipo `ArcWidgetDevToolsData`. Pasa los cambios como objetos nuevos; gestiona los datos de negocio y la selección en el estado de React.

### onAction

Fallback opcional `(type: string, ...args: unknown[]) => unknown`. El callback concreto tiene prioridad. Detalles: [Estado y eventos](/docs/react/patterns/react-state-events).

### onFooterClick

Índice de base cero del botón del footer.

```typescript
onFooterClick?: (index: number) => void;
```

## Configuración

Los siguientes campos pertenecen a `data`. Los tamaños se indican como strings, los números y valores de tiempo según su tipo respectivo.

### errorPanel

Textos de mensaje y botones de footer opcionales.

Tipo: `ArcWidgetDevToolsErrorPanel`.

## Comportamiento y límites

- El panel se adjunta al cuerpo del documento. El escaneo de errores necesita un editor CodeMirror correspondiente en el documento. Sin editor no muestra errores de aplicación; `debug` muestra los valores que le pases. Para cerrarlo, el ejemplo elimina el componente del árbol de React.

- Configura `errorPanel` con mensajes y botones de footer opcionales. Solo los botones marcados como `clickable` disparan `onFooterClick`.

- Muestra solo datos de diagnóstico destinados a los usuarios correspondientes. El cierre se implementa en el ejemplo mediante el estado de React.

Los campos `ArcWidgetSlot` admitidos permiten elementos JSX individuales, texto o descriptores de widget. Pasa texto externo como texto JSX; los strings HTML se interpretan como HTML. [Combinar contenidos](/docs/react/patterns/nested-widget-descriptors).

## Tipos de datos

Estos tipos relacionados con el widget se exportan desde el paquete. También están disponibles tipos comunes como `ArcWidgetSlot`, `ArcWidgetStyles` y `ArcReactWidgetProps`. Las firmas de índice permiten extensiones; no garantizan que el widget evalúe campos arbitrarios.

```typescript
export interface ArcWidgetDevToolsErrorPanel {
	visible?: boolean;
	maxErrors?: number;
	debug?: Record<string, unknown>;
	footerButtons?: Array<{ title?: string; clickable?: boolean; [key: string]: unknown }>;
	[key: string]: unknown;
}

export interface ArcWidgetDevToolsData extends ArcWidgetBaseData {
	errorPanel?: ArcWidgetDevToolsErrorPanel;
}

export interface ArcWidgetDevToolsProps extends ArcReactWidgetProps<ArcWidgetDevToolsData> {
	onFooterClick?: (index: number) => void;
}
```