Chrome DevTools#

The Microfrontend architecture differs from the traditional monolithic application development model. Its characteristics of separate development, deployment, and debugging necessitate a new set of debugging tools to meet new usage scenarios, such as: how to verify the effect of modules in actual projects when developing Module Federation, 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 the data flow between Module Federation works.

Chrome DevTools provides the following capabilities:

• Support for Module Federation proxy functionality, which proxies the Module Federation on the online page to the user's local Module Federation.
• Switch the version of Module Federation on the online page for rapid feature verification.
• Support for viewing module dependency information.
• Support for filtering specific module dependency information.

Use Cases#

Development and production environments:

• Existing modules need to be proxied, currently supporting the following scenarios:

1. Support for local server port numbers, for example, key: appA -> value: http://localhost:3000/mf-manifest.json, the page will directly load the Module Federation content from port 3000.
2. Support for using the mf-manifest.json file address format, for example, key: appA -> value: https://xxx/static/mf-manifest.json, the page will directly load the Module Federation content from the specified address.

• Want to see the remote dependency relationship graph.

How to Install#

1. Open the Module Federation plugin detail page, and click the Add to Chrome button.

How to Use#

The plugin provides a DevTools panel:

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

Overall Interaction#

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

• Select a module that needs to be proxied on the target page by choosing the producer selector.
• Select or enter a specific address (including port number and address ending with mf-manifest.json) through version or local port to perform the 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 modules.

How to Proxy Locally Developed Modules to Online#

• First, you need to start the producer locally.

• Then enter the successfully launched manifest address into the version selection input box on the proxy page.
• After adjusting the local producer code, the consumer page will automatically Reload.

Common Issues#

DevTools Content is Too Crowded#

You can open DevTools in a separate window.

When Does the Configuration Take Effect#

• ✅ Complies with validation rules.

• ✅ Configuration rules are checked.

• ✅ Configuration is filled in correctly, the page shows: Proxy configuration is effective, remote module retrieval is successful, the corresponding page has been automatically refreshed.

Partial Configuration Complies with Rules#

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