#Chrome Devtool

The Micro-frontend architecture differs from the traditional monolithic application development model. Its characteristics of separate development, deployment, and debugging require a new set of debugging tools to meet new usage scenarios, such as: how to verify the effect of modules in actual projects during Module Federation development, whether the dependencies of Module Federation are reused with the host environment, which Module Federation modules are loaded on the current page, the dependency relationships of Module Federation, and how data flows between Module Federation modules.

Chrome Devtool provides the following capabilities:

• Supports Module Federation proxy function, proxying online page Module Federation to user local Module Federation.
• Switch online page Module Federation versions for quick functional verification.
• Support viewing module dependency information.
• Support filtering specified module dependency information.

#Usage Scenarios

DevTools provides multiple functional panels suitable for different debugging needs in development and production environments:

• Proxy: Used to proxy modules from online or test environments to the local development environment.

  • Supports local service port numbers, e.g., key: appA -> value: http://localhost:3000/mf-manifest.json, the page will directly load Module Federation content from port 3000.
  • Supports using mf-manifest.json file address format, e.g., key: appA -> value: https://xxx/static/mf-manifest.json, the page will directly load Module Federation content from the specified address.

• Module Info: Used to view detailed information of all Federation modules loaded on the current page, including version, entry address, etc.

• Dependency Graph: Visually displays the dependency reference relationships between modules, helping to clarify complex micro-frontend architectures.

• Shared: In-depth analysis of Shared Dependencies usage.

  • View loaded and unloaded shared dependencies.
  • Analyze version reuse of shared dependencies (Loaded / Reused).
  • Check the effective status of configurations such as Singleton and Strict Version.

#How to Install

1. Open the Module Federation Plugin Details Page, click the Add to Chrome button.

#How to Use

The plugin provides a Devtools panel.

• F12 open developer tools, select click Module Federation tab, enter the proxy page, and you can debug the dependent modules.

#Overall Interaction

As shown below, the proxy page provides options such as add new proxy module, producer selector, version or local port or custom entry, etc.

• Select a module that the target page needs to proxy by selecting producer selector;
• Select or enter the specified address (including port number and address ending with mf-manifest.json) through version or local port for proxy operation;
• If you need to proxy multiple modules at the same time, click the add new proxy module area to add the corresponding proxy module.
• Support Multi-Tab Isolation: When opening pages using Module Federation in multiple tabs simultaneously, the proxy rules and module information of each tab are independent. Proxy rules set in Tab A will not affect Tab B, and vice versa. This allows you to debug multiple environments or application states simultaneously.

#How to Proxy Locally Developed Modules to Online

• First, you need to start the producer locally.

• Then enter the successful manifest address into the version selection input box on the proxy page.
• Afterward, adjust the local producer code, and the consumer page will automatically Reload.

#FAQ

#Does it support multi-tab isolation debugging?

Yes, when you debug with multiple tabs open simultaneously, the Chrome DevTool plugin automatically identifies the current active tab and stores the proxy rules for each tab in isolation.

• Independent Storage: Proxy configuration for Tab A only affects Tab A. After switching to Tab B, the panel automatically loads Tab B's configuration.
• State Persistence: Even if multiple tabs load the same URL, their proxy states are physically isolated and do not interfere with each other.
• Automatic Switching: Clicking the "Focus Tab" tag in DevTools confirms the target page currently being debugged.

#When does the configuration take effect?

• ✅ Matches verification rules
• ✅ Configuration rule is checked
• ✅ Configuration filled in correctly, page displays: Proxy configuration has taken effect, remote module obtained successfully, corresponding page has been automatically refreshed.

#Partial configuration matches rules

The plugin will filter out modules that match the configuration rules for proxying.