# Chrome Devtool
`微前端` 架构不同于传统单体应用的开发模式，其分开开发、部署、调试的特征使其需要一套新的调试工具来满足新的使用场景，诸如：在开发 `Module Federation` 时怎么验证模块在实际项目中的效果、 `Module Federation` 的依赖是否和宿主环境进行了复用、当前页面加载了哪些 `Module Federation` ， `Module Federation` 的依赖关系、`Module Federation` 间的数据流转是怎么样的。
`Chrome Devtool` 提供了以下能力：
- 支持 `Module Federation` 代理功能，将线上页面中的`Module Federation`代理到用户本地的`Module Federation`
- 切换线上页面`Module Federation`版本，来进行快速的功能验证
- 支持查看模块依赖信息
- 支持筛选指定模块依赖信息
::: tip 关于 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）等配置的生效状态。
## 如何安装
1. 打开 [Module Federation 插件详情页](https://chromewebstore.google.com/detail/module-federation/aeoilchhomapofiopejjlecddfldpeom?hl=zh-CN\&utm_source=ext_sidebar), 点击 `添加到 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，反之亦然。这允许你同时调试多个环境或应用状态。
## 如何将本地开发的模块代理到线上
- 首先需要在本地启动生产者
- 然后将启动成功的 manifest 地址，输入到代理页面的版本选择输入框内
- 之后调整本地的生产者代码，消费者页面将会自动 Reload
## 常见问题
### 是否支持多 Tab 隔离调试
> 不支持同一域名多个 Tab 同时调试
支持，当你同时打开多个标签页（Tabs）进行调试时，Chrome DevTool 插件会自动识别当前的活动 Tab，并隔离存储每个 Tab 的代理规则。
- **独立存储**：Tab A 的代理配置仅对 Tab A 生效，切换到 Tab B 后，面板会自动加载 Tab B 的配置。
- **状态保持**：即使多个 Tab 加载的是同一个 URL，它们的代理状态也是物理隔离的，互不干扰。
- **自动切换**：点击 DevTools 中的 "Focus Tab" 标签可以确认当前正在调试的目标页面。
### 配置何时生效
- ✅ 符合验证规则
- ✅ 配置规则被勾选
- ✅ 配置填写正确，页面显示：代理配置已生效，获取远程模块成功，已自动刷新对应页面
### 部分配置符合规则
插件会筛选出**符合配置规则的模块**进行代理
## 如何使用
插件提供了 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，反之亦然。这允许你同时调试多个环境或应用状态。
## 如何将本地开发的模块代理到线上
- 首先需要在本地启动生产者
- 然后将启动成功的 manifest 地址，输入到代理页面的版本选择输入框内
- 之后调整本地的生产者代码，消费者页面将会自动 Reload
## 常见问题
### 是否支持多 Tab 隔离调试
> 不支持同一域名多个 Tab 同时调试
支持，当你同时打开多个标签页（Tabs）进行调试时，Chrome DevTool 插件会自动识别当前的活动 Tab，并隔离存储每个 Tab 的代理规则。
- **独立存储**：Tab A 的代理配置仅对 Tab A 生效，切换到 Tab B 后，面板会自动加载 Tab B 的配置。
- **状态保持**：即使多个 Tab 加载的是同一个 URL，它们的代理状态也是物理隔离的，互不干扰。
- **自动切换**：点击 DevTools 中的 "Focus Tab" 标签可以确认当前正在调试的目标页面。
### 配置何时生效
- ✅ 符合验证规则
- ✅ 配置规则被勾选
- ✅ 配置填写正确，页面显示：代理配置已生效，获取远程模块成功，已自动刷新对应页面
### 部分配置符合规则
插件会筛选出**符合配置规则的模块**进行代理