#Chrome Devtool

O Module Federation Devtools permite inspecionar os módulos Federation, as relações de dependência e as dependências compartilhadas de uma página. Também é possível redirecionar módulos remotos para uma versão local ou específica e acompanhar o processo de carregamento.

#Uso em diferentes navegadores

O Module Federation Devtools é uma extensão do Chrome disponível em duas versões, adaptadas a ambientes de navegador diferentes. As duas oferecem os mesmos recursos de depuração; apenas a instalação e a forma de acesso são diferentes:

As duas versões oferecem proxy e troca de versões de módulos, informações de módulos, grafo de dependências, dependências compartilhadas, React HMR / Fast Refresh, Loading Trace, exportação de relatórios e WebMCP.

Ative apenas uma versão no mesmo navegador para evitar injeções duplicadas.

#Instalação

#Chrome para desktop

Abra a página da extensão Module Federation e clique em Adicionar ao Chrome.

#Navegador integrado

1. Abra Module Federation Releases e baixe o ZIP da versão Browser na seção Assets de uma versão estável. Não baixe os arquivos de Source code gerados automaticamente pelo GitHub.
2. Extraia o ZIP e carregue o diretório extraído no gerenciador de extensões do navegador integrado.
3. Abra ou atualize a página de destino e clique no ícone da extensão.

Os arquivos da versão Browser são publicados nas versões estáveis latest. As prévias next não criam GitHub Releases. Se a versão desejada não tiver esse arquivo, execute:

pnpm --filter @module-federation/devtools run build:devtool

Em seguida, carregue packages/chrome-devtools/dist/browser. Depois de atualizar a extensão, recarregue-a e atualize as páginas abertas.

#Recursos

#Usar a extensão

No Chrome para desktop, abra a página de destino, pressione F12 e selecione Module Federation no DevTools. Em um navegador integrado, clique no ícone da extensão.

#Configurar o proxy de um módulo

1. Selecione o módulo no painel Proxy.
2. Selecione uma versão de destino ou informe uma porta local ou uma URL completa de mf-manifest.json, como http://localhost:3000/mf-manifest.json.
3. Para redirecionar vários módulos, clique em add new proxy module e adicione outra regra.
4. Salve a configuração e atualize a página.

No desenvolvimento local, inicie primeiro o producer e informe a URL do manifest na regra de proxy. A página do consumer é recarregada automaticamente quando o código do producer é alterado.

#Loading Trace

O Loading Trace ajuda a diagnosticar páginas em branco, componentes presos no carregamento, versões inesperadas de dependências compartilhadas e falhas no carregamento de producers.

Estados do painel:

• OFF: não há um relatório de carregamento disponível na página atual.
• ON: a extensão está coletando dados da aba atual.
• CUSTOM: a página usa o Observability Plugin, e o Devtools está lendo seus relatórios.

Para acompanhar um carregamento:

1. Abra o Loading Trace. Se o estado for OFF, clique em Observe now; a página será atualizada uma vez.
2. Reproduza o problema ou acione o carregamento do componente remoto que deseja inspecionar.
3. Selecione um relatório e verifique o resultado, a linha do tempo de eventos, a etapa da falha e as ações sugeridas.
4. Clique em Export para salvar o relatório completo.

Os principais estados do relatório são sucesso, falha, em andamento e recuperação. O JSON exportado contém config, scopes e reports. Verifique principalmente:

• diagnosis: a conclusão, as evidências e as ações sugeridas.
• summary: o estado final do carregamento.
• remote / shared: o alvo carregado, o provider e os detalhes de versão.
• loadedBefore: se outro consumer já havia carregado o mesmo producer.
• events: a sequência completa de eventos.

#Usar o WebMCP com um agente de código

As duas versões da extensão registram automaticamente as ferramentas WebMCP quando a página é iniciada. A interface da extensão não precisa permanecer aberta, e a aplicação não precisa adicionar um SDK WebMCP.

Por exemplo, peça a um agente compatível com WebMCP:

Leia o estado atual do MF e preserve as regras de proxy existentes.
Redirecione mf_playground para https://localhost:3006/mf-manifest.json,
ative o HMR, atualize a página e verifique se a configuração entrou em vigor.

mf_set_proxy substitui toda a lista de regras de proxy; portanto, leia o estado atual antes de fazer alterações. As ferramentas de configuração retornam reloadRequired, e o agente deve atualizar a página de acordo com esse resultado.

O layout do grafo, os filtros, o tema e o idioma continuam sendo operações da interface. Para uma análise mais detalhada de erros de runtime ou gargalos de desempenho, use o Divebell.

#Observações

• A extensão não ignora CSP, CORS nem as restrições de rede do navegador. O redirecionamento de uma página HTTPS para um serviço HTTP local ainda exige políticas, protocolos e cabeçalhos de resposta para acesso entre origens compatíveis.
• As configurações de Proxy, HMR e Loading Trace são armazenadas no localStorage da origem da página. Abas da mesma origem podem compartilhar configurações. Use origens diferentes ou perfis de navegador separados quando precisar de configurações conflitantes.
• Se um agente não encontrar as ferramentas WebMCP, recarregue a extensão e atualize a página. Em seguida, verifique window.__MF_DEVTOOLS_WEBMCP__ no console. registered indica que o registro foi concluído, unavailable indica que o host não forneceu uma API compatível e error contém a causa específica.