• 简体中文

      • Chrome Devtool

      微前端 架构不同于传统单体应用的开发模式，其分开开发、部署、调试的特征使其需要一套新的调试工具来满足新的使用场景，诸如：在开发 Module Federation 时怎么验证模块在实际项目中的效果、 Module Federation 的依赖是否和宿主环境进行了复用、当前页面加载了哪些 Module Federation ， Module Federation 的依赖关系、Module Federation 间的数据流转是怎么样的。

      Chrome Devtool 提供了以下能力：

      • 支持 Module Federation 代理功能，将线上页面中的Module Federation代理到用户本地的Module Federation
      • 切换线上页面Module Federation版本，来进行快速的功能验证
      • 支持查看模块依赖信息
      • 支持筛选指定模块依赖信息
      • 支持加载追踪，记录 remote、shared、组件加载信号和失败报告
      关于 Chrome Devtool 的限制：

      必须使用 mf-manifest.json 才可以使用 Chrome devtool 提供的可视化和代理能力

      使用场景

      DevTools 提供了多个功能面板，适用于开发环境以及生产环境的不同调试需求：

      • Proxy (代理)：用于将线上或测试环境的模块代理到本地开发环境。

        • 支持本地服务端口号，例如 key: appA -> value: http://localhost:3000/mf-manifest.json，页面将直接加载 3000 端口的 Module Federation 内容。
        • 支持使用 mf-manifest.json 文件地址形式，例如：key: appA -> value: https://xxx/static/mf-manifest.json， 页面将直接加载指定地址的 Module Federation 内容。

      • Module Info (模块信息)：用于查看当前页面加载的所有 Federation 模块的详细信息，包括版本、入口地址等。

      • Dependency Graph (依赖关系图)：以可视化的方式展示模块之间的依赖引用关系，帮助理清复杂的微前端架构。

      • Shared (共享依赖)：深入分析 Shared Dependencies 的使用情况。

        • 查看已加载和未加载的共享依赖。
        • 分析共享依赖的版本复用情况（Loaded / Reused）。
        • 检查单例（Singleton）、严格版本（Strict Version）等配置的生效状态。

      • 加载追踪：记录当前页面的 Module Federation 加载过程。

        • 查看 loadRemote、loadShare 的开始、成功、失败和恢复状态。
        • 查看当前是谁在加载哪个 remote、哪个 expose，以及 shared 使用了哪个 provider 和版本。
        • 如果页面已经接入 观测插件，面板会读取页面已有报告，状态显示为 CUSTOM。
        • 如果页面没有接入观测插件，可以在面板中点击「开启采集」，Chrome 插件会为当前 Tab 临时注入采集插件。

      如何安装

      1. 打开 Module Federation 插件详情页, 点击 添加到 Chrome 按钮

      如何使用

      插件提供了 Devtools 面板

      • F12 打开开发者工具，选择点击 Module Federation tab，进入代理页面，便可对依赖的模块进行代理调试

      整体交互

      如下图所示，代理页面上提供了 add new proxy module、producer selector、 version or local port or custom entry 等选项操作。

      • 通过选择 producer selector 选择出目标页面需要代理的一个模块;
      • 通过 version or local port 选择或者输入指定的地址（包括端口号和 mf-manifest.json 结尾的地址），进行代理操作;
      • 如果需要同时代理多个模块，点击 add new proxy module 区域，增加对应的代理模块。
      • 支持多 Tab 隔离：在多个标签页中同时打开使用了 Module Federation 的页面时，每个 Tab 的代理规则和模块信息都是相互独立的。你在 Tab A 中设置的代理规则不会影响 Tab B，反之亦然。这允许你同时调试多个环境或应用状态。

      加载追踪

      「加载追踪」Tab 用于回答“当前页面的 MF 加载到底发生了什么”。它适合在页面空白、组件一直 loading、shared 版本不确定、生产者偶发失败时使用。

      面板顶部的状态含义如下：

      • OFF：当前页面还没有可读取的加载报告。
      • ON：Chrome 插件已经为当前 Tab 开启采集。
      • CUSTOM：当前页面已经自己注册了观测插件，面板正在读取页面已有报告。

      常用流程：

      1. 打开目标页面。
      2. 打开 Chrome DevTools，进入 Module Federation 面板。
      3. 点击「加载追踪」。
      4. 如果状态是 OFF，点击「开启采集」，页面会刷新一次。
      5. 复现问题，或者触发需要观察的远程组件加载。
      6. 在报告列表中选择一条记录，查看当前加载、历史加载记录、事件时间线和失败建议。
      7. 点击「导出」保存完整报告。

      报告状态可以这样理解：

      • 成功：这条 MF 链路已经完成。remote 加载成功会显示 remote 结果；shared 解析成功会显示 provider 和版本。
      • 失败：这条链路出现错误，优先看右侧的失败阶段、错误码和建议。
      • 进行中：只看到了开始事件，还没有看到完成、失败或恢复事件。
      • 兜底成功：加载过程中出现过问题，但运行时通过 fallback 或恢复路径继续执行。
      • 基础观测：当前运行时版本较低或无法识别，只能看到基础事件，细阶段可能缺失。

      导出报告后怎么分析

      导出的 JSON 会包含 config、scopes 和 reports。每条 report 里最重要的是：

      • diagnosis：面向排查的结论、证据和下一步建议。
      • summary：最终状态，例如 runtime-loaded、component-loaded、shared-resolved、failed、recovered、pending。
      • remote / shared：当前加载对象。shared 报告里重点看 provider、要求版本、实际版本和可用版本。
      • loadedBefore：同一个生产者之前是否已经被其他消费者加载过。
      • events：完整事件顺序，用于确认卡在哪一步。

      可以把导出的报告直接交给 AI coding agent：

      /mf obs

我这里有一份 Chrome DevTools 导出的 MF 加载追踪报告。
请帮我判断这次加载是否成功，失败点在哪里，最可能是谁的问题，以及下一步怎么修。

<粘贴导出的 JSON>

      如何将本地开发的模块代理到线上

      • 首先需要在本地启动生产者

      • 然后将启动成功的 manifest 地址，输入到代理页面的版本选择输入框内
      • 之后调整本地的生产者代码，消费者页面将会自动 Reload

      常见问题

      是否支持多 Tab 隔离调试

      不支持同一域名多个 Tab 同时调试

      支持，当你同时打开多个标签页（Tabs）进行调试时，Chrome DevTool 插件会自动识别当前的活动 Tab，并隔离存储每个 Tab 的代理规则。

      • 独立存储：Tab A 的代理配置仅对 Tab A 生效，切换到 Tab B 后，面板会自动加载 Tab B 的配置。
      • 状态保持：即使多个 Tab 加载的是同一个 URL，它们的代理状态也是物理隔离的，互不干扰。
      • 自动切换：点击 DevTools 中的 "Focus Tab" 标签可以确认当前正在调试的目标页面。

      配置何时生效

      • ✅ 符合验证规则
      • ✅ 配置规则被勾选
      • ✅ 配置填写正确，页面显示：代理配置已生效，获取远程模块成功，已自动刷新对应页面

      部分配置符合规则

      插件会筛选出符合配置规则的模块进行代理