DevToolsManager

class DevToolsManager implements Manager

Integra-se ao Redux DevTools para acompanhar o estado e as actions. Nota: não integra o time-travel.

Adicione a extensão do Chrome ou a extensão do Firefox ao seu navegador para começar.

implementa

DevToolsManager implementa Manager

constructor(options?, skipLogging?)

options

Argumentos a enviar ao redux devtools.

Por exemplo, podemos habilitar a opção trace para ajudar a descobrir de onde as actions são despachadas.

main.ts

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');

skipLogging

(action: ActionTypes) => boolean

Permite ignorar o registro de algumas actions no devtool do navegador.

Por padrão, ignora as fetch actions em andamento

main.ts

import { createApp } from 'vue';
import {
  DataClientPlugin,
  DevToolsManager,
  getDefaultManagers,
} from '@data-client/vue';
import App from './App.vue';

// production builds leave out DevToolsManager
const managers = getDefaultManagers({
  devToolsManager: new DevToolsManager(undefined, () => true),
});

const app = createApp(App);
app.use(DataClientPlugin, { managers });
app.mount('#app');

Ignorando atualizações de alta frequência

Ao usar WebSockets ou outras fontes de dados em tempo real, atualizações de alta frequência podem sobrecarregar a extensão DevTools. Use a opção predicate para filtrar tipos de action ou schemas específicos:

managers.ts

import { getDefaultManagers, actionTypes } from '@data-client/vue';
import { Ticker } from './resources/Ticker';

const managers = getDefaultManagers({
  devToolsManager: {
    // Increase latency buffer for high-frequency updates
    latency: 1000,
    // Skip WebSocket SET actions for Ticker to reduce log spam
    // (including batched set([Ticker], rows) writes)
    predicate: (state, action) =>
      action.type !== actionTypes.SET ||
      (action.schema !== Ticker && action.schema[0] !== Ticker),
  },
});

Acesso programático à store

Em modo de desenvolvimento, o DevToolsManager registra cada Controller em globalThis.__DC_CONTROLLERS__, um Map indexado pelo nome da conexão do devtools. Ele também registra as ações despachadas mais recentes de cada um em globalThis.__DC_ACTIONS__, com a mesma chave. Isso funciona em navegadores, React Native e Node, com ou sem a extensão Redux DevTools.

Browser DevTools console

// List all registered providers
__DC_CONTROLLERS__.keys();

// Get state from the first provider
__DC_CONTROLLERS__.values().next().value.getState();

// Get state by name
__DC_CONTROLLERS__.get('Data Client: My App').getState();

// Last 10 actions, including the ones dispatched while the page loaded
__DC_ACTIONS__.get('Data Client: My App').slice(-10);

Isso é útil para assistentes de programação com IA que usam o Chrome DevTools MCP ou o Expo MCP para inspecionar e interagir programaticamente com a store. Cada DataClientPlugin instalado se registra de forma independente, portanto vários apps na mesma página são suportados. Quando um nome já está em uso, o próximo se registra como 'Data Client: My App (2)', e assim por diante; defina name para dar a cada um uma chave reconhecível. Onde não há window, como na renderização no servidor, um store substitui o anterior com o mesmo nome, já que os stores por requisição nunca são limpos.

O log de ações mantém até o dobro de maxAge ações (100 por padrão) e ignora os mesmos fetches duplicados que a extensão ignora. Para manter o uso de memória baixo, apenas as 20 ações mais recentes mantêm seus args e response; as mais antigas mantêm type, key, endpoint, meta e as respostas de erro. Enquanto um endpoint faz polling, o log mantém apenas as últimas maxPollingActions ações de cada chave (endpoint e args) (4 por padrão, os dois últimos polls), para que o polling não expulse todo o resto:

main.ts

import { createApp } from 'vue';
import { DataClientPlugin, getDefaultManagers } from '@data-client/vue';
import App from './App.vue';

const managers = getDefaultManagers({
  devToolsManager: { maxPollingActions: 10 },
});

const app = createApp(App);
app.use(DataClientPlugin, { managers });
app.mount('#app');

Os Controllers e seus logs são removidos quando cleanup() é chamado. Nada disso existe em builds de produção.

Mais informações

Usar este Manager permite depurar e inspecionar a store no navegador.