See what your micro frontends actually negotiated.
A read-only Chrome DevTools panel for Native Federation applications.
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.
- 📦 Packages — the negotiation, per package: every candidate version, who declared which range, which file actually serves it. Conflicts are called out, not averaged away.
- 🛰️ Remotes — each participant from its own point of view: what it exposes, what it declares, and where every single dependency really resolves.
- 🕸️ Graph — remotes, dependency copies, and chunks as one traceable picture. Hover to trace, click to filter.
- 🗺️ Import Map — the effective map, row by row, each entry attributed to its package, its provider, and the chunk bundle that serves it.
- 📤 Export JSON — freeze the entire snapshot to a file. Doubles as a reproducible bug report.
- 🔒 Read-only, zero permissions — no host permissions, no content scripts. The panel inspects; it never mutates the page. Enforced by tests, not by convention.
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.
🛒 Chrome Web Store: coming soon — the extension will be published under the official Native Federation presence.
Until then, load a development build:
npm install
npm run build:extensionThen in Chrome: chrome://extensions → enable Developer mode → Load
unpacked → select the built extension directory. Open DevTools on any
Native Federation application — the panel appears as a new tab.
| Project | What it is |
|---|---|
| native-federation.com | Project home — docs, guides, team, resources |
| orchestrator | Runtime micro frontend orchestrator |
| devtools (this repo) | Chrome DevTools panel for inspecting running federations |
- Development & Architecture — build, run, test, repository layout, and the design constraints behind the tool
- Resolution data model — how a captured snapshot becomes the model behind the views
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.