---
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: "vue"
---

# Custom Dev Tools

## AI Defaults (read first)

- **uniqueId**: Required, e.g. `"dev-tools-" + Nr`.
- **errorPanel.visible**: Only show when `isAdminMode()` – Dev-Tools sind für Entwickler gedacht.
- **errorPanel.footerButtons**: Nutze `type: "update"` für Feld-Updates, `type: "customJS"` nur für spezielle UI-Aktionen. Core emits `footer_click` (index); Ninox runs `actions`. React: `onFooterClick(index)` / `onAction`. Set `clickable: true` on React hosts.

# Custom Dev Tools

Widget auxiliar de desarrollo para Ninox con estructura de secciones ampliable. Primera sección: **Error Panel** con lista de errores de CodeMirror, salida de debug y botones de footer opcionales.

## Código de aplicación

```javascript
if isAdminMode() then
  arcCustomDevTools({
    uniqueId: "dev-tools-" + Nr,
    errorPanel: {
      visible: true,
      maxErrors: 50,
      debug: {
        activeTab: activeTab,
        filter: filterStatus,
        selectedRecord: selectedRecord
      },
      footerButtons: [
        {
          title: "State zurücksetzen",
          actions: [{
            type: "update",
            recordId: Nr,
            field: fieldId(Nr, "helper_mainContentState"),
            value: ""
          }]
        }
      ]
    }
  })
end
```

## Parámetros

| Parameter | Typ | Beschreibung |
|----------|-----|--------------|
| `uniqueId` | string | Obligatorio, ID único |
| `errorPanel` | object | Configuración del panel de errores |
| `errorPanel.visible` | boolean | Panel de errores activado/desactivado |
| `errorPanel.maxErrors` | number | Número máx. de errores mostrados (Default: 50) |
| `errorPanel.debug` | object | Variables de debug (key: value), p. ej. `{ activeTab: activeTab, filter: filterStatus }` |
| `errorPanel.footerButtons` | array | Botones personalizados en el footer, ver abajo |

### errorPanel.footerButtons

Array de objetos de botón con:

| Eigenschaft | Typ | Beschreibung |
|-------------|-----|--------------|
| `title` | string | Etiqueta del botón |
| `actions` | array | Ninox actions como en arcCustomButton: `[{ type: "update", recordId: Nr, field: ..., value: ... }]` |

```javascript
footerButtons: [
  {
    title: "Editor fokussieren",
    actions: [{ type: "customJS", value: "document.querySelector('.cm-editor')?.focus()" }]
  },
  {
    title: "State zurücksetzen",
    actions: [{
      type: "update",
      recordId: Nr,
      field: fieldId(Nr, "helper_mainContentState"),
      value: ""
    }]
  }
]
```

## Comportamiento

- **Editor cerrado:** Muestra «Editor no abierto». Sin MutationObserver, solo un polling ligero (1 s).
- **Editor abierto:** Recopila errores del gutter de CodeMirror y actualiza la lista.
- **Botón de escaneo:** Recorre el editor una vez y recopila todos los errores (también fuera del área visible). Resuelve el problema de virtualización de CodeMirror.
- **Clic en un error:** Se desplaza hasta la línea en el editor. Enfoque en dos fases: primero el panel desplaza el editor hasta el área de destino, luego se busca y centra la línea tras el render.
- **Posición:** El panel se muestra abajo a la derecha. La posición se puede mover arrastrando y se guarda en localStorage.

## Ampliabilidad

Más adelante se pueden añadir más secciones, p. ej. `aiHelper: { visible: true }`.