Depuración e inspección
Depuración con agentes
Para muchas tareas de depuración, el camino más rápido es usar un agente que ya conozca el
flujo de depuración de @data-client/vue.
Instala la skill data-client-vue
en tu agente de programación y luego pídele que inspeccione la página o el estado actual de la aplicación.
Cómo funciona la depuración con agentes
En modo de desarrollo, DevToolsManager expone instancias activas de Controller para que un agente pueda inspeccionar
el estado del caché, los metadatos de los endpoints y las acciones despachadas directamente desde la aplicación en ejecución.
Técnicamente, esos controllers se almacenan en globalThis.__DC_CONTROLLERS__, que es un
Map global del navegador. Puedes pensar en él como un registro temporal del modo de desarrollo que permite a las herramientas
y a los agentes localizar los stores activos de DataClientPlugin de la página actual.
A grandes rasgos, el agente puede:
- descubrir los controllers activos de
DataClientPlugin - leer el estado del caché normalizado o desnormalizado
- inspeccionar fetches, respuestas, errores e invalidaciones recientes
- correlacionar los cambios del store con la actividad de red del navegador
- ejecutar operaciones seguras del controller, como la invalidación o la expiración, con fines de investigación
Esto es útil cuando quieres una respuesta rápida a preguntas como "¿por qué no se volvió a obtener esto?", "¿qué hay en el caché ahora mismo?" o "¿qué acción actualizó esta entity?" sin tener que recorrer manualmente cada panel del inspector.
La skill hace todo esto mediante Chrome DevTools MCP.
Depuración manual
Si prefieres inspeccionarlo todo tú mismo, el flujo de trabajo con las herramientas de desarrollo del navegador que se describe a continuación sigue siendo la vía manual estándar.
Instalación
Agrega la extensión del navegador para Chrome o Firefox
Abrir las herramientas de desarrollo
Después de instalarla y cargar tu sitio en modo de desarrollo, haz clic en el logotipo de redux-devtool en la barra de direcciones.
Al hacerlo se abrirá el inspector, que te permite observar las acciones despachadas, su efecto en el estado del store, así como el estado actual del store.
El Controller despacha acciones, lo que hace que esa página sea útil para entender qué acciones estás viendo. Aquí observamos las acciones comunes de fetch y setResponse.
De forma predeterminada, la integración con devtool filtra las acciones fetch duplicadas. Esto se puede cambiar con la opción skipLogging.
Flujo de control
Data Client usa el patrón de store flux, lo que hace que la depuración sea sencilla, ya que cada cambio es rastreable y descriptivo.
Inspección del estado
Cuando se usan schemas, las respuestas se normalizan en las tablas entities
y endpoints. Esto aporta ventajas de rendimiento automáticas frente a cachés de fetch clave-valor más simples, especialmente
beneficiosas con datos dinámicos (que cambian). Además, elimina los errores por inconsistencia de datos.
Haz clic en la pestaña 'state' de devtools para ver el estado completo del store. Esto puede ser útil para determinar exactamente dónde están los datos. También hay una sección 'meta' del caché con información como el momento en que se realizó la solicitud (útil para el TTL).
Diferencias de estado
Para monitorear la respuesta de un fetch en particular, puede ser más útil ver cómo se actualiza el store. Haz clic en la pestaña 'Diff' para ver qué cambió.
Aquí alternamos el estado 'completed' de una tarea pendiente mediante una actualización optimista.
Rastreo de acciones
El rastreo no está habilitado de forma predeterminada, ya que es muy costoso computacionalmente. Sin embargo, puede ser muy útil
para encontrar desde dónde se despachan las acciones. Personaliza DevToolsManager
estableciendo la opción trace en true con getDefaultManagers:
import { createApp } from 'vue';
import { DataClientPlugin, getDefaultManagers } from '@data-client/vue';
import App from './App.vue';
const managers = getDefaultManagers({
devToolsManager: { trace: true },
});
const app = createApp(App);
app.use(DataClientPlugin, { managers });
app.mount('#app');