Read-only Chrome DevTools panel for inspecting Native Federation applications
4
stars
94
commits
TypeScript
primary language
Aug 31, 2026
updated
See what your micro frontends actually negotiated.
A read-only Chrome DevTools panel for Native Federation applications running the v4 Orchestrator.
Which version of
@angular/corewon? Who provided it? Why did that remote end up with its own copy?
The negotiation happens once at startup β then it disappears into the import map. Native Federation DevTools reads it back out of the running page and explains it: every shared package, every remote, every chunk. Evidence, not guesses.
In progress: Diagnostics (registryβmap lint) and global search.
One hover answers "who shares this β and which files does it load?"
Dashed nodes are isolated copies, dotted edges are borrowed dependencies β the sharing story is visible at a glance.
Four participants declared @angular/core β one version won, three were not
selected, and every mapped file is accounted for, SRI included.
Exposes, provided packages, and β line by line β which dependency this remote consumes from whom, and which own version lost the negotiation.
Requires the v4 Orchestrator. The panel reads the registry that
@softarc/native-federation-orchestratorkeeps in the page (window.__NATIVE_FEDERATION__). Applications on the classic v3 runtime (@softarc/native-federation-runtime) do not expose this registry and are not supported β on such pages the panel shows No Native Federation detected.
π Chrome Web Store: coming soon β the extension will be published under the official Native Federation presence. Until then, install it from a GitHub release. No build toolchain needed β it takes about a minute.
native-federation-devtools-<version>.zip from the
releases page
and unzip it into a folder of its own (the zip has no top-level folder).
Keep that folder β Chrome loads the extension from it.chrome://extensions in Chrome β type it into the address bar.F12, or Ctrl+Shift+I / β₯βI) on an application
that runs the v4 Orchestrator. The panel appears as a new
Native Federation tab β if DevTools was already open, close and reopen
it once.Unpacked extensions do not update themselves. To upgrade, unzip the new
release into the same folder and click the β» reload icon on the extension's
card in chrome://extensions. Automatic updates come with the Web Store.
Contributors can build the extension themselves β see Development & Architecture.
| Project | What it is |
|---|---|
| native-federation.com | Project home β docs, guides, team, resources |
| orchestrator | Runtime micro frontend orchestrator (v4) β the runtime this panel reads |
| devtools (this repo) | Chrome DevTools panel for inspecting running federations |
Developed and maintained by Lutz Leonhardt as part of the official Native Federation project.
Built in an agentic workflow with Claude Code and Codex as pair programmers β architecture, review, and verification stay with the maintainer.
Licensed under MIT.
93 commits
1 commits
TypeScript
89.7%
HTML
4.3%
JavaScript
3.1%
CSS
2.8%
Read-only Chrome DevTools panel for inspecting Native Federation applications
4
stars
94
commits
TypeScript
primary language
Aug 31, 2026
updated
See what your micro frontends actually negotiated.
A read-only Chrome DevTools panel for Native Federation applications running the v4 Orchestrator.
Which version of
@angular/corewon? Who provided it? Why did that remote end up with its own copy?
The negotiation happens once at startup β then it disappears into the import map. Native Federation DevTools reads it back out of the running page and explains it: every shared package, every remote, every chunk. Evidence, not guesses.
In progress: Diagnostics (registryβmap lint) and global search.
One hover answers "who shares this β and which files does it load?"
Dashed nodes are isolated copies, dotted edges are borrowed dependencies β the sharing story is visible at a glance.
Four participants declared @angular/core β one version won, three were not
selected, and every mapped file is accounted for, SRI included.
Exposes, provided packages, and β line by line β which dependency this remote consumes from whom, and which own version lost the negotiation.
Requires the v4 Orchestrator. The panel reads the registry that
@softarc/native-federation-orchestratorkeeps in the page (window.__NATIVE_FEDERATION__). Applications on the classic v3 runtime (@softarc/native-federation-runtime) do not expose this registry and are not supported β on such pages the panel shows No Native Federation detected.
π Chrome Web Store: coming soon β the extension will be published under the official Native Federation presence. Until then, install it from a GitHub release. No build toolchain needed β it takes about a minute.
native-federation-devtools-<version>.zip from the
releases page
and unzip it into a folder of its own (the zip has no top-level folder).
Keep that folder β Chrome loads the extension from it.chrome://extensions in Chrome β type it into the address bar.F12, or Ctrl+Shift+I / β₯βI) on an application
that runs the v4 Orchestrator. The panel appears as a new
Native Federation tab β if DevTools was already open, close and reopen
it once.Unpacked extensions do not update themselves. To upgrade, unzip the new
release into the same folder and click the β» reload icon on the extension's
card in chrome://extensions. Automatic updates come with the Web Store.
Contributors can build the extension themselves β see Development & Architecture.
| Project | What it is |
|---|---|
| native-federation.com | Project home β docs, guides, team, resources |
| orchestrator | Runtime micro frontend orchestrator (v4) β the runtime this panel reads |
| devtools (this repo) | Chrome DevTools panel for inspecting running federations |
Developed and maintained by Lutz Leonhardt as part of the official Native Federation project.
Built in an agentic workflow with Claude Code and Codex as pair programmers β architecture, review, and verification stay with the maintainer.
Licensed under MIT.
93 commits
1 commits
TypeScript
89.7%
HTML
4.3%
JavaScript
3.1%
CSS
2.8%