• 简体中文

      • Chrome Devtool

      Module Federation Devtools 用于查看页面中的 Federation 模块、依赖关系和共享依赖，也可以将远程模块代理到本地或指定版本，并追踪模块加载过程。

      使用要求

      可视化和代理功能依赖 mf-manifest.json。

      在不同浏览器中使用

      Module Federation Devtools 是 Chrome 扩展，提供两个适配不同浏览器环境的版本。两个版本的调试功能相同，仅安装方式和打开入口不同：

      使用场景扩展版本打开方式
      标准桌面 Chrome桌面 Chrome 版（dist/chrome）扩展侧边栏或 Chrome DevTools 中的 Module Federation 面板
      支持 Chrome 扩展的 AI 应用内置浏览器，例如 ChatGPT 内置浏览器内置浏览器版（dist/browser）点击扩展图标打开紧凑弹窗

      两个版本均支持模块代理与版本切换、模块信息、依赖关系图、共享依赖、React HMR / Fast Refresh、加载追踪、报告导出和 WebMCP。

      同一个浏览器中只应启用一个版本，避免重复注入。

      无头浏览器或 CI 环境

      以上两个版本适用于可交互的浏览器环境。对于无头浏览器或 CI 自动化，推荐使用 Divebell 及其 Module Federation Extension。

      Divebell 可以通过 CLI 加载页面、采集 Module Federation 运行时信息并输出结构化诊断结果，无需打开扩展界面。安装和使用方式请参考 使用 Divebell 排查运行时问题。

      安装

      桌面 Chrome 版

      打开 Module Federation 插件详情页，点击 添加到 Chrome。

      内置浏览器版

      1. 打开 Module Federation Releases，在正式版本的 Assets 中下载 Browser 版 ZIP。不要下载 GitHub 自动生成的 Source code 压缩包。
      2. 解压 ZIP，在内置浏览器的扩展管理页面中加载解压后的目录。
      3. 打开或刷新目标页面，点击扩展图标。

      latest 正式版会发布 Browser 版附件，next 预览版不创建 GitHub Release。若目标版本没有附件，可以在仓库中执行：

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

      然后加载 packages/chrome-devtools/dist/browser。更新插件后，需要重载扩展并刷新已打开的页面。

      功能

      面板用途
      Proxy将远程模块切换到本地服务、指定版本或自定义 mf-manifest.json 地址
      Module Info查看当前页面加载的 Federation 模块、版本和入口地址
      Dependency Graph查看和筛选模块之间的依赖关系
      Shared查看共享依赖的加载状态、复用版本以及 Singleton、Strict Version 等配置
      Loading Trace追踪 remote、shared 和组件的加载过程，查看失败原因并导出报告

      使用插件

      在桌面 Chrome 中，打开目标页面后按 F12，在开发者工具中选择 Module Federation。在内置浏览器中，点击扩展图标打开插件。

      代理模块

      1. 在 Proxy 面板中选择要代理的模块。
      2. 选择目标版本，或输入本地端口和完整的 mf-manifest.json 地址，例如 http://localhost:3000/mf-manifest.json。
      3. 如需代理多个模块，点击 add new proxy module 添加规则。
      4. 保存配置并刷新页面。

      本地开发时，先启动生产者，再将其 manifest 地址填入代理规则。修改生产者代码后，消费者页面会自动 Reload。

      加载追踪

      Loading Trace 用于排查页面空白、组件持续 loading、shared 版本不符合预期或生产者加载失败等问题。

      面板状态：

      • OFF：当前页面没有可读取的加载报告。
      • ON：插件已为当前 Tab 开启采集。
      • CUSTOM：页面已接入观测插件，Devtools 正在读取已有报告。

      使用步骤：

      1. 打开 Loading Trace；如果状态为 OFF，点击「开启采集」，页面会刷新一次。
      2. 复现问题或触发需要观察的远程组件加载。
      3. 选择报告，查看加载结果、事件时间线、失败阶段和处理建议。
      4. 点击「导出」保存完整报告。

      报告中的主要状态包括成功、失败、进行中和兜底成功。导出的 JSON 包含 config、scopes 和 reports，分析时重点关注：

      • diagnosis：排查结论、证据和建议。
      • summary：最终加载状态。
      • remote / shared：加载对象、provider 和版本信息。
      • loadedBefore：同一生产者此前是否已被其他消费者加载。
      • events：完整事件顺序。

      通过 WebMCP 与 Coding Agent 配合

      桌面 Chrome 版发布状态

      桌面 Chrome 版的 WebMCP 功能正在 Chrome Web Store 上线审核中。审核通过前，商店版本暂不支持本节介绍的能力。

      两个扩展版本都会在页面启动时自动注册 WebMCP 工具，不需要保持插件界面打开，也不需要业务页面额外接入 WebMCP SDK。

      工具用途
      mf_get_state读取运行时、代理、HMR 配置和加载报告
      mf_get_modules查看全部模块或指定模块
      mf_get_dependencies获取模块依赖关系
      mf_get_shared查看共享依赖版本和加载状态
      mf_set_proxy / mf_clear_proxy设置或清除模块代理
      mf_set_hmr开启或关闭 React HMR / Fast Refresh
      mf_configure_loading_trace配置加载追踪
      mf_get_loading_reports读取加载报告
      mf_export_snapshot导出诊断快照 JSON

      例如，可以让支持 WebMCP 的 Agent 执行：

      读取当前页面的 MF 状态，保留现有代理规则，
把 mf_playground 代理到 https://localhost:3006/mf-manifest.json，
开启 HMR，刷新页面后检查配置是否生效。

      mf_set_proxy 会替换完整的代理规则列表，因此修改前应先读取现有状态。配置工具会返回 reloadRequired，Agent 应根据结果刷新页面。

      依赖图布局、筛选、主题和语言等界面操作仍需在 UI 中完成。需要进一步分析运行时错误或性能瓶颈时，可以使用 Divebell。

      注意事项

      • 插件不会绕过 CSP、CORS 或浏览器网络限制。HTTPS 页面代理到本地 HTTP 服务时，仍需正确配置页面策略、协议和跨域响应。
      • Proxy、HMR 和 Loading Trace 配置保存在页面 origin 的 localStorage 中，同源标签页可能共享配置。需要同时使用不同配置时，请使用不同 origin 或独立的浏览器配置文件。
      • 如果 Agent 没有发现 WebMCP 工具，请重载扩展并刷新页面，然后在 Console 检查 window.__MF_DEVTOOLS_WEBMCP__。registered 表示注册成功，unavailable 表示宿主没有提供可用 API，error 的具体原因记录在 error 字段中。