#Chrome Devtool

Module Federation Devtools te permite inspeccionar los módulos federados, las relaciones de dependencias y las dependencias compartidas de una página. También puedes hacer proxy de módulos remotos hacia una versión local o específica y rastrear el proceso de carga de módulos.

#Uso en distintos navegadores

Module Federation Devtools es una extensión de Chrome con dos versiones para distintos entornos de navegador. Ambas versiones ofrecen las mismas funciones de depuración; solo cambian la instalación y el punto de acceso:

Ambas versiones admiten el proxy de módulos y el cambio de versión, la información de módulos, los grafos de dependencias, las dependencias compartidas, React HMR / Fast Refresh, Loading Trace, la exportación de informes y WebMCP.

Habilita solo una versión en el mismo navegador para evitar inyecciones duplicadas.

#Instalación

#Chrome de escritorio

Abre la página de la extensión Module Federation y haz clic en Add to Chrome.

#Navegador integrado

1. Abre Module Federation Releases y descarga el ZIP de Browser desde la sección Assets de una versión estable. No descargues los archivos Source code que GitHub genera automáticamente.
2. Descomprime el ZIP y carga el directorio extraído desde el gestor de extensiones del navegador integrado.
3. Abre o actualiza la página de destino y haz clic en el icono de la extensión.

Los assets de Browser se publican para las versiones estables latest. Las previews next no crean GitHub Releases. Si la versión de destino no tiene un asset de Browser, ejecuta:

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

Después carga packages/chrome-devtools/dist/browser. Tras actualizar la extensión, vuelve a cargarla y actualiza las páginas que tengas abiertas.

#Funcionalidades

#Usar la extensión

En Chrome de escritorio, abre la página de destino, pulsa F12 y selecciona Module Federation en DevTools. En un navegador integrado, haz clic en el icono de la extensión.

#Hacer proxy de un módulo

1. Selecciona en el panel Proxy el módulo al que quieres hacer proxy.
2. Selecciona una versión de destino, o introduce un puerto local o una URL completa de mf-manifest.json, como http://localhost:3000/mf-manifest.json.
3. Para hacer proxy de varios módulos, haz clic en add new proxy module para añadir otra regla.
4. Guarda la configuración y actualiza la página.

Para el desarrollo local, inicia primero el producer e introduce la URL de su manifest en la regla de proxy. La página del consumer se recarga automáticamente cuando actualizas el código del producer.

#Loading Trace

Loading Trace ayuda a diagnosticar páginas en blanco, componentes atascados en la carga, versiones de shared inesperadas y fallos de carga de producers.

Estados del panel:

• OFF: no hay ningún informe de carga legible disponible en la página actual.
• ON: la extensión está recopilando datos de la pestaña actual.
• CUSTOM: la página usa el Observability Plugin y Devtools está leyendo sus informes.

Para rastrear una carga:

1. Abre Loading Trace. Si el estado es OFF, haz clic en Observe now; la página se recargará una vez.
2. Reproduce el problema o desencadena la carga del componente remoto que quieres inspeccionar.
3. Selecciona un informe e inspecciona el resultado, la línea de tiempo de eventos, la fase en la que falló y las acciones sugeridas.
4. Haz clic en Export para guardar el informe completo.

Los principales estados de un informe son éxito, fallo, pendiente y recuperado. El JSON exportado contiene config, scopes y reports. Céntrate en:

• diagnosis: la conclusión, las evidencias y las acciones sugeridas.
• summary: el estado final de la carga.
• remote / shared: el destino cargado, el proveedor y los detalles de la versión.
• loadedBefore: si otro consumer ya había cargado el mismo producer.
• events: la secuencia completa de eventos.

#Trabajar con un agente de programación mediante WebMCP

Ambas versiones de la extensión registran automáticamente las herramientas WebMCP cuando se inicia la página. No es necesario mantener abierta la interfaz de la extensión, y la aplicación no necesita ningún SDK de WebMCP adicional.

Por ejemplo, pídele a un agente compatible con WebMCP:

Read the current MF state and preserve the existing proxy rules.
Proxy mf_playground to https://localhost:3006/mf-manifest.json,
enable HMR, reload the page, and verify that the configuration took effect.

mf_set_proxy reemplaza la lista completa de reglas de proxy, así que lee el estado actual antes de hacer cambios. Las herramientas de configuración devuelven reloadRequired; el agente debe recargar la página en función de ese resultado.

La disposición del grafo, el filtrado, el tema y el idioma siguen siendo operaciones de la interfaz. Para un análisis más profundo de errores de runtime o cuellos de botella de rendimiento, usa Divebell.

#Notas

• La extensión no omite las restricciones de CSP, CORS ni de red del navegador. Hacer proxy desde una página HTTPS hacia un servicio HTTP local sigue requiriendo políticas de página, protocolos y cabeceras de respuesta cross-origin compatibles.
• Los ajustes de Proxy, HMR y Loading Trace se guardan en el localStorage del origen de la página. Las pestañas del mismo origen pueden compartir ajustes. Usa orígenes distintos o perfiles de navegador separados cuando necesites configuraciones incompatibles entre sí.
• Si un agente no logra descubrir las herramientas WebMCP, vuelve a cargar la extensión y actualiza la página; después inspecciona window.__MF_DEVTOOLS_WEBMCP__ en la consola. registered significa que el registro se completó correctamente, unavailable significa que el host no proporcionó una API utilizable y error contiene la causa concreta.